{{define "content"}}
{{if eq .Invite.Role 1}}
<h1>Join the admins.</h1>
{{else}}
<h1>Join the crew.</h1>
{{end}}
<form method="post" class="register-form">
    {{ .csrfField }}
    <label for="name">Username.</label>
    <input type="text" name="name" id="name" autocomplete="off" minlength="1" maxlength="40" required>
    <label for="handle">Handle.</label>
    <div class="handle-container">
        <span>~</span>
        <input type="text" name="handle" id="handle" autocomplete="off" minlength="2" maxlength="30" required>
    </div>
    <details>
        <summary>View handle regex/rules.</summary>
        <code class="regex">{{.HandleRegex}}</code>
    </details>
    <label for="email">Email.</label>
    <input type="email" name="email" id="email" autocomplete="email" required>
    <label for="password">Password.</label>
    <input type="password" name="password" id="password" autocomplete="off" minlength="8" required>
    {{if .Invite}}
        <label for="invite-token">You have been invited to {{if eq .Invite.Role 1}}administer{{else}}join{{end}} this instance.</label>
        <input type="hidden" name="invite-token" id="invite-token" autocomplete="off" required value="{{.Invite.Token}}">
    {{end}}
    <button type="submit">Submit.</button>
</form>
<style>
    input:not(.handle-container input),
    button[type="submit"] {
        width: 100%;
    }

    .register-form {
        margin-inline: auto;
    }

    .handle-container {
        display: flex;
        padding: 0;
        width: 100%;

        input {
            flex: 1;
        }

        span {
            padding: var(--gap);
            margin: 0;
            border: 1px solid var(--link-col);
            border-right: 0;
        }
    }
</style>
<script>
    document.querySelector('input[name="handle"]').addEventListener("input", function (e) {
        e.target.value = e.target.value.toLowerCase().replace(" ", "-");
    });
</script>
<p>Trying to <a href="/auth/login">login</a> instead?</p>
{{end}}