<c-layouts.app title="Gestión de Cursos | LMS Studio Lo Justo">
    <div class="bg-zinc-100 min-h-screen pb-20">
        <!-- BARRA SUPERIOR DEL DASHBOARD SAAS (SIN BANNERS DE MARKETING) -->
        <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>
                    <div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-zinc-400 mb-1">
                        <span>Gestión Académica</span>
                        <span>/</span>
                        <span class="text-emerald-700 font-black">Catálogo Docente</span>
                    </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>Cursos & Temarios</span>
                    </h1>
                </div>

                <div class="flex items-center gap-2.5">
                    <a href="{% url 'studio:studio_categories' %}" class="px-4 py-2.5 bg-zinc-800 hover:bg-zinc-900 text-white rounded-xl font-bold text-xs uppercase tracking-wider shadow-sm transition-all flex items-center gap-1.5">
                        <c-lbi.rmx.price-tag-3 w="1rem" h="1rem" class="text-emerald-400" />
                        <span>Especialidades</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- CONTENEDOR PRINCIPAL DEL DASHBOARD -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 space-y-6">

            {% if messages %}
                <div class="mb-6 space-y-2">
                    {% for message in messages %}
                        <div class="p-4 rounded-xl text-xs font-bold {% if message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200{% else %}bg-emerald-50 text-emerald-800 border border-emerald-200{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Formulario Rápido de Creación de Curso (1 span) -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-3xl border border-zinc-200/80 shadow-xl p-6 sm:p-8 sticky top-28">
                        <h2 class="text-lg font-black text-zinc-900 mb-2 flex items-center gap-2">
                            <c-lbi.rmx.add-circle w="1.35rem" h="1.35rem" class="text-emerald-600 shrink-0" />
                            <span>Crear Nuevo Curso</span>
                        </h2>
                        <p class="text-xs text-zinc-500 font-medium mb-6">Ingresa el título y categoría. El curso nacerá como <span class="font-bold text-amber-600">Borrador</span> hasta que decidas publicarlo.</p>

                        <form method="post" action="{% url 'studio:studio_course_create' %}" class="space-y-4">
                            {% csrf_token %}
                            <div>
                                <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Título del Curso</label>
                                <input type="text" name="title" required
                                       class="w-full px-4 py-2.5 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                       placeholder="Ej: Calibración de Celdas de Carga">
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Categoría Metrológica</label>
                                <select name="category_id" required
                                        class="w-full px-4 py-2.5 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                    <option value="">Selecciona una categoría...</option>
                                    {% for cat in categories %}
                                        <option value="{{ cat.id }}">{{ cat.title }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Normativa o Estándar (ISO / OIML / NCh)</label>
                                <input type="text" name="iso_standard"
                                       class="w-full px-4 py-2.5 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                       placeholder="ISO/IEC 17025:2017">
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Resumen Corto</label>
                                <textarea name="short_description" rows="2" required
                                          class="w-full px-4 py-2.5 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                          placeholder="Resumen del programa y objetivos académicos..."></textarea>
                            </div>

                            <div class="pt-2">
                                <button type="submit"
                                        class="w-full py-3 px-6 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-black rounded-xl shadow-lg shadow-emerald-600/20 uppercase tracking-wider text-xs transition-all flex items-center justify-center gap-2">
                                    <c-lbi.rmx.add w="1.1rem" h="1.1rem" />
                                    <span>Crear y Estructurar Temario →</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Listado de Cursos del Docente (2 spans) -->
                <div class="lg:col-span-2 space-y-4">
                    <div class="bg-white rounded-3xl border border-zinc-200/80 shadow-xl p-6 sm:p-8">
                        <h2 class="text-lg font-black text-zinc-900 mb-6 flex items-center gap-2">
                            <c-lbi.rmx.book-open w="1.35rem" h="1.35rem" class="text-emerald-600 shrink-0" />
                            <span>Mis Programas de Especialización ({{ courses.count }})</span>
                        </h2>

                        <div class="space-y-4">
                            {% for c in courses %}
                                <div class="p-6 rounded-2xl bg-zinc-50 border border-zinc-200/80 hover:border-emerald-500 transition-all flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                                    <div class="space-y-1 max-w-lg">
                                        <div class="flex items-center gap-2">
                                            <span class="text-[10px] font-black uppercase tracking-wider px-2.5 py-0.5 bg-emerald-100 text-emerald-800 rounded-md">
                                                {{ c.category.title }}
                                            </span>
                                            {% if c.is_published %}
                                                <span class="text-[10px] font-black uppercase tracking-wider px-2.5 py-0.5 bg-green-100 text-green-800 rounded-md">
                                                    ● Publicado
                                                </span>
                                            {% else %}
                                                <span class="text-[10px] font-black uppercase tracking-wider px-2.5 py-0.5 bg-amber-100 text-amber-800 rounded-md">
                                                    ○ Borrador (No visible para alumnos)
                                                </span>
                                            {% endif %}
                                        </div>
                                        <h3 class="font-black text-base text-zinc-900">
                                            {{ c.title }}
                                        </h3>
                                        <p class="text-xs text-zinc-500 font-medium line-clamp-2">
                                            {{ c.short_description }}
                                        </p>
                                        <div class="text-[11px] text-zinc-400 pt-1 font-semibold flex items-center gap-3">
                                            <span class="flex items-center gap-1">
                                                <c-lbi.rmx.file-list w="0.9rem" h="0.9rem" class="text-zinc-400" />
                                                <span>Módulos: {{ c.modules.count }}</span>
                                            </span>
                                            <span>·</span>
                                            <span class="flex items-center gap-1">
                                                <c-lbi.rmx.check-double w="0.9rem" h="0.9rem" class="text-emerald-600" />
                                                <span>Norma: {{ c.iso_standard|default:"ISO 17025" }}</span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="flex sm:flex-col gap-2 shrink-0 sm:items-end">
                                        <a href="{% url 'studio:studio_course_curriculum' c.slug %}"
                                           class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-black uppercase text-[11px] tracking-wider rounded-xl shadow transition-colors text-center flex items-center justify-center gap-1.5">
                                            <c-lbi.rmx.file-list w="1rem" h="1rem" />
                                            <span>Temario / Lecciones →</span>
                                        </a>
                                        <a href="{% url 'studio:studio_course_edit' c.slug %}"
                                           class="px-4 py-2 bg-white hover:bg-zinc-100 text-zinc-800 border border-zinc-300 font-bold uppercase text-[11px] tracking-wider rounded-xl transition-colors text-center flex items-center justify-center gap-1.5">
                                            <c-lbi.rmx.settings-3 w="1rem" h="1rem" class="text-zinc-500" />
                                            <span>Configuración & Publicar</span>
                                        </a>
                                    </div>
                                </div>
                            {% empty %}
                                <div class="py-12 text-center text-zinc-400 font-medium">
                                    <p>Aún no has creado ningún curso o temario.</p>
                                    <p class="text-xs mt-1">Usa el formulario izquierdo para crear tu primer programa metrológico.</p>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</c-layouts.app>
