<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('partials/head') %>
    <link rel="stylesheet" href="/stylesheets/group.css">
</head>
<body>
	<%- include('partials/navbar') %>
    <main class="center">
    	<h1 class="header">Select a Housing Group!</h1>
    	<p class="sub-header">Enter a group code or create your own.</p>
    	<div class="group-body">
    		<img src="/assets/group/decoration1.png" alt="Woman doing chores" id="chores-decoration">
	    	<div class="group-forms">
                <% if(locals.groupError) { %> 
                    <p class="error-message"><%=groupError%></p>
                <% } else { %> 
                    <p class="error-message" style="visibility: hidden;">invisible</p>
                <% } %> 
		    	<form class="join-group-form" action="/group/join" method="POST">
		    		<input type="text" class="textbox" name="code" placeholder="Group Code" maxlength="10" required>
		    		<button type="submit" class="join-button"><i class="fas fa-user-plus"></i> Join Group</button>
		    	</form>
		    	<p id="divider"></p>
		    	<form class="join-group-form" action="/group/create" method="POST">
		    		<button type="submit" class="create-button"><i class="fas fa-users"></i> Create New Group</button>
		    	</form>
	    	</div>
	    	<img src="/assets/group/decoration2.png" alt="Woman doing chores" id="chores-decoration">
    	</div>
    </main>
    <%- include('partials/footer') %>
</body>
</html>