{# Overriding the original "two_factor" template #}
{% extends "two_factor/_base_focus.html" %}
{% load i18n %}
{% block content %}
    <h4 class="text-center">{% block title %}{% trans "Backup tokens" %}{% endblock %}</h4>
    <a id="return_to_classes_button" href="{% url 'dashboard' %}#account" class="button--menu button--menu--enabled">< Back to Your account</a>
    <p>{% blocktrans trimmed %}Backup tokens can be used when your primary and backup
        phone numbers aren't available. The backup tokens below can be used
        for login verification. If you've used up all your backup tokens, you
        can generate a new set of backup tokens. Only the backup tokens shown
        below will be valid.{% endblocktrans %}</p>

    {% if device.token_set.count %}
        <ul>
            {% for token in device.token_set.all %}
                <li>{{ token.token }}</li>
            {% endfor %}
        </ul>
        <p class="warningText">{% blocktrans %}When you generate new recovery codes, you must download or print the new codes.
            Your old codes won't work anymore.{% endblocktrans %}</p>
    {% else %}
        <p>{% trans "You don't have any backup codes yet." %}</p>
    {% endif %}

    <form method="post">{% csrf_token %}{{ form }}
        <div class="button-group">
            <button class="button--primary" type="submit">{% trans "Generate tokens" %}</button>
        </div>
    </form>
{% endblock %}
