{# 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, so a feature that refines it
               with its own (a profile's name, say) is asked for too. #}
            {% set placeholders = {
                'email': _('Your email address'),
                'password': _('Choose a password'),
            } %}
            {% set autocomplete = {'email': 'email', 'password': 'new-password'} %}
            {% for field in form if field.widget.input_type not in ('hidden', 'submit') %}
                <div class="form-field mb-3">
                    {{ field.label(class="form-label") }}
                    {{ field(class="form-control" ~ (" is-invalid" if field.errors else ""), placeholder=placeholders.get(field.name, ''), autocomplete=autocomplete.get(field.name, 'on')) }}
                    {% for error in field.errors %}
                        <p class="form-error text-danger small">{{ error }}</p>
                    {% endfor %}
                </div>
            {% endfor %}

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

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

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

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