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

<!doctype html>
<html lang="es" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>Nueva Pregunta - {{ evaluacion.title }}</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') }}"
                                        >Evaluaciones</a
                                    >
                                </li>
                                <li class="breadcrumb-item">
                                    <a
                                        class="text-reset text-decoration-none link-dark"
                                        href="{{ url_for('instructor_profile.edit_evaluation', evaluation_id=evaluacion.id) }}"
                                        >{{ evaluacion.title }}</a
                                    >
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">Nueva Pregunta</li>
                            </ol>
                        </nav>
                    </h4>
                </div>

                <br />

                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Nueva Pregunta para: {{ evaluacion.title }}</h5>
                            </div>
                            <div class="card-body">
                                <form method="post">
                                    {{ form.hidden_tag() }}

                                    <div class="mb-3">
                                        {{ form.text.label(class="form-label") }} {{ form.text(class="form-control", rows="4")
                                        }} {% if form.text.errors %}
                                        <div class="text-danger">
                                            {% for error in form.text.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                    </div>

                                    <div class="mb-3">
                                        {{ form.type.label(class="form-label") }} {{ form.type(class="form-select") }} {% if
                                        form.type.errors %}
                                        <div class="text-danger">
                                            {% for error in form.type.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                        <div class="form-text">
                                            Las opciones de respuesta se crearán automáticamente según el tipo seleccionado.
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        {{ form.explanation.label(class="form-label") }} {{
                                        form.explanation(class="form-control", rows="3") }} {% if form.explanation.errors %}
                                        <div class="text-danger">
                                            {% for error in form.explanation.errors %}
                                            <small>{{ error }}</small>
                                            {% endfor %}
                                        </div>
                                        {% endif %}
                                        <div class="form-text">
                                            Explicación opcional que se mostrará después de que el estudiante responda.
                                        </div>
                                    </div>

                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-plus"></i> Crear Pregunta
                                        </button>
                                        <a
                                            href="{{ url_for('instructor_profile.edit_evaluation', evaluation_id=evaluacion.id) }}"
                                            class="btn btn-secondary"
                                        >
                                            <i class="bi bi-arrow-left"></i> Cancelar
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-title mb-0">Información de la Evaluación</h6>
                            </div>
                            <div class="card-body">
                                <p><strong>Título:</strong> {{ evaluacion.title }}</p>
                                {% if evaluacion.description %}
                                <p><strong>Descripción:</strong> {{ evaluacion.description }}</p>
                                {% endif %}
                                <p><strong>Tipo:</strong> {% if evaluacion.is_exam %}Examen{% else %}Evaluación{% endif %}</p>
                                <p><strong>Puntuación mínima:</strong> {{ evaluacion.passing_score }}%</p>
                                <p>
                                    <strong>Máximo intentos:</strong>
                                    {% if evaluacion.max_attempts %}{{ evaluacion.max_attempts }}{% else %}Ilimitado{% endif %}
                                </p>
                            </div>
                        </div>

                        <div class="card mt-3">
                            <div class="card-header">
                                <h6 class="card-title mb-0">Ayuda</h6>
                            </div>
                            <div class="card-body">
                                <h6>Tipos de Pregunta:</h6>
                                <ul class="small">
                                    <li>
                                        <strong>Opción múltiple:</strong> Se crearán 4 opciones que podrás editar
                                        posteriormente.
                                    </li>
                                    <li>
                                        <strong>Verdadero/Falso:</strong> Se crearán automáticamente las opciones "Verdadero" y
                                        "Falso".
                                    </li>
                                </ul>
                                <p class="small mt-2">
                                    Después de crear la pregunta, podrás editar las opciones de respuesta y marcar cuáles son
                                    correctas.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
