{% extends "_auth_layout.html" %}
{% block lang %}en-US{% endblock %}
{% block title %}Create account{% endblock %}
{% block content %}
  <h1>Create account</h1>
  {% if error %}<p class="auth-alert" role="alert" id="form-error">{{ error }}</p>{% endif %}
  <form method="post" action="{{ prefix }}/signup{{ lang_query }}" class="auth-form" novalidate>
    <input type="hidden" name="{{ csrf_field }}" value="{{ csrf_token }}">
    {% set first_error = (fields | selectattr("name", "in", errors) | first) %}
    {% for field in fields %}
    {% set field_error = errors.get(field.name) %}
    <div class="auth-field{% if field.type == "checkbox" %} auth-checkbox{% endif %}">
      <label for="{{ field.name }}">{{ field.label }}</label>
      <input id="{{ field.name }}" name="{{ field.name }}" type="{{ field.type }}"{% if field.type == "checkbox" %} value="true"{% if values.get(field.name) %} checked{% endif %}{% elif field.type != "password" %} value="{{ values.get(field.name, "") }}"{% endif %} autocomplete="{{ field.autocomplete }}"{% if field.required %} required{% endif %}{% if field.type == "password" %} minlength="{{ min_length }}"{% endif %}{% if field_error %} aria-invalid="true" aria-describedby="{{ field.name }}-error"{% endif %}{% if (first_error and first_error.name == field.name) or (not first_error and loop.first) %} autofocus{% endif %}>
      {% if field.type == "password" %}<span class="auth-field-hint">At least {{ min_length }} characters.</span>{% endif %}
      {% if field_error %}<span class="auth-field-error" id="{{ field.name }}-error">{{ field_error }}</span>{% endif %}
    </div>
    {% endfor %}
    <button type="submit" class="auth-button">Create account</button>
  </form>
  <nav class="auth-links"><a href="{{ prefix }}/login{{ lang_query }}">Already have an account? Sign in</a></nav>
{% endblock %}