{% extends "base.html" %}
{% load i18n %}

{% block title %}Two-Factor Authentication{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item text-light">Users</li>
        <li class="breadcrumb-item"><a
                href="{% url 'profile-detail' username=request.user.username %}">{{ request.user.username }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Two Factor Authentication Settings</li>
    </ol>
{% endblock %}

{% block content %}
    <h1 class="mb-3">
        {% trans "Two-Factor Authentication" %}
    </h1>
    <p>
        <i class="fas fa-check-circle text-success mr-1"></i>{% trans 'Two-Factor Authentication is enabled for your account.' %}
    </p>

    <h3 class="mt-4">
        {% trans "Back-Up Tokens" %}
    </h3>
    <p>{% trans "If you have lost access to your authentication device, you can use back-up tokens for authentication instead. Back-up tokens can be used in the same way as the tokens generated by your authentication device. <b>Make sure to keep your back-up tokens secret and store them in a secure place</b>. Should you run out of tokens, you can generate new ones on this page." %}</p>

    {% if backup_tokens %}
        {% if reveal_tokens %}
            <p>{% trans "We have generated the following back-up tokens. These will only be displayed once. <b>Please keep them secret and store them securely</b>." %}</p>
            <ul>
                {% for token in backup_tokens %}
                    <li>{{ token.token }}</li>
                {% endfor %}
            </ul>
        {% else %}
            <p> {% trans 'Backup tokens have been generated, but are not revealed here for security reasons. Press the button below to generate new ones.' %} </p>
        {% endif %}
    {% else %}
        <p> {% trans 'No tokens. Press the button below to generate some.' %}</p>
    {% endif %}

    <form method="post">
        {% csrf_token %}
        <button class="btn btn-primary" type="submit">
            {% trans 'Generate backup tokens' %}
        </button>
    </form>

    <h3 class="mt-4">
        {% trans "Disable Two-Factor Authentication" %}
    </h3>
    <p>{% trans 'You can disable two-factor authentication for your account at any time.' %}</p>
    <a class="btn btn-primary" href="{% url 'two-factor-remove' %}">Disable Two Factor Authentication</a>

{% endblock %}