{% load lb_tags %}

{% if courses %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    {% for course in courses %}
    <c-lb.card class="bg-white border border-zinc-200 shadow-lg hover:shadow-2xl hover:border-emerald-500/60 transition-all duration-300 rounded-2xl flex flex-col justify-between group overflow-hidden">
        <div>
            <!-- Header colorido de tarjeta -->
            <div class="h-2 bg-gradient-to-r from-emerald-600 via-emerald-400 to-amber-400 w-full"></div>
            <c-lb.card.body class="p-6 sm:p-8 space-y-4">
                <!-- Categoría y Norma ISO -->
                <div class="flex items-center justify-between gap-2 flex-wrap">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-black uppercase tracking-wider bg-emerald-500/10 text-emerald-700 border border-emerald-500/20">
                        {{ course.category.title }}
                    </span>
                    <span class="text-[11px] font-mono font-bold text-zinc-400">
                        {{ course.iso_standard }}
                    </span>
                </div>

                <!-- Título -->
                <c-lb.card.title class="text-xl font-black text-zinc-900 group-hover:text-emerald-600 transition-colors leading-snug">
                    {{ course.title }}
                </c-lb.card.title>

                <!-- Resumen ejecutivo -->
                <p class="text-sm text-zinc-600 leading-relaxed line-clamp-3">
                    {{ course.short_description }}
                </p>
            </c-lb.card.body>
        </div>

        <div class="p-6 sm:p-8 pt-0 border-t border-zinc-100 flex items-center justify-between mt-4">
            <div class="text-xs font-bold text-zinc-500 flex items-center space-x-1">
                <c-lbi.rmx.book-read w="1rem" h="1rem" class="text-amber-500" />
                <span>{{ course.get_total_lessons }} lecciones</span>
            </div>
            <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn btn-sm bg-emerald-600 hover:bg-emerald-500 text-white font-black uppercase text-xs tracking-wider rounded-xl shadow-md flex items-center space-x-1 border-0">
                <span>Ver Temario</span>
                <c-lbi.rmx.arrow-right w="1rem" h="1rem" />
            </a>
        </div>
    </c-lb.card>
    {% endfor %}
</div>
{% else %}
<div class="bg-white border border-zinc-200 rounded-3xl p-12 text-center max-w-xl mx-auto space-y-4 shadow-xl">
    <div class="w-16 h-16 rounded-full bg-amber-500/10 text-amber-500 flex items-center justify-center mx-auto text-3xl font-black">
        🔍
    </div>
    <h3 class="text-xl font-black text-zinc-900">No se encontraron programas acreditados</h3>
    <p class="text-sm text-zinc-500 leading-relaxed">
        Intenta buscar por otro término de especialidad técnica (ej. "balanzas", "ISO 17025", "incertidumbre") o selecciona otra categoría en los filtros superiores.
    </p>
    <div class="pt-2">
        <a href="{% url 'courses:catalog' %}" class="btn btn-sm bg-zinc-900 text-white font-bold rounded-xl">
            Ver Todos los Cursos
        </a>
    </div>
</div>
{% endif %}