{% load static %}

<!-- Sidebar -->
<div class="sidebar" data-background-color="dark" id="sidebar">
    <div class="sidebar-logo">
        <div class="logo-header" data-background-color="dark">
            <a href="{% url 'principal' %}" class="logo" data-url="{% url 'principal' %}" style="display: flex; align-items: center;">
                <img
                    src="{% static 'img/transporte.png' %}"
                    alt="navbar brand"
                    class="navbar-brand animate__animated animate__pulse animate__infinite"
                    height="50"
                    style="margin-right: 8px;"
                />
                <div class="brand-text" style="color: white; font-weight: bold; font-size: 18px; font-family: 'Poppins', sans-serif;">
                    SERVTRANST
                </div>
            </a>
            <div class="nav-toggle">
                <button class="btn btn-toggle toggle-sidebar" title="Colapsar Sidebar">
                    <i class="gg-menu-right"></i>
                </button>
                <button class="btn btn-toggle sidenav-toggler" title="Expandir Sidebar">
                    <i class="gg-menu-left"></i>
                </button>
            </div>
            <button class="topbar-toggler more d-lg-none" title="Más opciones">
                <i class="gg-more-vertical-alt"></i>
            </button>
        </div>
    </div>

    <div class="sidebar-wrapper scrollbar scrollbar-inner">
        <div class="sidebar-content">
            <ul class="nav nav-secondary">
                <li class="nav-section">
                    <span class="sidebar-mini-icon">
                        <i class="fa fa-ellipsis-h"></i>
                    </span>
                    <h4 class="text-section">Referencias</h4>
                </li>

                <li class="nav-item {% if request.path == '/principal/' %}active{% endif %}">
                    <a href="{% url 'principal' %}"  data-bs-toggle="tooltip" title="Inicio">
                        <i class="fas fa-school"></i>
                        <p>Inicio</p>
                    </a>
                </li>
                <li class="nav-item {% if request.path == '/listar_directores/' %}active{% endif %}">
                    <a href="{% url 'listar_directores' %}"  data-bs-toggle="tooltip" title="Directores">
                        <i class="fas fa-address-card"></i>
                        <p>Directores</p>
                    </a>
                </li>
                <li class="nav-item {% if request.path == '/listar_subjefes/' %}active{% endif %}">
                    <a href="{% url 'listar_subjefes' %}"  data-bs-toggle="tooltip" title="Grupos de Trabajo">
                        <i class="fas fa-box"></i>
                        <p>Grupos</p>
                    </a>
                </li>
                <li class="nav-item {% if request.path == '/inventario_administrativo/' %}active{% endif %}">
                    <a href="{% url 'listar_inventario_administrativo' %}" data-bs-toggle="tooltip" title="Inventario Administrativo">
                        <i class="fas fa-warehouse"></i>
                        <p>Administrativo</p>
                    </a>
                </li>
                <li class="nav-item {% if request.path == '/inventario_tactico/' %}active{% endif %}">
                    <a href="{% url 'listar_inventario_tactico' %}" data-bs-toggle="tooltip" title="Inventario Táctico">
                        <i class="fas fa-warehouse"></i>
                        <p>Táctico</p>
                    </a>
                </li>
                <li class="nav-item {% if request.path == '/unidades/' %}active{% endif %}">
                    <a href="{% url 'unidad_list' %}"  data-bs-toggle="tooltip" title="Unidades">
                        <i class="fas fa-store-alt"></i>
                        <p>Unidad</p>
                    </a>
                </li>
                <li class="nav-item {% if request.path == '/admin/' %}active{% endif %}">
                    <a href="{% url 'admin:index' %}" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       data-bs-toggle="tooltip" 
                       title="Administración">
                        <i class="fas fa-user-tie"></i>
                        <p>Admin</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- End Sidebar -->