<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head') %>
    <link rel="stylesheet" href="/stylesheets/dashboard.css">
</head>
<body>
	<%- include('../partials/navbar') %>
    <main>
    	<div id="dashboard-header">
    		<p class="dashboard-code"><b>Group:</b> <%=group%></p>
    		<h1 class="header">Dashboard</h1>
            <p class="dashboard-code" style="visibility: hidden;"><b>Group:</b> <%=group%></p>
    	</div>
        <% if (locals.data) { %> 
            <% if (data.length < 50) { %> 
    			<button id="add-chore-button" onclick="window.location='/dashboard/add';">Add Chore</button>
            <% } else { %> 
    			<button id="cant-add-chore">Chore list is full. Please complete or delete chores in order to add new ones.</button>
            <% } %> 
	    	<div class="chore-container">
                <% for (let i=0; i<data.length; i++) {
					let chore = data[i];
				%> 
	    			<div class="chore">
	    				<div>
	    					<h1 class="chore-name"><%=chore.name%></h1>
	    					<p class="chore-data"><%=chore.description%></p>
	    				</div>
                        <% if (chore.claimed) { %> 
					    	<img class="claimed-img" src="<%=avatars[chore.claimed]%>" alt="A user's profile picture">
                        <% } %>
			    		<aside>
			    			<p class="chore-data"><%=chore.points%> Points</p>
			    			<div id="chore-buttons" action="chore" method="POST">
                                <% if (!chore.claimed) { %> 
									<form action="/dashboard/claim" method="POST">
										<button id="claim-chore-button" name="index" value="<%=i%>"><i class="fas fa-user-check"></i></button>
									</form>
									<form action="/dashboard/delete?_method=DELETE" method="POST">
			    						<button id="delete-chore-button" name="index" value="<%=i%>"><i class="fas fa-times"></i></button>
									</form>
								<% } else if (chore.claimed === email) { %>
									<form action="/dashboard/finish" method="POST">
			    						<button id="finish-chore-button" name="index" value="<%=i%>"><i class="fas fa-check"></i></button>
									</form>
									<form action="/dashboard/delete?_method=DELETE" method="POST">
			    						<button id="delete-chore-button" name="index" value="<%=i%>"><i class="fas fa-times"></i></button>
									</form>
                                <% } %>
			    			</div>
			    		</aside>
	    			</div>
                <% } %>
	    	</div>
    	<% } else { %> 
    		<button id="add-first-chore-button" onclick="window.location='/dashboard/add';">Add Chore</button>
        <% } %> 
    	<p class="divider" id="dashboard-separator"></p>
    	<div id="bottom-dashboard">
    		<img src="assets/dashboard/decoration1.png" alt="Man doing chores" id="chores-decoration">
    		<div id="profile">
	    		<img class="profile-img" src="<%=avatar%>" alt="Your profile picture" onclick="window.location='settings';">
	    		<h1 style="margin-bottom: 0px;"><%=name%></h1>
	    		<p><%=points%> Points</p>
	    		<button id="leaderboard-button" onclick="window.location='leaderboard';">Leaderboard</button>
	    		<button id="chat-button" onclick="window.location='chat';">Group Chat</button>
    		</div>
    		<img src="assets/dashboard/decoration2.png" alt="Man doing chores" id="chores-decoration">
    	</div>
    </main>
    <%- include('../partials/footer') %>
</body>
</html>