{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="min-h-[calc(100vh-72px)] bg-gris-bg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <!-- Header del panel -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
            <div>
                <h1 class="font-poppins font-bold text-dark text-2xl sm:text-3xl">{% block panel_title %}Painel{% endblock %}</h1>
                <p class="text-gray-400 text-sm mt-1">Bem-vindo/a, <span class="text-rosa font-medium">{{ request.user.nombre }}</span></p>
            </div>
            <div class="flex items-center gap-3">
                <div class="flex items-center gap-2 bg-white px-4 py-2 rounded-full border border-gray-100 shadow-sm">
                    {% if request.user.foto_perfil %}
                    <img src="{{ request.user.foto_perfil.url }}" alt="{{ request.user.nombre }}" class="w-8 h-8 rounded-full object-cover">
                    {% else %}
                    <div class="w-8 h-8 bg-rosa-bg rounded-full flex items-center justify-center">
                        <span class="text-rosa font-semibold text-xs">{{ request.user.nombre.0 }}{{ request.user.apellido.0 }}</span>
                    </div>
                    {% endif %}
                    <span class="text-sm text-gray-600 font-medium">{{ request.user.get_full_name }}</span>
                </div>
                <a href="{% url 'users:editar_perfil' %}" class="flex items-center justify-center w-9 h-9 bg-white border border-gray-100 rounded-full shadow-sm text-gray-400 hover:text-rosa hover:border-rosa transition-all duration-300" title="Editar Perfil">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                </a>
                <form method="post" action="{% url 'users:logout' %}" class="inline">{% csrf_token %}
                <button type="submit" class="flex items-center gap-1.5 px-4 py-2 text-sm text-gray-500 hover:text-rosa border border-gray-200 rounded-full hover:border-rosa transition-all duration-300">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                    Sair
                </button>
                </form>
            </div>
        </div>

        {% if messages %}
        <div class="mb-6 space-y-2">
            {% for message in messages %}
            <div class="flex items-start gap-3 p-3 rounded-xl text-sm
                {% if message.tags == 'success' %}bg-green-50 text-green-700 border border-green-200
                {% elif message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200
                {% else %}bg-blue-50 text-blue-700 border border-blue-200{% endif %}">
                <span>{{ message }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% block panel_content %}{% endblock %}
    </div>
</div>
{% endblock %}