{% extends "base.html" %}
{% block title %}{{ tr.signup_title }} · Ex Ego{% endblock %}
{% block lang %}{{ lang_code }}{% endblock %}
{% block body %}
<main class="login signup">
  {# Même logo « cadran ex aequo » que la connexion, en plus petit : la page
     est plus longue (trois champs + aides). #}
  <svg class="login-logo" width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">
    <circle cx="48" cy="48" r="44" fill="#ebddc5"/>
    <circle cx="48" cy="48" r="40" fill="none" stroke="#201e1d" stroke-width="2.4" opacity=".38"/>
    <circle cx="48" cy="14" r="3.3" fill="#201e1d" opacity=".7"/>
    <circle cx="48" cy="82" r="3.3" fill="#201e1d" opacity=".5"/>
    <circle cx="14" cy="48" r="3.3" fill="#201e1d" opacity=".5"/>
    <circle cx="82" cy="48" r="3.3" fill="#201e1d" opacity=".5"/>
    <rect x="27" y="35.5" width="42" height="10.5" rx="5.25" fill="#c67139"/>
    <path d="M53.5 35.5 h10.25 a5.25 5.25 0 0 1 0 10.5 h-10.25 z" fill="#7a8a5e"/>
    <rect x="27" y="50" width="42" height="10.5" rx="5.25" fill="#7a8a5e"/>
    <path d="M43.5 50 h20.25 a5.25 5.25 0 0 1 0 10.5 h-20.25 z" fill="#c67139"/>
  </svg>
  <h1>{{ tr.signup_title }}</h1>
  {% if let Some(inv) = invite %}
  <p class="tagline">{{ joining }}</p>
  {% else %}
  <p class="tagline">{{ tr.signup_intro }}</p>
  {% endif %}
  <form method="post" action="/inscription">
    {% if let Some(inv) = invite %}
    {# Seul porteur de l'équipe d'accueil : un biscuit team(<id>) de 10 min.
       Rien en clair à réécrire. #}
    <input type="hidden" name="invitation" value="{{ inv.token }}">
    {% endif %}
    <div class="field field-lg" style="margin-bottom:var(--space-3)">
      <label for="username">{{ tr.username_label }}</label>
      <input class="input" id="username" name="username" value="{{ username }}"
             autocomplete="username" autocapitalize="none" autocorrect="off"
             required autofocus maxlength="32">
    </div>
    <div class="field field-lg" style="margin-bottom:var(--space-3)">
      <label for="password">{{ tr.password_label }}</label>
      <input class="input" id="password" name="password" type="password"
             autocomplete="new-password" required minlength="8">
    </div>
    {% if invite.is_none() %}
    <div class="field field-lg" style="margin-bottom:var(--space-2)">
      <label for="cle">{{ tr.signup_key_label }}</label>
      <input class="input" id="cle" name="cle" type="password" autocomplete="off"
             autocapitalize="none" autocorrect="off" required
             aria-describedby="cle-aide">
    </div>
    <p class="field-hint" id="cle-aide">{{ tr.signup_key_hint }}</p>
    {% endif %}
    {% if let Some(e) = error %}<p class="form-error">{{ e }}</p>{% endif %}
    <button type="submit" class="btn btn-primary btn-block btn-xl">{{ tr.signup_submit }}</button>
  </form>
  {% if invite.is_none() %}
  <p class="field-hint" style="margin-top:var(--space-4)">{{ tr.signup_team_hint }}</p>
  {% endif %}
  <a class="btn btn-ghost" style="margin-top:var(--space-2)" href="/login">{{ tr.signup_have_account }}</a>
</main>
{% endblock %}