{# INVENTARIOS/inventario_project/templates/base.html #}
{% 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 %}Sistema de Inventario y Equipos{% endblock %}</title>

    {# Enlaces a librerías externas #}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
    {# Tu archivo CSS personalizado #}
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    
    {% block extra_head %}{% endblock %}
</head>
<body>
    {# --- BARRA DE NAVEGACIÓN SUPERIOR --- #}
    <nav class="navbar navbar-expand-lg navbar-custom">
        <div class="container-fluid">
            <a href="{% url 'gestion_equipos:home' %}" class="navbar-brand text-white">
                <i class="fas fa-desktop text-white me-2"></i> Sistema para la gestión de activos
            </a>
            <div class="d-flex">
                <ul class="navbar-nav">
                    {% if user.is_authenticated %}
                        <li class="nav-item">
                            <span class="navbar-text text-white me-3">Hola, {{ user.get_full_name|default:user.username }}</span>
                        </li>
                        <li class="nav-item">
                            <form action="{% url 'logout' %}" method="post">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-outline-light btn-sm">Cerrar Sesión</button>
                            </form>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a href="{% url 'login' %}" class="btn btn-outline-light btn-sm">Iniciar Sesión</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    
    {# --- DISEÑO DE CONTENIDO PRINCIPAL CON BARRA LATERAL --- #}
    <div class="d-flex" id="wrapper">
        {% if user.is_authenticated %}
            {# --- BARRA LATERAL (ASIDE) --- #}
            <aside id="sidebar" class="">
                <div class="sidebar-header p-3">
                    <h4 class="m-0">Menú</h4>
                </div>
                <ul class="list-group sidebar-menu flex-column">
                    <li class="list-group-item dropdown">
                        <a href="#equiposSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle d-flex align-items-center">
                            <i class="fas fa-tools me-2"></i> Gestión Principal
                        </a>
                        <ul class="collapse list-unstyled" id="equiposSubmenu">
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:lista_equipos'%}"><i class="fas fa-boxes me-2"></i> Inventario</a></li>
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:lista_asignaciones' %}"><i class="fas fa-handshake me-2"></i> Asignaciones</a></li>
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:listar_mantenimientos' %}"><i class="fas fa-wrench me-2"></i> Mantenimientos</a></li>
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:listar_actas' %}"><i class="fas fa-file-alt me-2"></i>Actas</a></li>
                        </ul>
                    </li>
                    {% if user.is_superuser or user.is_staff %}
                    <li class="list-group-item">
                        <a href="{% url 'gestion_usuarios:listar_usuarios' %}" class="d-flex align-items-center"><i class="fas fa-users-cog me-2"></i> Usuarios</a>
                    </li>
                    {% endif %}
                    <li class="list-group-item dropdown">
                        <a href="#reportesSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle d-flex align-items-center">
                            <i class="fas fa-chart-bar me-2"></i> Reportes y Herramientas
                        </a>
                        <ul class="collapse list-unstyled" id="reportesSubmenu">
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:generar_reportes' %}"><i class="fas fa-chart-line me-2"></i> Reportes</a></li>
                            
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:papelera_de_reciclaje' %}"><i class="fas fa-trash-alt me-2"></i> Papelera</a></li>
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:ver_historial' %}"><i class="fas fa-history me-2"></i> Historial</a></li>
                            {% if user.is_superuser %}
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'admin:index' %}"><i class="fas fa-user-shield me-2"></i> Admin de Django</a></li>
                            {% endif %}
                        </ul>
                    </li>
                    {% if user.is_superuser or user.is_staff %}
                    <li class="list-group-item dropdown">
                        <a href="#configSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle d-flex align-items-center">
                            <i class="fas fa-cogs me-2"></i> Configuración
                        </a>
                        <ul class="collapse list-unstyled" id="configSubmenu">
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:listar_categorias' %}">Categorías</a></li>
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:listar_ubicaciones' %}">Ubicaciones</a></li>
                            <li><a class="dropdown-item" href="{% url 'gestion_equipos:listar_departamentos' %}">Departamentos</a></li>
                        </ul>
                    </li>
                    {% endif %}
                </ul>
            </aside>
        {% endif %}
        
        {# --- ÁREA DE CONTENIDO PRINCIPAL --- #}
        <div class="content-wrapper flex-grow-1">
            <main class="main-content">
                {% if messages %}
                    <div class="container-fluid">
                        {% for message in messages %}
                            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
                {% block content %}{% endblock %}
            </main>
            <footer class="footer">
                <p>&copy; {{ "now"|date:"Y" }} Sistema de Gestión de Activos. Todos los derechos reservados.</p>
            </footer>
        </div>
    </div>
    
    {# Scripts de Bootstrap #}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{% static 'js/script.js' %}"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>