{% load i18n %}
<!-- id fijo (en vez de hx-target="this" sobre el propio <form>, como en el
     resto de fragmentos de ajustes de cuenta): aquí hay más de un <form>
     dentro del mismo fragmento (desactivar 2FA, olvidar cada dispositivo),
     así que todos apuntan a este mismo id y se intercambia el fragmento
     entero pase lo que pase, sin duplicar el badge de arriba con solo el
     <form> que disparó la petición. -->
<div id="account-2fa-status">
  {% if two_factor_enabled %}
    <div class="flex items-center justify-between gap-4">
      <span class="badge badge-success badge-soft">{% trans 'Activada' %}</span>
      <button
        type="button"
        class="btn btn-error btn-sm"
        onclick="document.getElementById('two-factor-disable-modal').showModal()"
      >
        {% trans 'Desactivar' %}
      </button>
    </div>

    {% if remembered_devices %}
      <div class="mt-3">
        <p class="text-sm font-medium mb-1">{% trans 'Dispositivos recordados' %}</p>
        <ul class="flex flex-col gap-1 text-sm text-base-content/70">
          {% for device in remembered_devices %}
            <li class="flex items-center justify-between gap-2">
              <span>{{ device.device_name }}</span>
              <span class="flex items-center gap-2">
                <span class="text-xs">{% blocktranslate with date=device.created_at|date:'d/m/Y' %}desde el {{ date }}{% endblocktranslate %}</span>
                <button
                  type="button"
                  class="btn btn-ghost btn-xs"
                  aria-label="{% trans 'Olvidar este dispositivo' %}"
                  onclick="document.getElementById('forget-device-modal-{{ device.pk }}').showModal()"
                >
                  🗑️
                </button>
              </span>
            </li>
            <dialog id="forget-device-modal-{{ device.pk }}" class="modal">
              <div class="modal-box">
                <h3 class="font-bold text-lg">{% trans '¿Olvidar este dispositivo?' %}</h3>
                <p class="py-2 text-sm text-base-content/70">
                  {% blocktranslate with name=device.device_name %}La próxima vez que inicies sesión desde "{{ name }}" volverá a pedirse el código de verificación en dos pasos.{% endblocktranslate %}
                </p>
                <form
                  hx-post="{% url 'crochet:two_factor_forget_device' device.pk %}"
                  hx-target="#account-2fa-status"
                  hx-swap="outerHTML"
                  class="modal-action"
                >
                  {% csrf_token %}
                  <button type="button" class="btn btn-ghost btn-sm" onclick="this.closest('dialog').close()">
                    {% trans 'Cancelar' %}
                  </button>
                  <button type="submit" class="btn btn-error btn-sm">{% trans 'Olvidar' %}</button>
                </form>
              </div>
              <form method="dialog" class="modal-backdrop"><button>{% trans 'Cerrar' %}</button></form>
            </dialog>
          {% endfor %}
        </ul>
      </div>
    {% endif %}

    <dialog id="two-factor-disable-modal" class="modal"{% if two_factor_disable_form.errors %} data-reopen{% endif %}>
      <div class="modal-box">
        <h3 class="font-bold text-lg">{% trans 'Desactivar verificación en dos pasos' %}</h3>
        <p class="py-2 text-sm text-base-content/70">
          {% trans 'Confirma tu contraseña para desactivarla. Se olvidarán también todos los dispositivos recordados.' %}
        </p>
        <form
          hx-post="{% url 'crochet:two_factor_disable' %}"
          hx-target="#account-2fa-status"
          hx-swap="outerHTML"
          class="flex flex-col gap-3"
        >
          {% csrf_token %}
          <label class="flex flex-col gap-1">
            <span class="text-sm">{{ two_factor_disable_form.password.label }}</span>
            {{ two_factor_disable_form.password }}
            {% for error in two_factor_disable_form.password.errors %}
              <span class="text-error text-xs">{{ error }}</span>
            {% endfor %}
          </label>
          <div class="modal-action">
            <button type="button" class="btn btn-ghost btn-sm" onclick="this.closest('dialog').close()">
              {% trans 'Cancelar' %}
            </button>
            <button type="submit" class="btn btn-error btn-sm">{% trans 'Desactivar' %}</button>
          </div>
        </form>
      </div>
      <form method="dialog" class="modal-backdrop"><button>{% trans 'Cerrar' %}</button></form>
    </dialog>
  {% else %}
    <div class="flex items-center justify-between gap-4">
      <span class="badge badge-ghost">{% trans 'Desactivada' %}</span>
      <a href="{% url 'crochet:two_factor_setup' %}" class="btn btn-primary btn-sm">{% trans 'Activar' %}</a>
    </div>
  {% endif %}
</div>