{% extends 'physics/exams.html' %}
{% block navigation %}
    {{ block.super }}
    {% include 'generic/exam_overview_headers.html' %}
{% endblock navigation %}

{% block content %}

    {% load thumbnail %}
    <div class="container physics my-3">

        <p class="mb-3">This exam will be available to take <a href="{% url 'physics:exam_start' pk=exam.pk %}">here</a> (when active).</p>

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Questions <small class="text-muted">({{ questions.count }})</small></h5>
                <div class="text-muted small">Exam: {{ exam.title }}</div>
            </div>

            <ul class="list-group list-group-flush" id="full-question-list-physics">
                {% for question in questions.all %}
                    <li class="list-group-item">
                        <div class="d-flex align-items-start">
                            <div class="me-3">
                                <span class="badge bg-secondary">{{ forloop.counter }}</span>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold mb-2">{{ question.stem|safe }}</div>

                                <div class="mb-2">
                                    <ol type="a" class="mb-0">
                                        <li class="d-flex justify-content-between align-items-start py-1">
                                            <div><span class="me-2">a)</span><span>{{ question.a }}</span></div>
                                            <div class="text-end">
                                                <div class="text-primary fw-semibold">{{ question.a_answer }}</div>
                                                {% if question.a_feedback %}
                                                    <div class="text-muted small">Feedback: {{ question.a_feedback }}</div>
                                                {% endif %}
                                            </div>
                                        </li>
                                        <li class="d-flex justify-content-between align-items-start py-1">
                                            <div><span class="me-2">b)</span><span>{{ question.b }}</span></div>
                                            <div class="text-end">
                                                <div class="text-primary fw-semibold">{{ question.b_answer }}</div>
                                                {% if question.b_feedback %}
                                                    <div class="text-muted small">Feedback: {{ question.b_feedback }}</div>
                                                {% endif %}
                                            </div>
                                        </li>
                                        <li class="d-flex justify-content-between align-items-start py-1">
                                            <div><span class="me-2">c)</span><span>{{ question.c }}</span></div>
                                            <div class="text-end">
                                                <div class="text-primary fw-semibold">{{ question.c_answer }}</div>
                                                {% if question.c_feedback %}
                                                    <div class="text-muted small">Feedback: {{ question.c_feedback }}</div>
                                                {% endif %}
                                            </div>
                                        </li>
                                        <li class="d-flex justify-content-between align-items-start py-1">
                                            <div><span class="me-2">d)</span><span>{{ question.d }}</span></div>
                                            <div class="text-end">
                                                <div class="text-primary fw-semibold">{{ question.d_answer }}</div>
                                                {% if question.d_feedback %}
                                                    <div class="text-muted small">Feedback: {{ question.d_feedback }}</div>
                                                {% endif %}
                                            </div>
                                        </li>
                                        <li class="d-flex justify-content-between align-items-start py-1">
                                            <div><span class="me-2">e)</span><span>{{ question.e }}</span></div>
                                            <div class="text-end">
                                                <div class="text-primary fw-semibold">{{ question.e_answer }}</div>
                                                {% if question.e_feedback %}
                                                    <div class="text-muted small">Feedback: {{ question.e_feedback }}</div>
                                                {% endif %}
                                            </div>
                                        </li>
                                    </ol>
                                </div>

                                <div class="small text-muted">
                                    Category: {{ question.category }}
                                    — <a href="{% url 'physics:question_detail' pk=question.pk %}">View</a>
                                    <a href="{% url 'admin:physics_question_change' question.id %}" class="ms-2">Edit</a>
                                </div>
                            </div>
                        </div>
                    </li>
                {% empty %}
                    <li class="list-group-item text-muted">No questions available.</li>
                {% endfor %}
            </ul>
        </div>

    </div>

    {% include 'exam_overview_js.html' %}

{% endblock %}

{% block css %}
    <style>
        /* Small visual tweaks on top of Bootstrap */
        .question-feedback { opacity: 0.7; }
        .list-group-item ol { margin: 0; padding-left: 1.4rem; }
        .list-group-item li { list-style-position: inside; }
    </style>
{% endblock %}