{#
  Signup page (spec section 10.2).

  Context:
    signup_url            str            -- POST target (default "signup")
    login_url             str            -- link back to the login page
    next                  str            -- validated safe redirect path
    error                 str            -- form-level error message
    email                 str            -- value to redisplay
    display_name          str            -- value to redisplay
    password_rules        Sequence[str]  -- help text lines; optional
    password_min_length   int            -- fallback rule text
    password_max_length   int            -- fallback rule text
#}
{% extends "base.html" %}

{% block heading %}Create your account{% endblock %}

{% block content %}
  <form class="fa-form" method="post" action="{{ signup_url or 'signup' }}" novalidate>
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="next" value="{{ next or '' }}">

    {% if error %}
      <p class="fa-alert" id="signup-error" role="alert">{{ error }}</p>
    {% endif %}

    <div class="fa-field">
      <label class="fa-label" for="signup-display-name">
        Display name <span class="fa-optional">(optional)</span>
      </label>
      <input
        class="fa-input"
        id="signup-display-name"
        name="display_name"
        type="text"
        value="{{ display_name or '' }}"
        autocomplete="name"
        {% if error %}aria-describedby="signup-error"{% endif %}
      >
    </div>

    <div class="fa-field">
      <label class="fa-label" for="signup-email">Email</label>
      <input
        class="fa-input"
        id="signup-email"
        name="email"
        type="email"
        value="{{ email or '' }}"
        autocomplete="email"
        autocapitalize="none"
        spellcheck="false"
        required
        {% if error %}aria-describedby="signup-error"{% endif %}
      >
    </div>

    <div class="fa-field">
      <label class="fa-label" for="signup-password">Password</label>
      <input
        class="fa-input"
        id="signup-password"
        name="password"
        type="password"
        autocomplete="new-password"
        required
        aria-describedby="password-rules{% if error %} signup-error{% endif %}"
      >
      <ul class="fa-hint" id="password-rules">
        {% if password_rules %}
          {% for rule in password_rules %}
            <li>{{ rule }}</li>
          {% endfor %}
        {% else %}
          <li>
            At least {{ password_min_length or 10 }} characters
            {% if password_max_length %}and at most {{ password_max_length }}{% endif %}.
          </li>
          <li>Anything you can remember; there are no character-mix rules.</li>
        {% endif %}
      </ul>
    </div>

    <div class="fa-field">
      <label class="fa-label" for="signup-confirm-password">Confirm password</label>
      <input
        class="fa-input"
        id="signup-confirm-password"
        name="confirm_password"
        type="password"
        autocomplete="new-password"
        required
        {% if error %}aria-describedby="signup-error"{% endif %}
      >
    </div>

    <button class="fa-button" type="submit">Create account</button>
  </form>
{% endblock %}

{% block below_card %}
  <p class="fa-footnote">
    Already have an account?
    <a class="fa-link" href="{{ login_url or 'login' }}">Sign in</a>
  </p>
{% endblock %}