{% extends "wagtailadmin/admin_base.html" %}
{% load i18n wagtailadmin_tags %}
{% block titletag %}{% trans "Sign in" %}{% endblock %}
{% block bodyclass %}login{% endblock %}

{% block furniture %}
    <main class="content-wrapper" id="main">
        <h1>{% block branding_login %}{% trans "Enter your two-factor authentication code" %}{% endblock %}</h1>

        <div class="messages" role="status">
            {# Always show messages div so it can be appended to by JS #}
            {% if messages or form.errors %}
                <ul>
                    {% if form.errors %}
                        <li class="error">{% blocktrans %}Invalid code{% endblocktrans %}</li>
                    {% endif %}
                    {% for message in messages %}
                        <li class="{{ message.tags }}">{{ message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>

        {% block above_login %}{% endblock %}

        <form action="{% url 'wagtail_2fa_auth' %}" method="post" autocomplete="off" novalidate>
            {% block login_form %}
                {% csrf_token %}

                {% url 'wagtailadmin_home' as home_url %}
                <input type="hidden" name="next" value="{{ next|default:home_url }}" />

                {% block fields %}
                    {% field field=form.otp_token %}{% endfield %}

                    {% block extra_fields %}
                        {% for field_name, field in form.extra_fields %}
                            {% field field=field %}{% endfield %}
                        {% endfor %}
                    {% endblock extra_fields %}

                {% endblock %}
            {% endblock %}
            <footer class="form-actions">
                {% block submit_buttons %}
                    <button type="submit" class="button button-longrunning" tabindex="3" data-controller="w-progress" data-action="w-progress#activate" data-w-progress-active-value="{% trans 'Signing in…' %}">{% icon name="spinner" %}<em>{% trans 'Sign in' %}</em></button>
                    <span style="margin-top:1rem;display:block;">
                        <a href="{% url 'wagtailadmin_logout' %}" class="button button-secondary" tabindex="4">{% trans 'Sign out' %}</a>                    
                    </span>
                {% endblock %}
            </footer>
        </form>

        {% block below_login %}{% endblock %}

        {% block branding_logo %}
            <div class="login-logo">
                <img class="login-logo-img" alt="" src="{% versioned_static 'wagtailadmin/images/icons/wagtail.svg' %}" />
            </div>
        {% endblock %}
    </main>
{% endblock %}
