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

<!doctype html>
<html lang="es" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>Editar Opción - {{ option.text[:30] }}...</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">Editar Opción</li>
                            </ol>
                        </nav>
                    </h4>
                </div>

                <br />

                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5>Editar Opción</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <strong>Pregunta:</strong>
                                    <p class="text-muted">{{ question.text }}</p>
                                    <span class="badge bg-info"
                                        >{{ "Verdadero/Falso" if question.type == "boolean" else "Opción Múltiple" }}</span
                                    >
                                </div>

                                <hr />

                                <form method="POST">
                                    {{ form.hidden_tag() }}

                                    <div class="mb-3">
                                        {{ form.text.label(class="form-label") }} {{ form.text(class="form-control") }} {% 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">
                                        <div class="form-check">
                                            {{ form.is_correct(class="form-check-input") }} {{
                                            form.is_correct.label(class="form-check-label") }}
                                        </div>
                                        <small class="form-text text-muted">
                                            Marque esta casilla si esta es la respuesta correcta.
                                        </small>
                                    </div>

                                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                        <a
                                            href="{{ url_for('instructor_profile.edit_evaluation', evaluation_id=evaluacion.id) }}"
                                            class="btn btn-outline-secondary me-md-2"
                                        >
                                            Cancelar
                                        </a>
                                        <button type="submit" class="btn btn-primary">Actualizar Opción</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h6>Información</h6>
                            </div>
                            <div class="card-body">
                                <p class="card-text">
                                    <small class="text-muted">
                                        Edite el texto de la opción y marque si es correcta o no.
                                    </small>
                                </p>
                                <p class="card-text">
                                    <small class="text-muted">
                                        {% if question.type == "boolean" %} En preguntas de Verdadero/Falso, solo una opción
                                        debe ser correcta. {% else %} En preguntas de opción múltiple, puede haber múltiples
                                        opciones correctas. {% endif %}
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
