{{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}}