{% extends "office/base.html" %}
{% load bootstrap4 %}
{% load i18n %}

{% block title %}{% trans "Multi-factor authentication" %}{% endblock %}

{% block headline %}
    {% trans "Multi-factor authentication" %}
{% endblock %}

{% block content %}
    <div class="login-form">
        <form action="" method="post" autocomplete="off" class="col-md-4">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ next }}">
            <p>
                {% if use_recovery %}
                    {% trans "Enter one of your recovery codes. Each code can only be used once." %}
                {% else %}
                    {% trans "Enter the code from your authenticator app." %}
                {% endif %}
            </p>
            {% bootstrap_form form %}
            <button class="btn btn-lg btn-success form-control" type="submit">{% trans "Continue" %}</button>
            <div class="mt-3 text-center">
                {% if use_recovery %}
                    <a href="{% url 'mfa:challenge' %}?next={{ next|urlencode }}">{% trans "Use your authenticator app instead" %}</a>
                {% elif recovery_codes_available %}
                    <a href="{% url 'mfa:challenge.recovery' %}?next={{ next|urlencode }}">{% trans "Use a recovery code" %}</a>
                {% endif %}
            </div>
        </form>
    </div>
{% endblock %}