{% extends 'crochet/base.html' %}
{% load i18n %}

{% block title %}{% trans 'Activar verificación en dos pasos' %}{% endblock %}

{% block extra_css %}
  {% include 'crochet/_platform_assets.html' %}
{% endblock %}

{% block content %}
  <main class="flex justify-center px-4 py-12">
    <div class="card w-full max-w-md bg-base-100 shadow-xl border border-base-300">
      <div class="card-body">
        {% if backup_codes %}
          <h1 class="card-title">{% trans 'Guarda tus códigos de respaldo' %}</h1>
          <p class="text-sm text-base-content/70">
            {% trans 'Cada uno sirve para iniciar sesión una vez si pierdes acceso a tu app de autenticación. Guárdalos en un sitio seguro: no se van a volver a mostrar.' %}
          </p>
          <ul class="grid grid-cols-2 gap-2 font-mono text-sm bg-base-200 rounded-box p-4">
            {% for code in backup_codes %}
              <li>{{ code }}</li>
            {% endfor %}
          </ul>
          <a href="{% url 'crochet:account_settings' %}" class="btn btn-primary mt-4">{% trans 'Ya los he guardado' %}</a>
        {% else %}
          <h1 class="card-title">{% trans 'Activar verificación en dos pasos' %}</h1>
          <p class="text-sm text-base-content/70">
            {% trans 'Escanea este código con tu app de autenticación (Google Authenticator, Aegis, 1Password...) e introduce el código de 6 dígitos que te muestre para confirmar.' %}
          </p>
          <div class="flex justify-center py-2">
            <div class="w-48 h-48 bg-white rounded-box p-3 [&>svg]:w-full [&>svg]:h-full">{{ qr_svg|safe }}</div>
          </div>
          <form method="post" class="flex flex-col gap-3">
            {% csrf_token %}
            <label class="flex flex-col gap-1">
              <span class="text-sm">{{ setup_form.token.label }}</span>
              {{ setup_form.token }}
              {% for error in setup_form.token.errors %}
                <span class="text-error text-xs">{{ error }}</span>
              {% endfor %}
            </label>
            <button type="submit" class="btn btn-primary mt-2">{% trans 'Confirmar' %}</button>
          </form>
          <p class="text-sm text-center mt-2">
            <a href="{% url 'crochet:account_settings' %}" class="link link-primary">{% trans 'Cancelar' %}</a>
          </p>
        {% endif %}
      </div>
    </div>
  </main>
{% endblock %}