{% extends "base.html" %}
{% load i18n %}
{% block extra_media %}{{ form.media }}{% endblock %}
{% block content %}
    <h1>
        {% block title %}
            {% trans "Enable Two-Factor Authentication" %}
        {% endblock %}
    </h1>
    {% if wizard.steps.current == 'welcome' %}
        <p>
            {% blocktrans trimmed %}
                You are about to take your account security to the
                next level. Follow the steps in this wizard to enable two-factor
                authentication.
            {% endblocktrans %}
        </p>
    {% elif wizard.steps.current == 'method' %}
        <p>
            {% blocktrans trimmed %}
                Please select which authentication method you would
                like to use.
            {% endblocktrans %}
        </p>
    {% elif wizard.steps.current == 'generator' %}
        <p>
            {% blocktrans trimmed %}
                To start using a token generator, please use your
                smartphone to scan the QR code below. For example, use Google
                Authenticator.
            {% endblocktrans %}
        </p>
        <p>
            <img src="{{ QR_URL }}" alt="QR Code" class="bg-white" />
        </p>
        <p>
            {% blocktrans trimmed %}
                Alternatively you can use the following secret to
                setup TOTP in your authenticator or password manager manually.
            {% endblocktrans %}
        </p>
        <p>
            {% translate "TOTP Secret:" %} <a href="{{ otpauth_url }}">{{ secret_key }}</a>
        </p>
        <p>{% blocktrans %}Then, enter the token generated by the app.{% endblocktrans %}</p>
    {% elif wizard.steps.current == 'sms' %}
        <p>
            {% blocktrans trimmed %}
                Please enter the phone number you wish to receive the
                text messages on. This number will be validated in the next step.
            {% endblocktrans %}
        </p>
    {% elif wizard.steps.current == 'call' %}
        <p>
            {% blocktrans trimmed %}
                Please enter the phone number you wish to be called on.
                This number will be validated in the next step.
            {% endblocktrans %}
        </p>
    {% elif wizard.steps.current == 'validation' %}
        {% if challenge_succeeded %}
            {% if device.method == 'call' %}
                <p>
                    {% blocktrans trimmed %}
                        We are calling your phone right now, please enter the
                        digits you hear.
                    {% endblocktrans %}
                </p>
            {% elif device.method == 'sms' %}
                <p>
                    {% blocktrans trimmed %}
                        We sent you a text message, please enter the tokens we
                        sent.
                    {% endblocktrans %}
                </p>
            {% endif %}
        {% else %}
            <p class="alert alert-warning" role="alert">
                {% blocktrans trimmed %}
                    We've
                    encountered an issue with the selected authentication method. Please
                    go back and verify that you entered your information correctly, try
                    again, or use a different authentication method instead. If the issue
                    persists, contact the site administrator.
                {% endblocktrans %}
            </p>
        {% endif %}
    {% elif wizard.steps.current == 'yubikey' %}
        <p>
            {% blocktrans trimmed %}
                To identify and verify your YubiKey, please insert a
                token in the field below. Your YubiKey will be linked to your
                account.
            {% endblocktrans %}
        </p>
    {% endif %}
    <form action="" method="post">
        {% csrf_token %}
        {% include "two_factor/_wizard_forms.html" %}
        {# hidden submit button to enable [enter] key #}
        <input type="submit" value="" hidden />
        {% include "two_factor/_wizard_actions.html" %}
    </form>
{% endblock %}