{% extends "base_dashboard.html" %}

{% block title %}Mi Perfil | Citalis{% endblock %}

{% block content %}
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-8 mb-16 reveal page-header">
    <div>
        <span class="text-primary text-[10px] uppercase font-black tracking-[0.4em] mb-4 block">Cuenta</span>
        <h1 class="text-5xl lg:text-6xl leading-tight">Mi Perfil</h1>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">

    <!-- User Info -->
    <div class="card-premium p-10 reveal stagger-1">
        <h3 class="text-xs font-black uppercase tracking-[0.4em] text-body-text/30 mb-8">Información Personal</h3>

        <div class="space-y-6">
            <div>
                <label class="text-[10px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Nombre</label>
                <p class="text-lg font-bold text-on-surface">{{ user.first_name }} {{ user.last_name }}</p>
            </div>
            <div>
                <label class="text-[10px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Email</label>
                <p class="text-lg font-bold text-on-surface">{{ user.email }}</p>
            </div>
            {% if user.occupation %}
            <div>
                <label class="text-[10px] font-black uppercase tracking-widest text-body-text/40 mb-2 block">Giro</label>
                <p class="text-lg font-bold text-on-surface">{{ user.occupation }}</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Accesos rápidos -->
    <div class="card-premium p-10 reveal stagger-2">
        <h3 class="text-xs font-black uppercase tracking-[0.4em] text-body-text/30 mb-8">Configuración</h3>
        <div class="space-y-4">
            <a href="{% url 'business_settings' %}"
                class="block p-6 bg-surface/30 border border-accent/5 rounded-sm hover:border-primary/30 transition-all">
                <p class="text-[10px] font-black uppercase tracking-widest text-primary mb-1">Mi Negocio</p>
                <p class="text-xs font-bold text-body-text/60">Identidad, contacto y horarios</p>
            </a>
            <form action="{% url 'logout' %}" method="post">
                {% csrf_token %}
                <button type="submit"
                    class="w-full text-left p-6 bg-surface/30 border border-accent/5 rounded-sm hover:border-red-300 transition-all">
                    <p class="text-[10px] font-black uppercase tracking-widest text-red-500 mb-1">Cerrar sesión</p>
                    <p class="text-xs font-bold text-body-text/60">Salir de la plataforma</p>
                </button>
            </form>
        </div>
    </div>

</div>
{% endblock %}