<div class="card mb-3" hx-on="htmx:afterSwap: initAnatomyFragment(this)">
    <div class="card-body">
        <p class="lead">{{ question.question_type }}</p>
        <div id="anatomy-dicom-image" class="dicom-image-legacy" data-url="{{ question.get_image_url }}"
             data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
        </div>
        <p class="mt-2">
           Answer: {{ question.get_primary_answer }}
        </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="mt-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Marked answers</h6>
                <div class="d-flex align-items-center gap-2">
                    <div class="small text-muted">{{ question.answers.all|length }}</div>
                    <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#marked-answers-{{ question.pk }}" aria-expanded="false" aria-controls="marked-answers-{{ question.pk }}">Show answers</button>
                </div>
            </div>

            <div class="collapse mt-2" id="marked-answers-{{ question.pk }}">
                <ul class="list-group">
                    {% for answer in question.answers.all|dictsortreversed:"status" %}
                        <li class="list-group-item d-flex justify-content-between align-items-start{% if answer.status == '2' %} list-group-item-success{% elif answer.status == '1' %} list-group-item-warning{% elif answer.status == '0' %} list-group-item-secondary{% endif %}">
                            <div>
                                {% if answer.proposed %}
                                    <small class="text-muted me-2">(proposed)</small>
                                {% endif %}
                                <span>{{ answer.answer }}</span>
                            </div>
                            <div>
                                {% if answer.status == '2' %}
                                    <span class="badge bg-success">Correct</span>
                                {% elif answer.status == '1' %}
                                    <span class="badge bg-warning text-dark">Half mark</span>
                                {% elif answer.status == '0' %}
                                    <span class="badge bg-secondary">Incorrect</span>
                                {% else %}
                                    <span class="badge bg-light text-muted">Unmarked</span>
                                {% endif %}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        {# Aggregated summary placeholder — auto-load via HTMX #}
        <div class="mt-3">
            <h6>Response summary</h6>
            <div id="anatomy-response-summary"
                 hx-get="{% url 'anatomy:exam_review_question_summary' exam.pk q_index %}"
                 hx-trigger="load"
                 hx-swap="innerHTML"
                 hx-indicator="#anatomy-summary-indicator-{{ question.pk }}">
                <div id="anatomy-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> #anatomy-summary-indicator-{{ question.pk }}.htmx-request{display:inline-block !important;} </style>
                <div class="small text-muted">Loading summary…</div>
            </div>
        </div>

        {# Responses: load on demand #}
        <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 'anatomy:exam_review_question_responses' exam.pk q_index %}"
                            hx-target="#anatomy-responses-container"
                            hx-swap="innerHTML"
                            hx-indicator="#anatomy-responses-indicator-{{ question.pk }}">Show responses</button>
                </div>
            </div>
            <div class="mt-2" id="anatomy-responses-container">
                <div id="anatomy-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> #anatomy-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>

