{% extends "two_factor/_base.html" %}
{% load i18n %}

{% block extra_media %}
  {{ form.media }}
{% endblock %}

{% block content %}
<form action="" method="post">
    {% csrf_token %}
    <div class="card">
        <div class="card-body">
            <h1>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h1>
            <hr />

            <div class="row">
                <div class="col-md-4">
                    <strong>Two Factor</strong>
                    {% if wizard.steps.current == 'welcome' %}
                        <p class="text-instructions">
                            {% 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 class="text-instructions">
                            {% blocktrans trimmed %}
                                Please select which authentication method you would like to use.
                            {% endblocktrans %}
                        </p>
                    {% elif wizard.steps.current == 'generator' %}
                        <p class="text-instructions">
                            {% 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 class="text-instructions">
                            {% blocktrans trimmed %}
                                Alternatively you can use the TOTP Secret to setup TOTP in your authenticator or
                                password manager manually.
                            {% endblocktrans %}
                        </p>
                        <p class="text-instructions">
                            {% blocktrans trimmed %}
                                Alternatively you can use the following secret to setup TOTP in your authenticator or
                                password manager manually.
                            {% endblocktrans %}
                        </p>
                        <p class="text-instructions">
                            {% blocktrans %}
                                Your authenticator should supply a token. Please enter the token generated by the app.
                            {% endblocktrans %}
                        </p>
                    {% elif wizard.steps.current == 'validation' %}
                        {% if challenge_succeeded %}
                            <p class="text-instructions">
                                {% blocktrans trimmed %}
                                    Please enter the token sent to your email. If you accidentally close this page, you
                                    will require that token to log in. If you have not received that token, please
                                    contact your System Administrator team.
                                {% endblocktrans %}
                            </p>
                        {% endif %}
                    {% elif wizard.steps.current == 'yubikey' %}
                        <p class="text-instructions">
                            {% 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 %}
                </div>
                <div class="col-md-8">
                    {# TOKEN GENERATOR PAGE #}
                    {% if wizard.steps.current == 'generator' %}
                        <p><img src="{{ QR_URL }}" alt="QR Code" class="bg-white"/></p>
                        <p>{% translate "TOTP Secret:" %} <a href="{{ otpauth_url }}">{{ secret_key }}</a></p>
                    {% endif %}

                    {% if wiard.steps.current == 'validation' %}
                        {% if not challenge_succeeded %}
                            <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 %}
                    {% endif %}

                    {% include "two_factor/_wizard_forms.html" %}

                    {# hidden submit button to enable [enter] key #}
                    <input type="submit" value="" hidden />

                </div>

                <div class="row submit-row">
                    <div class="col-md-12">
                        {% if cancel_url %}
                            <a href="{{ cancel_url }}"
                                class="btn btn-link"
                            >
                                {% trans "Cancel" %}
                            </a>
                        {% endif %}
                        {% if wizard.steps.prev %}
                            <button name="wizard_goto_step"
                                    type="submit"
                                    value="{{ wizard.steps.prev }}"
                                    class="btn btn-secondary"
                            >
                                {% trans "Back" %}
                            </button>
                        {% else %}
                            <button disabled name=""
                                    type="button"
                                    class="btn"
                            >
                                {% trans "Back" %}
                            </button>
                        {% endif %}

                        <button type="submit"
                                class="btn btn-primary float-end"
                        >
                            {% trans "Next" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}