{{define "head"}}
<title>Login - 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;
}
input[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
</style>
{{end}}

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

    <meta http-equiv="refresh" content="0;url=/admin/" />
    <p>
    Logged in successfully.
    You should be redirected to <a href="/admin">/admin</a> soon.
    </p>

    {{else}}

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

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

            <label for="totp">TOTP</label>
            <input type="text" name="totp" value="" autocomplete="one-time-code">
        </div>

        <button type="submit" class="save">Login</button>
    </form>

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