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

{% block title %}Inicio | Gades Manager{% endblock title %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="bg-dark text-white p-4 rounded-3 shadow-sm d-flex justify-content-between align-items-center flex-wrap" style="border-left: 5px solid #0d6efd;">
            <div>
                <h1 class="display-6 fw-bold mb-1">Bienvenido, {{ user.first_name }} {{ user.last_name }}</h1>
                <p class="text-white-50 mb-0">Panel de control de la plataforma de gestión interna.</p>
            </div>
            <div class="text-end mt-2 mt-md-0">
                <span class="badge bg-primary fs-6 px-3 py-2 shadow-sm">
                    Temporada Activa: {% if temporada_actual %}{{ temporada_actual.nombre }}{% else %}Ninguna activa{% endif %}
                </span>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    
    <div class="col-12 col-lg-8 text-center">
        <div class="shadow rounded-3 overflow-hidden">
           <img src="{% static 'images/monoplaza_gades.jpg' %}" alt="Monoplaza Formula Gades" class="img-fluid rounded-3 d-block mx-auto"
            style=" width: 100%; max-height: 70vh; object-fit: cover; ">
        </div>
    </div>

    <div class="col-12 col-lg-4">
        <div class="row g-3">

            {% if user.rol != 'directiva' %}
                
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-3">
                            <h5 class="card-title fw-bold text-dark mb-1">Mi Área Técnica</h5>
                            <p class="text-secondary small mb-2">Acceso a documentación, planos y buzón de compras de tu departamento.</p>
                            <a href="#" class="btn btn-outline-primary btn-sm fw-bold px-3">Acceder a mi Área</a>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-3">
                            <h5 class="card-title fw-bold text-dark mb-1">Pruebas y Telemetría</h5>
                            <p class="text-secondary small mb-2">Carga de archivos de registros CSV y procesamiento analítico de telemetría.</p>
                            <a href="#" class="btn btn-outline-primary btn-sm fw-bold px-3">Ver Telemetría</a>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-3">
                            <h5 class="card-title fw-bold text-dark mb-1">Miembros del Equipo</h5>
                            <p class="text-secondary small mb-2">Directorio completo de integrantes, correos corporativos y roles.</p>
                            <a href="#" class="btn btn-outline-primary btn-sm fw-bold px-3">Ver Directorio</a>
                        </div>
                    </div>
                </div>

            {% else %}
                
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-3">
                            <h5 class="card-title fw-bold text-dark mb-1">Pruebas y Telemetría</h5>
                            <p class="text-secondary small mb-2">Carga de archivos de registros CSV y procesamiento analítico de telemetría.</p>
                            <a href="#" class="btn btn-outline-primary btn-sm fw-bold px-3">Ver Telemetría</a>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-3">
                            <h5 class="card-title fw-bold text-dark mb-1">Miembros del Equipo</h5>
                            <p class="text-secondary small mb-2">Directorio completo de integrantes, correos corporativos y roles.</p>
                            <a href="#" class="btn btn-outline-primary btn-sm fw-bold px-3">Ver Directorio</a>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card border-0 shadow-sm" style="border-left: 4px solid #ffc107;">
                        <div class="card-body p-3">
                            <h5 class="card-title fw-bold text-dark mb-1">Contabilidad Global</h5>
                            <p class="text-secondary small mb-2">Supervisión del presupuesto anual y control del buzón financiero de facturas.</p>
                            <a href="#" class="btn btn-warning btn-sm fw-bold text-dark px-3">Gestionar Finanzas</a>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card border-0 shadow-sm" style="border-left: 4px solid #ffc107;">
                        <div class="card-body p-3">
                            <h5 class="card-title fw-bold text-dark mb-1">Administración del Sistema</h5>
                            <p class="text-secondary small mb-2">Módulo avanzado de configuración de permisos, usuarios y temporadas.</p>
                            <a href="#" class="btn btn-warning btn-sm fw-bold text-dark px-3">Panel de Control</a>
                        </div>
                    </div>
                </div>

            {% endif %}

        </div>
    </div>

</div>
{% endblock content %}