{% extends "layouts/default.html" %}
{% block title%}Edit your accout settings.{%endblock%}
{% block content %}
<div class="be-main">
    <h1>Edit Account</h1>

    <div class="be-quicklist">
	<a class="be-gui-link"
	   title="Click to view your dashboard"
	   href="/dashboard">
	    <img alt="View Dashboard"
		 src="/images/icons/dashboard.png">
	    View Dashboard
	</a>
	<a class="be-gui-link"
	   title="Click to view all accounts"
	   href="/users">
	    <img alt="Manage Accounts"
		 src="/images/icons/all-accounts.png">
	    Manage Accounts
	</a>
    </div>

    <form class="be-gui-form"
	  action="/user/edit/display-name"
	  method="post">
	<input type="hidden"
	       name="AUTHENTICITY-TOKEN"
	       value="{{token}}">
	<label>Display Name</label>
	<p class="be-gui-form-hint">
	    Your 'username' is what you use to login to the
	    website. That cannot be changed. Your 'display name' is
	    the name used in places like your Dashboard.
	</p>
	<input required
	       type="text"
	       name="DISPLAY-NAME"
	       value="{{user.display-name}}"
	       placeholder="Enter your display name here...">
	<button class="be-gui-button"
		       title="Click to update your account's display name"
		       type="submit">
	    <img alt="Update Account Details"
		 src="/images/icons/save.png">
	    Update Display Name
	</button>
    </form>

    <form class="be-gui-form"
	  action="/user/edit/password"
	  method="post">
	<input type="hidden"
	       name="AUTHENTICITY-TOKEN"
	       value="{{token}}">
	<label>New Password</label>
	<input required
	       type="password"
	       name="NEW-PASSWORD"
	       placeholder="Enter your new password here...">
	<label>New Password Check</label>
	<input required
	       type="password"
	       name="PASSWORD-CHECK"
	       placeholder="Re-enter your new password here to confirm...">
	<button class="be-gui-button"
		       title="Click to update your account details"
		       type="submit">
	    <img alt="Update Account Details"
		 src="/images/icons/save.png">
	    Save New Password
	</button>
    </form>

    <h2>Delete Account</h2>
    <p class="be-gui-form-hint">
	Warning: This cannot be undone. Enter '{{user.username}}' in
	the text box below before clicking 'Delete Account' to confirm
	deletion.
    </p>
    <form class="be-gui-form"
	  action="/user/delete"
	  method="post">
	<input required
	       type="hidden"
	       name="AUTHENTICITY-TOKEN"
	       value="{{token}}">
	<input required
	       type="text"
	       name="DELETE-ACCOUNT-CHECK"
	       placeholder="Enter your '{{user.username}}' here to confirm deletion...">
	<button class="be-gui-button"
		title="Click to update your account details"
		type="submit">
	    <img alt="Update Account Details"
		 src="/images/icons/delete-account.png">
	    Delete Account
	</button>
    </form>

</div>
{% endblock %}