{% extends "base.html" %}
{% from "_macros.html" import icon, mark, wordmark %}

{% block title %}{% if first_run %}Set up {{ brand.name }}{% else %}Create an account{% endif %}{% endblock %}

{% block body %}
<main class="auth">
  <div class="auth__card">
    <div class="auth__brand">
      {{ mark(cls="brand-mark", uid="auth") }}
      <h1 class="auth__title">{{ wordmark() }}</h1>
      {% if first_run %}
      <p class="auth__subtitle">{{ t("Nobody has claimed this instance yet. The first account becomes its administrator.") }}</p>
      {% else %}
      <p class="auth__subtitle">{{ t("Create your account.") }}</p>
      {% endif %}
    </div>

    {% if error %}
    <div class="alert alert--error" role="alert">
      {{ icon("warning", "alert__icon") }}
      <span>{{ error }}</span>
    </div>
    {% endif %}

    <form method="post" action="/auth/register" class="stack">
      <div class="field">
        <label class="field__label" for="name">{{ t("Name") }}</label>
        <input class="input" type="text" id="name" name="name" required autofocus
               autocomplete="name" value="{{ name|default('') }}">
      </div>

      <div class="field">
        <label class="field__label" for="email">{{ t("Email") }}</label>
        <input class="input" type="email" id="email" name="email" required
               autocomplete="username" value="{{ email|default('') }}">
      </div>

      <div class="field">
        <label class="field__label" for="password">{{ t("Password") }}</label>
        <input class="input" type="password" id="password" name="password" required
               autocomplete="new-password" minlength="8">
        <p class="field__hint">{{ t("At least 8 characters.") }}</p>
      </div>

      <button class="btn btn--primary btn--block" type="submit">
        {% if first_run %}Create administrator account{% else %}Create account{% endif %}
      </button>
    </form>

    {% if not first_run %}
    <p class="auth__footer">
      Already have an account? <a href="/auth/login">Sign in</a>.
    </p>
    {% endif %}
  </div>
</main>
{% endblock %}