{{define "head"}}
<title>Register - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/admin/static/admin.css">
<style>
p a {
    color: #2a67c8;
}

a.discord {
    color: #5865F2;
}

form#register {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form div {
    width: 20rem;
}

form button {
    margin-top: 1rem;
}

input {
    width: calc(100% - 1rem - 2px);
}
</style>
{{end}}

{{define "content"}}
<main>
    {{if .Session.Error.Valid}}
    <p id="error">{{html .Session.Error.String}}</p>
    {{end}}

    <form action="/admin/register" method="POST" id="register">
        <h1>Create Account</h1>

        <div>
            <label for="username">Username</label>
            <input type="text" name="username" value="" autocomplete="username" required autofocus>

            <label for="email">Email</label>
            <input type="text" name="email" value="" autocomplete="email" required>

            <label for="password">Password</label>
            <input type="password" name="password" value="" autocomplete="new-password" required>

            <label for="invite">Invite Code</label>
            <input type="text" name="invite" value="" autocomplete="off" required>
        </div>

        <button type="submit" class="new">Create Account</button>
    </form>
</main>
{{end}}