{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Intranet | Formula Gades{% endblock title %}</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="{% static 'css/estilos.css' %}">
    
    {% block extra_head %}{% endblock extra_head %}
    <style>
        html, body { overflow: hidden; height: 100%; }
    </style>
</head>
<body class="bg-light text-dark d-flex flex-column min-vh-100">

   <nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top shadow-sm">
        <div class="container-fluid px-4">
            <a class="navbar-brand d-flex align-items-center" href="{% url 'inicio' %}">
                <img src="{% static 'images/logo_gades.png' %}" alt="Logo Gades" height="40" class="me-2">
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    
                    <li class="nav-item dropdown px-2">
                        <a class="nav-link dropdown-toggle" href="#" id="areasDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Áreas Técnicas
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="areasDropdown">
                            <li><a class="dropdown-menu-item dropdown-item" href="#">Aerodinámica</a></li>
                            <li><a class="dropdown-item" href="#">Chasis</a></li>
                            <li><a class="dropdown-item" href="#">Bussiness & Operation</a></li>
                            <li><a class="dropdown-item" href="#">E_Powertrain</a></li>
                            <li><a class="dropdown-item" href="#">Electrónica</a></li>
                            <li><a class="dropdown-item" href="#">SDF</a></li>
                            <li><a class="dropdown-item" href="#">Motor & Transmisión</a></li>
                            <li><a class="dropdown-item" href="#">Software</a></li>
                        </ul>
                    </li>

                    <li class="nav-item px-2">
                        <a class="nav-link" href="{% url 'listado_pruebas' %}">Pruebas</a>
                    </li>
                    <li class="nav-item px-2">
                        <a class="nav-link" href="{% url 'patrocinios' %}">Patrocinios</a>
                    </li>
                    <li class="nav-item px-2">
                        <a class="nav-link" href="{% url 'listado_miembros' %}">Miembros</a>
                    </li>

                    {% if user.is_authenticated and user.rol == 'directiva' %}
                        <li class="nav-item px-2">
                            <a class="nav-link text-warning" href="{% url 'contabilidad' %}">Contabilidad</a>
                        </li>

                        <li class="nav-item dropdown px-2">
                            <a class="nav-link dropdown-toggle text-warning" href="#" id="gestionDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Gestión
                            </a>
                            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="gestionDropdown">
                                <li><a class="dropdown-item" href="{% url 'gestion_usuarios' %}">Gestión de Usuarios</a></li>
                                <li><a class="dropdown-item" href="{% url 'gestion_temporadas' %}">Gestión de Temporadas</a></li>
                            </ul>
                        </li>
                    {% endif %}

                    <li class="nav-item dropdown ms-3 border-start ps-3">
                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center text-white fw-bold shadow-sm" style="width: 35px; height: 35px;">
                                {{ user.first_name|slice:":1"|upper }}
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><span class="dropdown-item-text fw-bold text-muted">Hola, {{ user.first_name }}</span></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'mi_perfil' %}">Mi Perfil</a></li>
                            <li>
                                <form method="post" action="{% url 'logout' %}">
                                    {% csrf_token %}
                                    <button type="submit" class="dropdown-item text-danger">Cerrar Sesión</button>
                                </form>
                            </li>
                        </ul>
                    </li>    
                </ul>
            </div>
        </div>
    </nav>

    <main class="container-fluid py-3 px-4 flex-grow-1 d-flex flex-column" style="min-height: 0;">
        {% block content %}
        {% endblock content %}
    </main>

    <footer class="bg-dark text-white text-center py-2 mt-auto border-top border-secondary">
        <p class="mb-0 small">&copy; 2026 Formula Gades - Universidad de Cádiz. Todos los derechos reservados.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    
    {% block extra_js %}{% endblock extra_js %}
</body>
</html>