{% extends "base.html" %}

{% block content %}
<div class="hero section">
    <h1>GESTIÓN DE AULAS</h1>
    <p class="text-dim">Administra tus cursos y monitorea la asistencia.</p>
</div>

<div class="glass" style="padding: 2rem; border-radius: 1rem; margin-bottom: 2rem;">
    <h3>Crear Nuevo Curso</h3>
    <form action="{{ url_for('create_course') }}" method="POST" style="display: flex; gap: 1rem; margin-top: 1rem;">
        <input type="text" name="name" placeholder="Nombre del Aula / Curso (Ej: Robótica 101)" required>
        <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Crear</button>
    </form>
</div>

<div class="card-grid">
    {% for course in courses %}
    <div class="card glass" style="text-align: left; align-items: flex-start; position: relative;">
        <a href="{{ url_for('course_details', course_id=course.id) }}"
            style="text-decoration: none; color: inherit; flex: 1;">
            <div style="display: flex; justify-content: space-between; width: 100%;">
                <h2 style="margin: 0;">{{ course.name }}</h2>
                <i class="fas fa-chalkboard-teacher" style="font-size: 1.5rem; margin: 0;"></i>
            </div>
            <p class="text-dim" style="margin-top: 1rem;">{{ course.students|length }} Estudiantes inscritos</p>
        </a>
        <form action="{{ url_for('delete_course', course_id=course.id) }}" method="POST"
            style="position: absolute; top: 1rem; right: 1rem;" onsubmit="return confirm('¿Eliminar este curso?');">
            <button type="submit" class="btn"
                style="background: rgba(239, 68, 68, 0.2); color: #ef4444; padding: 0.5rem; border-radius: 0.5rem;">
                <i class="fas fa-trash"></i>
            </button>
        </form>
    </div>
    {% else %}
    <div style="grid-column: 1 / -1; text-align: center; color: var(--text-dim);">
        <p>No hay cursos creados. ¡Crea el primero arriba!</p>
    </div>
    {% endfor %}
</div>
{% endblock %}