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

{% block title %}{% trans 'Ajustes de la cuenta' %}{% endblock %}

<!-- Igual que pattern.html: la cabecera X-CSRFToken que exige Django en
     todo POST, leída del propio csrf_token en vez de la cookie (ver
     _account_email_form.html/_account_password_form.html, que llegan por
     hx-post). -->
{% block body_attrs %} hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'{% endblock %}

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

{% block content %}
  <main class="max-w-4xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-semibold mb-6">{% trans 'Ajustes de la cuenta' %}</h1>

    <div class="flex flex-col md:flex-row gap-8">
      <!-- Panel lateral: solo cambia qué <section data-settings-panel> se
           ve (ver account-settings-tabs.js), no hay URL ni petición nueva
           por pestaña; los formularios de cada una siguen siendo los
           mismos fragmentos HTMX de siempre. -->
      <nav class="md:w-56 shrink-0 no-print">
        <!-- w-full: .menu de daisyUI se ajusta al contenido por defecto
             (no ocupa el 100% de su contenedor), así que sin esto quedaba
             visiblemente más estrecho que las tarjetas de abajo en móvil. -->
        <ul class="menu bg-base-100 rounded-box border border-base-300 p-2 w-full md:flex-col">
          <li><a href="#" data-settings-tab="profile" class="menu-active">{% trans 'Perfil' %}</a></li>
          <li><a href="#" data-settings-tab="security">{% trans 'Seguridad' %}</a></li>
          <li><a href="#" data-settings-tab="danger" class="text-error">{% trans 'Zona de peligro' %}</a></li>
        </ul>
      </nav>

      <div class="flex-1 min-w-0">
        <section data-settings-panel="profile" class="flex flex-col gap-8">
          <section class="card bg-base-100 shadow border border-base-300">
            <div class="card-body">
              <h2 class="card-title text-lg">{% trans 'Nombre para mostrar' %}</h2>
              {% include 'crochet/_account_display_name_form.html' %}
            </div>
          </section>
        </section>

        <section data-settings-panel="security" class="hidden flex-col gap-8">
          <section class="card bg-base-100 shadow border border-base-300">
            <div class="card-body">
              <h2 class="card-title text-lg">{% trans 'Email' %}</h2>
              {% include 'crochet/_account_email_form.html' %}
            </div>
          </section>

          <section class="card bg-base-100 shadow border border-base-300">
            <div class="card-body">
              <h2 class="card-title text-lg">{% trans 'Cambiar contraseña' %}</h2>
              {% include 'crochet/_account_password_form.html' %}
            </div>
          </section>

          <section class="card bg-base-100 shadow border border-base-300">
            <div class="card-body">
              <h2 class="card-title text-lg">{% trans 'Verificación en dos pasos' %}</h2>
              <p class="text-sm text-base-content/70">
                {% trans 'Pide un código de tu app de autenticación (Google Authenticator, Aegis...) además de la contraseña al iniciar sesión.' %}
              </p>
              {% include 'crochet/_account_2fa_status.html' %}
            </div>
          </section>
        </section>

        <!-- Zona de peligro en su propia pestaña, no solo con border-error
             de por sí: separada del resto de ajustes, no algo con lo que
             te puedas topar sin querer bajando por la página. -->
        <section data-settings-panel="danger" class="hidden flex-col gap-8">
          <section class="card bg-base-100 shadow border border-error">
            <div class="card-body">
              <h2 class="card-title text-lg text-error">{% trans 'Eliminar cuenta' %}</h2>
              <p class="text-sm text-base-content/70">
                {% trans 'Esto borrará tu cuenta y todos tus patrones de forma permanente.' %}
              </p>
              {% include 'crochet/_account_delete_form.html' %}
            </div>
          </section>
        </section>
      </div>
    </div>
  </main>
{% endblock %}

{% block extra_js %}
  <script defer src="{% static 'js/account-settings-tabs.js' %}"></script>
  <script defer src="{% static 'js/modal-reopen.js' %}"></script>
{% endblock %}