{{define "head"}}
<title>Register - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">

<style>
p a {
    color: #2a67c8;
}

a.discord {
    color: #5865F2;
}

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

form div {
    width: 20rem;
}

form button {
    margin-top: 1rem;
}

label {
    width: 100%;
    margin: 1rem 0 .5rem 0;
    display: block;
    color: #10101080;
}
input {
    width: 100%;
    margin: .5rem 0;
    padding: .3rem .5rem;
    display: block;
    border-radius: 4px;
    border: 1px solid #808080;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

button {
    padding: .5em .8em;
    font-family: inherit;
    font-size: inherit;
    border-radius: .5em;
    border: 1px solid #a0a0a0;
    background: #f0f0f0;
    color: inherit;
}
button.new {
    background: #c4ff6a;
    border-color: #84b141;
}
button:hover {
    background: #fff;
    border-color: #d0d0d0;
}
button:active {
    background: #d0d0d0;
    border-color: #808080;
}
</style>
{{end}}

{{define "content"}}
<main>
    {{if .Success}}

    <meta http-equiv="refresh" content="5;url=/admin/" />
    <p>
    {{.Message}}
    You should be redirected to <a href="/admin">/admin</a> in 5 seconds.
    </p>

    {{else}}

    {{if .Message}}
    <p id="error">{{.Message}}</p>
    {{end}}

    <form action="/admin/create-account" method="POST" id="create-account">
        <div>
            <label for="username">Username</label>
            <input type="text" name="username" value="">

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

            <label for="password">Password</label>
            <input type="password" name="password" value="">

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

        <button type="submit" class="new">Create Account</button>
    </form>

    {{end}}
</main>
{{end}}