{# djlint:off H006 #}
{% extends "mfa/totp/activate_form.html" %}
{% load allauth %}
{% load allauth_ui %}
{% load i18n %}
{% block content %}
    {% translate "Activate Authenticator App" as heading %}
    {% blocktranslate asvar subheading %}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 %}
    {% #container heading=heading subheading=subheading %}
    {% translate "Activate" as button_text %}
    {% url 'mfa_activate_totp' as action_url %}
    {% #form form=form method="post" url=action_url button_text=button_text render_fields="false" %}
    {# <div class="p-1 bg-gray-300 rounded"> #}
    <img class="py-3 px-5 mx-auto my-5 bg-gray-300 rounded"
         src="{{ totp_svg_data_uri }}"
         alt="{{ form.secret }}" />
    {# </div> #}
    {% #form_field field=form.code %}
    {% /form_field %}
    <div class="my-3">
        <label class="label" for="authenticator_secret">
            <span class="label-text">{% translate "Authenticator secret" %}</span>
        </label>
        <p class="mb-2 text-xs">
            {% translate "You can store this secret and use it to reinstall your authenticator app at a later time." %}
        </p>
        <input type="text" id="authenticator_secret"" value="{{ form.secret }}" disabled
            class="w-full input input-bordered text-primary"/>
        </div>
        {% csrf_token %}
        {% /form %}
        {% /container %}
    {% endblock content %}
