{% extends "mfa/totp/base.html" %}
{% load allauth i18n %}

{% comment %}
    The code field is boxed and label-less (the `fields` element does that for any `code`
    field), and the secret sits in a mono field with room around it — it is copied by hand,
    character by character.
{% endcomment %}

{% block head_title %}
    {% translate "Activate Authenticator App" %}
{% endblock head_title %}

{% block content %}
    {% element h1 %}
        {% translate "Activate Authenticator App" %}
    {% endelement %}
    {% element p %}
        {% blocktranslate %}To protect your account with two-factor authentication, scan the QR code below with your authenticator app. Then, input the verification code generated by the app below.{% endblocktranslate %}
    {% endelement %}

    {% url 'mfa_activate_totp' as action_url %}
    {% element form form=form method="post" action=action_url %}
        {% slot body %}
            {% element img src=totp_svg_data_uri alt=form.secret tags="mfa,totp,qr" %}
            {% endelement %}
            {% csrf_token %}
            {% element field id="authenticator_secret" type="text" value=form.secret disabled=True %}
                {% slot label %}
                    {% translate "Authenticator secret" %}
                {% endslot %}
                {% slot help_text %}
                    {% translate "You can store this secret and use it to reinstall your authenticator app at a later time." %}
                {% endslot %}
            {% endelement %}
            {% element fields form=form %}
            {% endelement %}
        {% endslot %}
        {% slot actions %}
            {% element button type="submit" icon="check" %}
                {% trans "Activate" %}
            {% endelement %}
        {% endslot %}
    {% endelement %}
{% endblock content %}