{% extends "admin/base_site.html" %}
{% load static i18n %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "admin/css/login.css" %}">
    <link rel="stylesheet" href="{% static "maykin_2fa/css/fixes.css" %}">
    {{ form.media }}
{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}
{% block nav-global %}{% endblock %}
{% block nav-sidebar %}{% endblock %}
{% block content_title %}{% endblock %}
{% block nav-breadcrumbs %}{% endblock %}

{# Django 4.2 #}
{% block branding %}
<h1 id="site-name"><a href="#">{{ title }}</a></h1>
{% endblock %}

{% block content %}
    {% 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="totp-qr-code"/></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" novalidate>
        {% csrf_token %}

        {% include "maykin_2fa/includes/wizard_form.html" %}

        {# hidden submit button to enable [enter] key, otherwise the 'back' button is used #}
        <input type="submit" value="" hidden />

        <div class="submit-row">
            {% include "maykin_2fa/includes/wizard_actions.html" %}
        </div>
    </form>
{% endblock %}
