{# The multi-factor authentication code verification template.

Displays a form that asks for the multi-factor authentication code.

:param form: The code verification form.
:type form: :class:`~canaille.core.endpoints.forms.TwoFactorForm`
#}
{% extends g.auth.template or 'core/auth/base.html' %}
{% import 'core/partial/login_field.html' as login_field %}

{% block script %}
    <script src="{{ url_for("static", filename="js/verify-mfa.js") }}" defer></script>
{% endblock %}

{% block auth_subtitle %}
    <div class="sub header">{{ _("SMS verification code.") }}</div>
{% endblock %}

{% block auth_form_content %}
    <div class="ui icon message">
        <i class="mobile alternate icon"></i>
        <div class="content">
            <div class="header">
                {% trans %}Check your messages{% endtrans %}
            </div>
            {% trans %}
                If the login you filled exists, a SMS containing a verification code has been sent to your phone number.
                Please fill the code in the following form to continue.
            {% endtrans %}
        </div>
    </div>

    {{ login_field.render_field(form.otp, class="autofocus") }}
{% endblock %}

{% block auth_right_buttons %}
    <button class="ui {% if resend_delay %}disabled {% endif %} button"
            type="submit" name="action" value="resend" id="resend-button"
            data-delay="{{ resend_delay.total_seconds() }}" formnovalidate
    >
        <i id="resend-icon" class="{% if resend_delay %}hourglass half{% else %}send{% endif %} icon"></i>
        {% trans %}Send another code{% endtrans %}
    </button>
    <button type="submit" name="action" value="confirm" class="ui primary button">
        {{ _("Verify") }}
    </button>
{% endblock %}