{% extends "layouts/default.html" %}
{% block title %}Create a new account{% endblock %}
{% block content %}
<main class="be-main">
    <h1>Create Your New Account</h1>
    <form class="be-gui-form"
          action="/sign-up"
          method="post">
	    <input type="hidden"
                   name="AUTHENTICITY-TOKEN"
                   value="{{token}}">
	    <label>Username</label>
            <p class="be-gui-form-hint">
                Enter your email address or create a unique name to log into the
                website. You can not change this after you've created your
                account.
            </p>
	    <input required
                   type="text"
                   name="USERNAME"
                   placeholder="Enter your username here...">
	    <label>Display Name</label>
            <p class="be-gui-form-hint">
                Your display name is how the website will refer to you whilst
                logged-in. You can change this after you've logged into the
                website.
            </p>
	    <input required
                   type="text"
                   name="DISPLAY-NAME"
                   placeholder="Enter your display name here...">
	    <label>Password</label>
	    <input required
                   type="password"
                   name="PASSWORD"
                   placeholder="Enter your password here...">
	    <label>Password Check</label>
            <p class="be-gui-form-hint">
                Re-enter your password here to make sure you haven't misspelt it.
            </p>
	    <input required
                   type="password"
                   name="PASSWORD-CHECK"
                   placeholder="Re-enter your password here to confirm it...">
            <button class="be-gui-button"
		    title="Click to login"
		    type="submit">
		<img alt="Create Account"
		     src="/images/icons/create-account.png">
		Sign-Up
	    </button>
    </form>
</main>
{% endblock %}