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

{% block title %}
  {% trans "Activate Authenticator App" %}
{% endblock title %}

{% block breadcrumbs %}
  {{ block.super }}
  <c-breadcrumbs.item href="{% url 'mfa_index' %}"
                      text="{% trans 'Two-Factor Authentication' %}" />
  <c-breadcrumbs.item text="{% trans 'Activate' %}" />
{% endblock breadcrumbs %}

{% block page.content %}
  <c-form.card method="post"
               action="{% url 'mfa_activate_totp' %}"
               title="{% trans 'Activate Authenticator App' %}">
    {% csrf_token %}
    <c-slot name="actions">
      <c-button type="submit"
                variant="primary"
                text="{% trans 'Activate' %}" />
    </c-slot>
    <div class="text-center mb-3">
      <img src="{{ totp_svg_data_uri }}"
           alt="{% trans 'TOTP QR Code' %}"
           class="img-fluid"
           style="max-width: 220px" />
    </div>
    <p>
      {% blocktrans with secret=form.secret.value %}Or enter this secret manually: <code>{{ secret }}</code>{% endblocktrans %}
    </p>
    <c-form.field type="text"
                  id="{{ form.code.auto_id }}"
                  name="{{ form.code.html_name }}"
                  label="{{ form.code.label }}"
                  autocomplete="one-time-code"
                  placeholder="{% trans 'Code' %}"
                  value="{{ form.code.value|default_if_none:'' }}"
                  class="{% if form.code.errors %}is-invalid{% endif %}" />
    {% for error in form.code.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
  </c-form.card>
{% endblock page.content %}