{% extends 'crochet/base.html' %}
{% load 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-lg mx-auto px-4 py-8 flex flex-col gap-8">
    <h1 class="text-2xl font-semibold">{% trans 'Ajustes de la cuenta' %}</h1>

    <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 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>

    <a href="{% url 'crochet:home' %}" class="link link-primary">{% trans 'Volver a mis patrones' %}</a>

    <!-- Zona de peligro, aparte del resto (border-error): que se note a
         simple vista que esto es irreversible, distinto de los ajustes de
         arriba. -->
    <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>
  </main>
{% endblock %}