{% load lb_tags %}

<c-layouts.base title="Catálogo de Cursos | Lo Justo E-Learning">
    <!-- CABEZAL CATÁLOGO -->
    <div class="bg-white text-zinc-900 py-12 md:py-16 border-b border-zinc-200 shadow-sm relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-4 text-center md:text-left">
            <div class="inline-flex items-center px-3 py-1 rounded-full bg-emerald-50 border border-emerald-500/30 text-emerald-700 text-xs font-black uppercase tracking-widest">
                🏆 Programas de Especialización Acreditados
            </div>
            <h1 class="text-3xl sm:text-5xl font-black tracking-tight text-zinc-900 leading-tight">
                Catálogo de Formación Continua & <span class="text-emerald-600">Metrología</span>
            </h1>
            <p class="text-zinc-600 text-sm sm:text-base max-w-2xl font-medium leading-relaxed">
                Selecciona un programa para ver el temario académico, los requisitos de aprobación y la normativa ISO/IEC 17025 aplicable.
            </p>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8">
        <!-- BARRA DE BÚSQUEDA Y FILTROS HTMX -->
        <div class="bg-white border border-zinc-200 rounded-2xl p-6 shadow-lg space-y-6">
            <div class="flex flex-col md:flex-row items-center justify-between gap-4">
                <!-- Input de Búsqueda Instantánea con HTMX -->
                <div class="relative w-full md:w-96">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-zinc-400">
                        <c-lbi.rmx.search w="1.125rem" h="1.125rem" />
                    </div>
                    <input
                        type="search"
                        name="q"
                        value="{{ search_query }}"
                        placeholder="Buscar por norma, balanza o tema..."
                        hx-get="{% url 'courses:catalog' %}"
                        hx-trigger="keyup changed delay:300ms, search"
                        hx-target="#catalog-grid"
                        class="input w-full pl-10 pr-4 bg-zinc-50 border border-zinc-300 rounded-xl focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 text-sm font-medium transition-all"
                    />
                </div>

                <!-- Botón Limpiar o Ver Todos -->
                <div class="w-full md:w-auto flex justify-end">
                    <button
                        hx-get="{% url 'courses:catalog' %}"
                        hx-target="#catalog-grid"
                        class="btn btn-sm btn-ghost text-xs font-bold uppercase tracking-wider text-zinc-500 hover:text-zinc-900"
                    >
                        <c-lbi.rmx.arrow-go-back w="1rem" h="1rem" class="inline mr-1 shrink-0" />
                        <span>Mostrar Todos</span>
                    </button>
                </div>
            </div>

            <!-- Filtros por Categoría (Pills) -->
            <div class="flex items-center gap-2 overflow-x-auto pb-2 border-t border-zinc-100 pt-4">
                <span class="text-xs font-black uppercase tracking-widest text-zinc-400 mr-2 shrink-0">Filtrar por Especialidad:</span>
                
                <button
                    hx-get="{% url 'courses:catalog' %}"
                    hx-target="#catalog-grid"
                    class="btn btn-sm {% if not selected_category %}bg-emerald-600 text-white font-black{% else %}btn-ghost text-zinc-600 font-bold{% endif %} rounded-xl text-xs uppercase tracking-wider shrink-0 transition-all"
                >
                    Todos
                </button>

                {% for cat in categories %}
                <button
                    hx-get="{% url 'courses:catalog' %}?category={{ cat.slug }}"
                    hx-target="#catalog-grid"
                    class="btn btn-sm {% if selected_category == cat.slug %}bg-emerald-600 text-white font-black{% else %}btn-outline border-zinc-300 text-zinc-700 font-bold hover:border-emerald-600 hover:text-emerald-600{% endif %} rounded-xl text-xs uppercase tracking-wider shrink-0 transition-all flex items-center space-x-1.5"
                >
                    <span>{{ cat.title }}</span>
                </button>
                {% endfor %}
            </div>
        </div>

        <!-- CONTENEDOR HTMX PARA GRILLA DE CURSOS -->
        <div id="catalog-grid" class="transition-opacity duration-200">
            {% include "partials/catalog_grid.html" %}
        </div>
    </div>
</c-layouts.base>