{% set current_theme = current_theme() %} {% set config = config() %}

<!doctype html>
<html lang="es" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>Nueva Evaluación</title>
        {{ current_theme.local_style() }}
    </head>

    <body>
        {{ current_theme.navbar() }}

        <main>
            {{ current_theme.notify() }}
            <br />

            <div class="container">
                <div class="d-flex justify-content-between border-bottom">
                    <h4>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a
                                        class="text-reset text-decoration-none link-dark"
                                        href="{{ url_for('instructor_profile.pagina_instructor') }}"
                                        >Panel Instructor</a
                                    >
                                </li>
                                <li class="breadcrumb-item">
                                    <a
                                        class="text-reset text-decoration-none link-dark"
                                        href="{{ url_for('instructor_profile.evaluaciones_lista') }}"
                                        >Mis Evaluaciones</a
                                    >
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Nueva Evaluación</li>
                            </ol>
                        </nav>
                    </h4>
                </div>

                <div class="row">
                    <div class="col-md-8 offset-md-2">
                        <div class="card">
                            <div class="card-header">
                                <h3>Nueva Evaluación</h3>
                                <p class="mb-0 text-muted">Seleccione el curso y la sección donde desea crear la evaluación</p>
                            </div>

                            <div class="card-body">
                                {% if cursos %}
                                <div class="alert alert-info">
                                    <h6>Información:</h6>
                                    <ul class="mb-0">
                                        <li>Seleccione el curso y luego la sección donde desea crear la evaluación.</li>
                                        <li>Solo puede crear evaluaciones en cursos asignados a usted.</li>
                                        <li>Las evaluaciones se asocian a secciones específicas del curso.</li>
                                    </ul>
                                </div>

                                <div class="row">
                                    {% for curso in cursos %}
                                    <div class="col-md-6 mb-4">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5 class="mb-0">{{ curso.nombre }}</h5>
                                                <small class="text-muted">{{ curso.codigo }}</small>
                                            </div>
                                            <div class="card-body">
                                                {% if curso.descripcion_corta %}
                                                <p class="card-text">{{ curso.descripcion_corta }}</p>
                                                {% endif %} {% set secciones = get_course_sections(curso.codigo) %} {% if
                                                secciones %}
                                                <h6>Secciones disponibles:</h6>
                                                <div class="list-group list-group-flush">
                                                    {% for seccion in secciones %}
                                                    <div
                                                        class="list-group-item d-flex justify-content-between align-items-center"
                                                    >
                                                        <div>
                                                            <strong>{{ seccion.nombre }}</strong>
                                                            {% if seccion.descripcion %}
                                                            <br /><small class="text-muted"
                                                                >{{ seccion.descripcion[:50] }}{% if seccion.descripcion|length
                                                                > 50 %}...{% endif %}</small
                                                            >
                                                            {% endif %}
                                                        </div>
                                                        <a
                                                            href="{{ url_for('instructor_profile.new_evaluation', course_code=curso.codigo, section_id=seccion.id) }}"
                                                            class="btn btn-primary btn-sm"
                                                        >
                                                            <i class="bi bi-plus"></i> Crear Evaluación
                                                        </a>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                                {% else %}
                                                <div class="alert alert-warning">
                                                    <i class="bi bi-exclamation-triangle"></i>
                                                    Este curso no tiene secciones creadas.
                                                    <br />
                                                    <a
                                                        href="{{ url_for('course.tomar_curso', course_code=curso.codigo) }}"
                                                        class="btn btn-sm btn-outline-primary mt-2"
                                                    >
                                                        Administrar Curso
                                                    </a>
                                                </div>
                                                {% endif %}
                                            </div>
                                            <div class="card-footer text-muted">
                                                <small>
                                                    Nivel: {% if curso.nivel == 0 %}Introductorio {% elif curso.nivel == 1
                                                    %}Principiante {% elif curso.nivel == 2 %}Intermedio {% elif curso.nivel ==
                                                    3 %}Avanzado {% else %}{{ curso.nivel }} {% endif %} {% if curso.pagado %}
                                                    | <span class="badge bg-warning">Pagado</span> {% endif %} {% if not
                                                    curso.publico %} | <span class="badge bg-secondary">Privado</span>
                                                    {% endif %}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <div class="alert alert-warning text-center">
                                    <i class="bi bi-exclamation-triangle"></i>
                                    <h5>No hay cursos asignados</h5>
                                    <p>
                                        No tiene cursos asignados para crear evaluaciones. Contacte al administrador o cree un
                                        curso primero.
                                    </p>
                                    <a href="{{ url_for('course.nuevo_curso') }}" class="btn btn-primary">
                                        <i class="bi bi-plus"></i> Crear Nuevo Curso
                                    </a>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <script>
            // Add some interactivity for better UX
            document.addEventListener("DOMContentLoaded", function () {
                // Highlight cards on hover
                const cards = document.querySelectorAll(".card")
                cards.forEach((card) => {
                    card.addEventListener("mouseenter", function () {
                        this.style.transform = "translateY(-2px)"
                        this.style.boxShadow = "0 4px 8px rgba(0,0,0,0.1)"
                        this.style.transition = "all 0.2s ease"
                    })

                    card.addEventListener("mouseleave", function () {
                        this.style.transform = "translateY(0)"
                        this.style.boxShadow = ""
                    })
                })
            })
        </script>
    </body>
</html>
