{% load lb_tags static %}

<!-- SIDEBAR HOMOGÉNEO Y CENTRALIZADO SAAS PARA PORTAL & STUDIO -->
<aside class="fixed inset-y-0 left-0 w-64 bg-white text-zinc-600 z-50 flex flex-col justify-between border-r border-zinc-200 transition-transform duration-300 -translate-x-full lg:translate-x-0" id="app-sidebar">
    <div class="flex flex-col flex-grow overflow-y-auto">
        <!-- LOGO INSTITUCIONAL CABECERA (AMPLIADO Y DESTACADO) -->
        <div class="h-24 flex items-center justify-center px-4 relative shrink-0 border-b border-zinc-100/80">
            <a href="{% url 'campus:portal_elearning' %}" class="flex items-center group decoration-0">
                <div class="group-hover:scale-105 transition-transform flex items-center justify-center py-2">
                    <img src="{% static 'img/logo.png' %}" alt="Lo Justo Learning" class="h-12 sm:h-14 w-auto max-w-[210px] object-contain" />
                </div>
            </a>
            <!-- Botón cerrar móvil -->
            <button onclick="document.getElementById('app-sidebar').classList.add('-translate-x-full')" class="lg:hidden absolute right-4 text-zinc-400 hover:text-zinc-800 p-1">
                ✕
            </button>
        </div>

        <!-- MENÚ CENTRALIZADO DE NAVEGACIÓN -->
        <div class="px-4 py-2 space-y-7 flex-grow">
            <!-- SECCIÓN 1: FORMACIÓN ACADÉMICA (ALUMNO) -->
            <div class="space-y-1.5">
                <div class="px-3 text-[10px] font-black uppercase tracking-widest text-zinc-400 mb-2">
                    Mi Aprendizaje
                </div>
                <a href="{% url 'campus:my_learning' %}" 
                   class="flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all {% if request.resolver_match.url_name == 'my_learning' %}bg-emerald-50 text-emerald-700 border border-emerald-200 font-black shadow-xs{% else %}text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100{% endif %}">
                    <c-lbi.rmx.home-4 w="1.15rem" h="1.15rem" class="shrink-0 {% if request.resolver_match.url_name == 'my_learning' %}text-emerald-600{% else %}text-zinc-400{% endif %}" />
                    <span>Mis Cursos</span>
                </a>
                <a href="{% url 'campus:portal_elearning' %}" 
                   class="flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all {% if request.resolver_match.url_name == 'portal_elearning' %}bg-emerald-50 text-emerald-700 border border-emerald-200 font-black shadow-xs{% else %}text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100{% endif %}">
                    <c-lbi.rmx.book-open w="1.15rem" h="1.15rem" class="shrink-0 {% if request.resolver_match.url_name == 'portal_elearning' %}text-emerald-600{% else %}text-zinc-400{% endif %}" />
                    <span>Catálogo de Cursos</span>
                </a>
            </div>

            <!-- SECCIÓN 2: GESTIÓN ACADÉMICA (STUDIO DOCENTE & COORDINACIÓN) -->
            {% if request.user.is_superuser or request.user.profile.role in 'INSTRUCTOR,MANAGER,ADMIN' %}
            <div class="space-y-1.5 pt-2">
                <div class="px-3 text-[10px] font-black uppercase tracking-widest text-amber-600 mb-2 flex items-center justify-between">
                    <span>Studio & Gestión</span>
                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                </div>

                <a href="{% url 'studio:studio_dashboard' %}" 
                   class="flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all {% if request.resolver_match.url_name == 'studio_dashboard' %}bg-emerald-50 text-emerald-700 border border-emerald-200 font-black shadow-xs{% else %}text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100{% endif %}">
                    <c-lbi.rmx.dashboard w="1.15rem" h="1.15rem" class="shrink-0 {% if request.resolver_match.url_name == 'studio_dashboard' %}text-emerald-600{% else %}text-zinc-400{% endif %}" />
                    <span>Resumen Ejecutivo</span>
                </a>

                <a href="{% url 'studio:studio_courses' %}" 
                   class="flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all {% if request.resolver_match.url_name == 'studio_courses' or request.resolver_match.url_name == 'studio_course_curriculum' or request.resolver_match.url_name == 'studio_course_edit' %}bg-emerald-50 text-emerald-700 border border-emerald-200 font-black shadow-xs{% else %}text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100{% endif %}">
                    <c-lbi.rmx.book-open w="1.15rem" h="1.15rem" class="shrink-0 {% if 'cursos' in request.path or 'curso' in request.path %}text-emerald-600{% else %}text-zinc-400{% endif %}" />
                    <span>Cursos & Temarios</span>
                </a>

                <a href="{% url 'studio:studio_categories' %}" 
                   class="flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all {% if request.resolver_match.url_name == 'studio_categories' %}bg-emerald-50 text-emerald-700 border border-emerald-200 font-black shadow-xs{% else %}text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100{% endif %}">
                    <c-lbi.rmx.price-tag-3 w="1.15rem" h="1.15rem" class="shrink-0 {% if request.resolver_match.url_name == 'studio_categories' %}text-emerald-600{% else %}text-zinc-400{% endif %}" />
                    <span>Especialidades</span>
                </a>

                <a href="{% url 'studio:studio_students' %}" 
                   class="flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all {% if request.resolver_match.url_name == 'studio_students' %}bg-emerald-50 text-emerald-700 border border-emerald-200 font-black shadow-xs{% else %}text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100{% endif %}">
                    <c-lbi.rmx.group w="1.15rem" h="1.15rem" class="shrink-0 {% if request.resolver_match.url_name == 'studio_students' %}text-emerald-600{% else %}text-zinc-400{% endif %}" />
                    <span>Directorio Alumnos</span>
                </a>

                <a href="{% url 'studio:studio_certificates' %}" 
                   class="flex items-center space-x-3 px-3.5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all {% if request.resolver_match.url_name == 'studio_certificates' %}bg-emerald-50 text-emerald-700 border border-emerald-200 font-black shadow-xs{% else %}text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100{% endif %}">
                    <c-lbi.rmx.qr-code w="1.15rem" h="1.15rem" class="shrink-0 {% if request.resolver_match.url_name == 'studio_certificates' %}text-emerald-600{% else %}text-zinc-400{% endif %}" />
                    <span>Auditoría Diplomas</span>
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- PIE DEL SIDEBAR: PERFIL DE USUARIO & LOGOUT -->
    <div class="p-4 shrink-0 mb-2 mx-2">
        {% if request.user.is_authenticated %}
        <div class="flex items-center justify-between gap-3">
            <div class="flex items-center space-x-3 min-w-0">
                <div class="w-9 h-9 rounded-xl bg-emerald-600 text-white font-black text-xs flex items-center justify-center shrink-0 uppercase shadow-sm">
                    {{ request.user.username|slice:":2" }}
                </div>
                <div class="min-w-0 flex-1">
                    <div class="text-xs font-black text-zinc-900 truncate leading-tight">
                        {{ request.user.get_full_name|default:request.user.username }}
                    </div>
                    <div class="text-[10px] font-bold text-emerald-600 uppercase tracking-widest mt-0.5">
                        {% if request.user.is_superuser or request.user.profile.role == 'ADMIN' %}Administrador
                        {% elif request.user.profile.role == 'INSTRUCTOR' %}Docente
                        {% elif request.user.profile.role == 'MANAGER' %}Coordinador
                        {% else %}Alumno matriculado{% endif %}
                    </div>
                </div>
            </div>
            <a href="{% url 'users:logout' %}" title="Cerrar Sesión" class="w-8 h-8 rounded-lg bg-zinc-200/50 hover:bg-red-50 text-zinc-500 hover:text-red-600 flex items-center justify-center border border-zinc-300/60 hover:border-red-200 transition-colors shrink-0">
                <c-lbi.rmx.logout-box-r w="1rem" h="1rem" class="shrink-0" />
            </a>
        </div>
        {% else %}
        <div class="flex gap-2">
            <a href="{% url 'users:login' %}" class="flex-1 text-center py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold uppercase tracking-wider transition-colors">
                Ingresar
            </a>
        </div>
        {% endif %}
    </div>
</aside>