<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('partials/head') %>
    <link rel="stylesheet" href="/stylesheets/settings.css">
</head>
<body>
  	<%- include('partials/navbar') %>
    <main class="center">
    	<h1 class="header">Settings</h1>
    	<p class="sub-header">Make changes to your profile</p>
    	<div id="container">
    		<img src="assets/group/decoration1.png" alt="Woman doing chores" id="chores-decoration">
    		<div id="settings-body">
	    		<form class="settings-form" action="/settings?_method=PATCH" method="POST">
	    			<label>
	    				Change Profile Picture:
						<input type="text" class="textbox" name="avatar" placeholder="Image URL">
	    			</label>
	    			<label>
	    				Change Name: 
						<input type="text" class="textbox" name="name" placeholder="Your name">
	    			</label>
			   		<button type="submit" name="save-settings" class="settings-change-button">Save Changes</button>
			   		<% if (locals.settingsError) { %>
			   			<p class="error-message" style="margin-top:15px; margin-left: auto; margin-right: auto;"><%=settingsError%></p>
                    <% } else { %> 
			   			<p class="error-message" style="visibility: hidden;">invisible</p>
                    <% } %> 
	    		</form>
				<p class="divider"></p>
				<form action="/settings?_method=DELETE" method="POST">
					<button type="submit" name="leave-group" class="leave-button" class="settings-form">Leave Group</button>
				</form>
	    	</div>
	    	<img src="assets/group/decoration2.png" alt="Man doing chores" id="chores-decoration">
    	</div>
    </main>
    <%- include('partials/footer') %>
</body>
</html>