{{define "content"}}
<h1>Join the crew</h1>
<form method="post">
    {{ .csrfField }}
    <label for="name">Username.</label>
    <input type="text" name="name" id="name" autocomplete="off" required>
    <label for="handle">Handle.</label>
    <div class="handle-container">
        <span>~</span>
        <input type="text" name="handle" id="handle" autocomplete="off" required pattern="{{.HandleRegex}}" >
    </div>
    <details>
        <summary>View handle regex/rules.</summary>
        <code>{{.HandleRegex}}</code><br>
        <span><em>TL;DR:</em> Doesn't start with a dash, has alphanumeric characters, doesn't contain two consecutive
            dashes, and is between 3 and 30 characters.</span>
    </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>
    <button type="submit">Submit.</button>
</form>
<style>
    input:not(.handle-container input),
    button[type="submit"] {
        width: 100%;
    }

    .handle-container {
        display: flex;
        border: 1px solid var(--link-col);
        padding: 0;
        width: 100%;

        input {
            flex: 1;
            min-width: 0;
            border: none;
            margin: 0;
        }

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