{% load lb_tags %}

<c-layouts.app title="Catálogo Académico | Campus Virtual Lo Justo">
    <div class="bg-zinc-100 min-h-screen pb-20">
        <!-- BARRA SUPERIOR DEL CATÁLOGO INTERNO SAAS -->
        <div class="bg-white border-b border-zinc-200/80 px-4 sm:px-6 lg:px-8 py-5 shadow-sm">
            <div class="max-w-7xl mx-auto flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <h1 class="text-2xl font-black text-zinc-900 flex items-center gap-2.5">
                        <c-lbi.rmx.book-open w="1.5rem" h="1.5rem" class="text-emerald-600" />
                        <span>Catálogo de Cursos</span>
                    </h1>
                    <p class="text-xs text-zinc-500 font-medium mt-0.5">Explora todos los programas disponibles e inscríbete.</p>
                </div>

                <div class="flex items-center gap-3">
                    <span class="text-xs font-bold text-zinc-500 bg-zinc-100 px-3 py-1.5 rounded-lg border border-zinc-200/80">
                        {{ courses.count }} Programa(s) Disponibles
                    </span>
                </div>
            </div>
        </div>

        <!-- CONTENEDOR PRINCIPAL DEL CATÁLOGO INTERNO -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 space-y-8">
            <!-- BARRA DE BÚSQUEDA Y FILTROS POR CATEGORÍA -->
            <div class="bg-white border border-zinc-200/80 rounded-2xl p-5 shadow-sm flex flex-col md:flex-row items-center justify-between gap-4">
                <form method="get" action="{% url 'campus:portal_elearning' %}" class="w-full md:w-96 relative flex items-center">
                    <input type="search" name="q" value="{{ search_query|default:'' }}" placeholder="Buscar por normativa ISO, balanzas, metrología..." class="w-full pl-10 pr-4 py-2 text-xs font-medium rounded-xl border border-zinc-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 bg-zinc-50 text-zinc-900">
                    <div class="absolute left-3.5 text-zinc-400 pointer-events-none">
                        <c-lbi.rmx.search w="1rem" h="1rem" />
                    </div>
                </form>

                <div class="flex flex-wrap items-center gap-1.5 w-full md:w-auto overflow-x-auto pb-1 md:pb-0">
                    <a href="{% url 'campus:portal_elearning' %}" class="px-3.5 py-1.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-colors {% if not selected_category %}bg-emerald-600 text-white shadow-xs{% else %}bg-zinc-100 text-zinc-600 hover:bg-zinc-200{% endif %}">
                        Todas
                    </a>
                    {% for cat in categories %}
                    <a href="{% url 'campus:portal_elearning' %}?category={{ cat.slug }}" class="px-3.5 py-1.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-colors {% if selected_category == cat.slug %}bg-emerald-600 text-white shadow-xs{% else %}bg-zinc-100 text-zinc-600 hover:bg-zinc-200{% endif %}">
                        {{ cat.title }}
                    </a>
                    {% endfor %}
                </div>
            </div>

            <!-- GRILLA DE CURSOS EN EL PORTAL -->
            {% if courses %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for course in courses %}
                <div class="bg-white border border-zinc-200/80 rounded-2xl shadow-sm hover:shadow-md transition-all flex flex-col justify-between overflow-hidden">
                    <div>
                        <!-- Badge normativo -->
                        <div class="bg-zinc-900 text-white px-5 py-3 flex items-center justify-between border-b border-zinc-800">
                            <span class="text-[10px] font-mono font-bold uppercase tracking-widest text-emerald-400">
                                {{ course.iso_standard }}
                            </span>
                            <span class="text-[10px] font-bold text-zinc-400 bg-zinc-800 px-2 py-0.5 rounded">
                                {{ course.category.title }}
                            </span>
                        </div>

                        <div class="p-6 space-y-4">
                            <h3 class="text-base font-black text-zinc-900 leading-snug">
                                {{ course.title }}
                            </h3>
                            <p class="text-xs text-zinc-600 leading-relaxed line-clamp-3">
                                {{ course.short_description|default:course.description|truncatewords:25 }}
                            </p>
                        </div>
                    </div>

                    <div class="p-6 pt-0 border-t border-zinc-100 mt-4 flex items-center justify-between gap-2.5">
                        {% if course.id in enrolled_course_ids %}
                        <a href="{% url 'campus:resume_course' slug=course.slug %}" class="flex-1 bg-emerald-50 hover:bg-emerald-100 border border-emerald-300 text-emerald-800 font-black text-xs uppercase tracking-wider py-2.5 rounded-xl text-center transition-colors flex items-center justify-center gap-1.5">
                            <span>Continuar Lecciones</span>
                            <c-lbi.rmx.arrow-right w="1rem" h="1rem" />
                        </a>
                        {% else %}
                        <form method="post" action="{% url 'campus:enroll_course' slug=course.slug %}" class="flex-1">
                            {% csrf_token %}
                            <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider py-2.5 rounded-xl text-center transition-colors shadow-xs flex items-center justify-center gap-1.5 cursor-pointer">
                                <span>Inscribirme Gratis</span>
                                <c-lbi.rmx.checkbox-circle w="1rem" h="1rem" />
                            </button>
                        </form>
                        <a href="{% url 'courses:course_detail' slug=course.slug %}" target="_blank" title="Ver Temario detallado en nueva pestaña" class="px-3 py-2.5 bg-zinc-100 hover:bg-zinc-200 text-zinc-600 rounded-xl text-xs font-bold transition-colors flex items-center justify-center shrink-0 border border-zinc-200">
                            <c-lbi.rmx.external-link w="1rem" h="1rem" />
                        </a>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="bg-white border border-zinc-200/80 rounded-2xl p-12 text-center max-w-lg mx-auto space-y-4">
                <div class="w-12 h-12 rounded-xl bg-zinc-100 text-zinc-500 flex items-center justify-center mx-auto">
                    <c-lbi.rmx.search w="1.5rem" h="1.5rem" />
                </div>
                <h3 class="text-base font-black text-zinc-900">No se encontraron programas con esos filtros</h3>
                <p class="text-xs text-zinc-500 font-medium">Intenta seleccionar otra categoría o cambiar el término de búsqueda.</p>
                <a href="{% url 'campus:portal_elearning' %}" class="inline-block mt-2 px-4 py-2 bg-zinc-900 text-white text-xs font-bold uppercase rounded-xl">
                    Ver Todos los Programas
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</c-layouts.app>