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

<!---->
{% block head_title %}{% trans "Activate Authenticator App" %}{% endblock %}

<!---->
{% block content %}
<div class="container-prose">
  <h1>{% trans "Activate Authenticator App" %}</h1>

  <p>
    {% blocktrans trimmed %}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.{% endblocktrans %}
  </p>

  <form action="{% url 'mfa_activate_totp' %}" method="post" class="grid gap-4">
    {% csrf_token %}

    <img src="{{ totp_svg_data_uri }}" alt="form.secret" class="w-full" />

    <fieldset class="fieldset border border-base-300 rounded-box p-4">
      <legend class="fieldset-legend">
        {% trans "Authenticator secret" %}
      </legend>

      <label class="label">
        <input
          id="authenticator_secret"
          type="text"
          value="{{ form.secret }}"
          disabled
          class="input input-sm input-primary lg:input-md"
        />

        <span>
          {% blocktrans trimmed %}You can store this secret and use it to
          reinstall your authenticator app at a later time. {% endblocktrans %}
        </span>
      </label>
    </fieldset>

    {% include 'allauth/components/form.html' %}

    <button type="submit" class="btn btn-sm btn-primary lg:btn-md 2xl:btn-lg">
      <i data-lucide="circle-check" class="size-4 lg:size-6"></i>
      {% trans "Activate" %}
    </button>
  </form>
</div>
{% endblock %}