<div class="card mb-3">
    <div class="card-body">
        <h5 class="card-title">Question</h5>
        <p class="lead">{{ question|safe }}</p>

        <div class="mt-3">
            <h6>Parts</h6>
            <ul class="list-group">
                {% if question.get_questions %}
                    {% for question, answer, feedback in question.get_questions_and_answers_and_feedback %}
                        <li class="list-group-item d-flex justify-content-between align-items-start">
                            <div>
                                <strong>Part {{ forloop.counter }}.</strong>
                                <span class="ms-2">{{ question }}</span>
                            </div>
                            <div>
                                <span class="badge bg-primary">Answer: {{ answer }}</span>
                                <span class="ms-2 fst-italic opacity-75">{{ feedback }}</span>
                            </div>
                        </li>
                    {% endfor %}
                {% else %}
                    <li class="list-group-item">No parts defined for this question.</li>
                {% endif %}
            </ul>
        </div>

        <p class="mt-2">
            <a class="btn btn-sm btn-outline-secondary" href="{% url app_name|add:':question_detail' question.pk %}" target="_blank">View full question details</a>
        </p>

        <div class="mt-3">
            <h6>Response summary</h6>
            <div id="physics-response-summary"
                 hx-get="{% url 'physics:exam_review_question_summary' exam.pk q_index %}"
                 hx-trigger="load"
                 hx-swap="innerHTML"
                 hx-indicator="#physics-summary-indicator-{{ question.pk }}">
                <div id="physics-summary-indicator-{{ question.pk }}" style="display:none">
                    <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
                    <span class="visually-hidden">Loading summary</span>
                </div>
                <style> #physics-summary-indicator-{{ question.pk }}.htmx-request{display:inline-block !important;} </style>
                <div class="small text-muted">Loading summary…</div>
            </div>
        </div>

        <div class="mt-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Responses in this exam</h6>
                <div>
                    <button class="btn btn-sm btn-outline-primary"
                            hx-get="{% url 'physics:exam_review_question_responses' exam.pk q_index %}"
                            hx-target="#physics-responses-container"
                            hx-swap="innerHTML"
                            hx-indicator="#physics-responses-indicator-{{ question.pk }}">Show responses</button>
                </div>
            </div>
            <div class="mt-2" id="physics-responses-container">
                <div id="physics-responses-indicator-{{ question.pk }}" style="display:none">
                    <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
                    <span class="visually-hidden">Loading responses</span>
                </div>
                <style> #physics-responses-indicator-{{ question.pk }}.htmx-request{display:inline-block !important;} </style>
                <div class="text-muted small">Responses are hidden — click “Show responses” to load.</div>
            </div>
        </div>

        <div class="d-flex justify-content-between mt-3">
            {% if prev_index is not None %}
                <a class="btn btn-outline-primary"
                   hx-get="{% url app_name|add:':exam_review_question' exam.pk prev_index %}"
                   hx-target="#review-content"
                   hx-swap="innerHTML"
                   hx-push-url="true">&larr; Previous</a>
            {% else %}
                <span></span>
            {% endif %}

            {% if next_index is not None %}
                <a class="btn btn-primary"
                   hx-get="{% url app_name|add:':exam_review_question' exam.pk next_index %}"
                   hx-target="#review-content"
                   hx-swap="innerHTML"
                   hx-push-url="true">Next &rarr;</a>
            {% else %}
                <a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
            {% endif %}
        </div>

    </div>
</div>
<div class="card mb-3">
    <div class="card-body">
        <div class="mb-2"><span class="badge bg-primary">Physics</span></div>
        <h5 class="card-title">Question</h5>
        <p class="lead">{{ question }}</p>

        <p>
            <a class="btn btn-sm btn-outline-secondary" href="{% url app_name|add:':question_detail' question.pk %}" target="_blank">View full question details</a>
        </p>

        <div class="d-flex justify-content-between mt-3">
            {% if prev_index is not None %}
                <a class="btn btn-outline-primary"
                   hx-get="{% url app_name|add:':exam_review_question' exam.pk prev_index %}"
                   hx-target="#review-content"
                   hx-swap="innerHTML"
                   hx-push-url="true">&larr; Previous</a>
            {% else %}
                <span></span>
            {% endif %}

            {% if next_index is not None %}
                <a class="btn btn-primary"
                   hx-get="{% url app_name|add:':exam_review_question' exam.pk next_index %}"
                   hx-target="#review-content"
                   hx-swap="innerHTML"
                   hx-push-url="true">Next &rarr;</a>
            {% else %}
                <a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
            {% endif %}
        </div>
    </div>
</div>
