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

{% block title %}Enable 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">Set-up Two Factor Authentication</li>
    </ol>
{% endblock %}

{% block content %}
    <h1>
        {% trans "Setup Two-Factor Authentication" %}
    </h1>

    <h4>
        {% trans 'Step 1' %}:
    </h4>

    <p>
        {% trans "Scan the QR code below with a token generator of your choice (e.g., Google Authenticator, Microsoft Authenticator)." %}
    </p>

    <img src="{{ qr_code_url }}"/>
    <p>
        {% trans "If you can't use the QR code, enter " %}
        <a href="#secret-modal" data-toggle="modal" data-target="#secret-modal">{% trans "this code instead." %}</a>
    </p>
    <h4>
        {% trans 'Step 2' %}:
    </h4>

    <p>
        {% trans 'Input the token generated by the app:' %}
    </p>

    <form method="post">
        {% csrf_token %}
        {{ form.non_field_errors }}
        {{ form.otp_token.label }}: {{ form.otp_token }}

        <button class="btn btn-primary btn-sm" type="submit">
            {% trans 'Verify' %}
        </button>
    </form>

    {#  modal  #}
    <div id="secret-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Your two-factor secret</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ secret }}</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}