{# Same shell and the same markup as auth's login form, so the two pages of
   the front door look like one site: AUTH_LOGIN_LAYOUT names the shell, and
   the classes are Bootstrap's names, which the admin shell styles natively
   and the public theme styles itself. Errors carry form-error (public theme)
   and text-danger (Bootstrap), so they read as errors in either. #}
{% extends config.AUTH_LOGIN_LAYOUT or "base_template.html" %}

{% block title %}{{ _('Sign up') }}{% if site is defined %} · {{ site.name }}{% endif %}{% endblock %}

{% block content %}
<div class="container section">
    <div class="form-page">

        <h1>{{ _('Sign up') }}</h1>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endwith %}

        <form action="" method="post" novalidate>
            {{ form.hidden_tag() }}

            {# Every visible field of the form, in order, so the fields other
               features register (a profile's name, say) are asked for too.
               A field this page has no placeholder for keeps its own
               render_kw. #}
            {% set placeholders = {
                'email': _('Your email address'),
                'password': _('Choose a password'),
                'confirm_password': _('Type the password again'),
            } %}
            {% set autocomplete = {
                'email': 'email',
                'password': 'new-password',
                'confirm_password': 'new-password',
            } %}
            {% for field in form if field.widget.input_type not in ('hidden', 'submit') %}
                {% set known = {} %}
                {% if field.short_name in placeholders %}
                    {% set known = {
                        'placeholder': placeholders[field.short_name],
                        'autocomplete': autocomplete[field.short_name],
                    } %}
                {% endif %}
                {% if field.widget.input_type == 'checkbox' %}
                    <div class="form-field form-check mb-3">
                        {{ field(class="form-check-input" ~ (" is-invalid" if field.errors else "")) }}
                        {{ field.label(class="form-check-label") }}
                {% else %}
                    <div class="form-field mb-3">
                        {{ field.label(class="form-label") }}
                        {{ field(class="form-control" ~ (" is-invalid" if field.errors else ""), **known) }}
                {% endif %}
                    {% if field.description %}
                        <p class="form-text text-muted small">{{ field.description }}</p>
                    {% endif %}
                    {% for error in field.errors %}
                        <p class="form-error text-danger small">{{ error }}</p>
                    {% endfor %}
                </div>
            {% endfor %}

            {# What another feature adds right above the button, such as a
               captcha widget. Its check listens to signup-submitting. #}
            {{ render_template_hooks("signup.form_fields") }}

            {{ form.submit(class="btn btn-primary mb-3") }}

            <p>
                {{ _('Already have an account?') }} <a href="{{ url_for('auth.login', next=form.next.data or None) }}">{{ _('Log in') }}</a>
            </p>

            {% for hook in get_template_hooks("signup.form_footer") %}
                {{ hook() | safe }}
            {% endfor %}
        </form>

        {# External sign-in buttons (an identity provider, say). Drawn only
           when one of them renders something, so a product without any
           shows no empty block and no stray words. #}
        {% set providers = render_template_hooks("signup.providers") %}
        {% if providers %}
            <div class="signup-providers d-flex flex-wrap align-items-center gap-2 mb-3">
                <span class="text-muted small">{{ _('or continue with') }}</span>
                {{ providers }}
            </div>
        {% endif %}

    </div>
</div>
{% endblock %}