{% extends "base.html" %}

{% block title %}Register{% endblock %}

{% block content %}

{# The mark (docs/backgrounds.md §2): brand only, no data. #}

<script type="application/json" id="backdrop-data">{"scene":"mark"}</script>

{% include "backdrop.html" %}

<div class="head"><h1>Register <small>{% if first %}the first account becomes the administrator{% else %}registration is {{ mode }}{% endif %}</small></h1></div>

{% if let Some(e) = error %}<p class="error">{{ e }}</p>{% endif %}

{% if !first && mode == "closed" %}

<p class="empty">Registration is closed. Ask an administrator for an account.</p>

{% else %}

<div class="signin-layout">

<form class="card" method="post" action="/register">

  <label for="username">Username</label><input type="text" id="username" name="username" autocomplete="username" required pattern="[A-Za-z0-9][A-Za-z0-9._-]{0,63}">

  <label for="email">Email</label><input type="email" id="email" name="email" autocomplete="email">

  <label for="password">Password (at least 10 characters)</label><input type="password" id="password" name="password" autocomplete="new-password" required minlength="10">

  {% if first %}<label for="setup">Setup code <small>logged by the server when it started, and in <code>setup-code</code> in its data directory</small></label><input type="text" id="setup" name="setup" autocomplete="off" required>{% endif %}

  {% if !first && mode == "invite" %}<label for="invite">Invitation code</label><input type="text" id="invite" name="invite" value="{{ invite }}" required>{% endif %}

  <button type="submit">CREATE ACCOUNT</button>

</form>

{% if !providers.is_empty() %}<div class="signin-or" aria-hidden="true"><span>or</span></div>

{% let verb = "Sign up" %}{% let suffix = provider_query.as_str() %}{% include "signin_buttons.html" %}{% endif %}

</div>

{% endif %}

{% endblock %}