<c-layouts.app title="Editar Curso: {{ course.title }} | Studio Lo Justo">
    <div class="bg-zinc-100 min-h-screen pb-20">
        <!-- BARRA SUPERIOR DEL DASHBOARD 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>
                    <div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-zinc-400 mb-1">
                        <span>Gestión Docente</span>
                        <span>/</span>
                        <span class="text-emerald-700 font-black">Edición de Programa</span>
                    </div>
                    <h1 class="text-2xl font-black text-zinc-900 flex items-center gap-2.5">
                        <c-lbi.rmx.edit-box w="1.5rem" h="1.5rem" class="text-emerald-600" />
                        <span>Configurar: {{ course.title }}</span>
                    </h1>
                </div>

                <div class="flex items-center gap-3">
                    <a href="{% url 'studio:studio_course_curriculum' course.slug %}" class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold text-xs uppercase tracking-wider shadow-sm transition-all flex items-center gap-1.5">
                        <c-lbi.rmx.file-list w="1rem" h="1rem" />
                        <span>Gestionar Temario</span>
                    </a>
                    <a href="{% url 'studio:studio_courses' %}" 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.arrow-left w="1rem" h="1rem" />
                        <span>Volver a Cursos</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pt-8">
            <div class="bg-white rounded-3xl border border-zinc-200/80 shadow-sm p-8">
                <form method="post" action="{% url 'studio:studio_course_edit' course.slug %}" class="space-y-6">
                    {% csrf_token %}

                    <div>
                        <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Título del Programa Metrológico</label>
                        <input type="text" name="title" value="{{ course.title }}" required
                               class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Categoría</label>
                            <select name="category_id" required
                                    class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                {% for cat in categories %}
                                    <option value="{{ cat.id }}" {% if cat.id == course.category.id %}selected{% endif %}>{{ cat.title }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Normativa Técnica (ISO / NCh)</label>
                            <input type="text" name="iso_standard" value="{{ course.iso_standard|default:'ISO/IEC 17025:2017' }}"
                                   class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Resumen Corto (Para Tarjetas del Catálogo)</label>
                        <textarea name="short_description" rows="2" required
                                  class="w-full px-4 py-3 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">{{ course.short_description }}</textarea>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-zinc-700 uppercase tracking-wider mb-1">Descripción Completa y Objetivos Académicos (Markdown)</label>
                        <textarea name="description" rows="6" required
                                  class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-mono focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500">{{ course.description }}</textarea>
                    </div>

                    <div class="p-4 bg-emerald-50 rounded-2xl border border-emerald-200 flex items-center justify-between">
                        <div>
                            <span class="block text-sm font-black text-emerald-900">¿Publicar este curso en el LMS?</span>
                            <span class="text-xs text-emerald-700 font-medium">Si está desmarcado, el curso permanecerá como borrador privado.</span>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="is_published" class="sr-only peer" {% if course.is_published %}checked{% endif %}>
                            <div class="w-11 h-6 bg-zinc-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                        </label>
                    </div>

                    <div class="pt-4 flex items-center justify-end space-x-3">
                        <a href="{% url 'studio:studio_courses' %}" class="px-6 py-3 bg-zinc-100 hover:bg-zinc-200 text-zinc-700 font-bold rounded-xl text-xs uppercase tracking-wider transition-colors">
                            Cancelar
                        </a>
                        <button type="submit" class="px-8 py-3 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 text-white font-black rounded-xl shadow-lg shadow-emerald-600/20 uppercase tracking-wider text-xs transition-transform transform hover:-translate-y-0.5 flex items-center gap-2">
                            <c-lbi.rmx.save w="1.1rem" h="1.1rem" />
                            <span>Guardar Cambios →</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</c-layouts.app>
