{# Overriden the original "two_factor" template to remove extending base template and slightly adjust style #}

{% load i18n %}
{% load static %}
{% load two_factor_tags %}

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

{% block content %}

<section class="row mx-0">
    <span class="login-shape-left">
        <img src="{% static 'portal/img/oval_blue.svg' %}" alt="Blue oval">
    </span>
    <span class="login-shape-right">
        <img src="{% static 'portal/img/polygon_yellow.svg' %}" alt="Yellow polygon">
    </span>
    <div class="form--login is-flex form--register--teacher">
        <div class="form col-xs-12 col-sm-8 col-md-8 col-lg-9 center-block">
            <h4>{% block title %}{% trans "Welcome" %}{% endblock %}</h4>

            {% if wizard.steps.current == 'auth' %}
            <p>{% blocktrans %}Enter your credentials.{% endblocktrans %}</p>
            {% elif wizard.steps.current == 'token' %}
            <p>{{ device|as_verbose_action }}</p>
            {% elif wizard.steps.current == 'backup' %}
            <p>{% blocktrans trimmed %}Use this form for entering backup tokens for logging in.
                These tokens have been generated for you to print and keep safe. Please
                enter one of these backup tokens to log into your account.{% endblocktrans %}</p>
            {% endif %}

            <form action="" method="post">
                {% block main_form_content %}
                {% csrf_token %}
                {% include "two_factor/_wizard_forms.html" %}

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

                {% if other_devices %}
                <p>{% trans "Or, alternatively, use one of your other authentication methods:" %}</p>
                <p>
                    {% for other in other_devices %}
                    <button name="challenge_device" value="{{ other.persistent_id }}"
                            class="btn btn-secondary btn-block" type="submit">
                        {{ other|as_action }}
                    </button>
                    {% endfor %}</p>
                {% endif %}

                {% include "two_factor/_wizard_actions.html" %}
                {% endblock %}
            </form>

            {% block 'backup_tokens' %}
            {% if backup_tokens %}
            <hr>
            <div class="backup_tokens_form">
                <form action="" method="post">
                    {% csrf_token %}
                    <p>{% trans "As a last resort, you can use a backup token:" %}</p>
                    <p>
                        <button name="wizard_goto_step" type="submit" value="backup"
                                class="button button--primary">{% trans "Use Backup Token" %}</button>
                    </p>
                </form>
            </div>
            {% endif %}
            {% endblock %}
        </div>
    </div>
</section>
{% endblock %}
