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

        {# Use per-field answers (a..e) from sbas Question model and highlight the best answer #}
        <div class="mt-3">
            <h6>Answers</h6>
            <ul class="list-group">
                {% if question.a_answer %}
                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'a' %} list-group-item-success{% endif %}">
                        <div class="mb-2 mb-md-0">
                            <strong class="me-2">A.</strong>
                            <span class="answer-content">{{ question.a_answer|safe }}</span>
                            {% if question.a_feedback %}
                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.a_feedback|safe }}</span></div>
                            {% endif %}
                        </div>
                        <div>
                            {% if question.best_answer == 'a' %}
                                <span class="badge bg-success">Correct</span>
                            {% else %}
                                <span class="badge bg-light text-muted">&nbsp;</span>
                            {% endif %}
                        </div>
                    </li>
                {% endif %}

                {% if question.b_answer %}
                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'b' %} list-group-item-success{% endif %}">
                        <div class="mb-2 mb-md-0">
                            <strong class="me-2">B.</strong>
                            <span class="answer-content">{{ question.b_answer|safe }}</span>
                            {% if question.b_feedback %}
                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.b_feedback|safe }}</span></div>
                            {% endif %}
                        </div>
                        <div>
                            {% if question.best_answer == 'b' %}
                                <span class="badge bg-success">Correct</span>
                            {% else %}
                                <span class="badge bg-light text-muted">&nbsp;</span>
                            {% endif %}
                        </div>
                    </li>
                {% endif %}

                {% if question.c_answer %}
                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'c' %} list-group-item-success{% endif %}">
                        <div class="mb-2 mb-md-0">
                            <strong class="me-2">C.</strong>
                            <span class="answer-content">{{ question.c_answer|safe }}</span>
                            {% if question.c_feedback %}
                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.c_feedback|safe }}</span></div>
                            {% endif %}
                        </div>
                        <div>
                            {% if question.best_answer == 'c' %}
                                <span class="badge bg-success">Correct</span>
                            {% else %}
                                <span class="badge bg-light text-muted">&nbsp;</span>
                            {% endif %}
                        </div>
                    </li>
                {% endif %}

                {% if question.d_answer %}
                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'd' %} list-group-item-success{% endif %}">
                        <div class="mb-2 mb-md-0">
                            <strong class="me-2">D.</strong>
                            <span class="answer-content">{{ question.d_answer|safe }}</span>
                            {% if question.d_feedback %}
                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.d_feedback|safe }}</span></div>
                            {% endif %}
                        </div>
                        <div>
                            {% if question.best_answer == 'd' %}
                                <span class="badge bg-success">Correct</span>
                            {% else %}
                                <span class="badge bg-light text-muted">&nbsp;</span>
                            {% endif %}
                        </div>
                    </li>
                {% endif %}

                {% if question.e_answer %}
                    <li class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start{% if question.best_answer == 'e' %} list-group-item-success{% endif %}">
                        <div class="mb-2 mb-md-0">
                            <strong class="me-2">E.</strong>
                            <span class="answer-content">{{ question.e_answer|safe }}</span>
                            {% if question.e_feedback %}
                                <div class="small text-muted mt-1">Feedback: <span class="feedback-content">{{ question.e_feedback|safe }}</span></div>
                            {% endif %}
                        </div>
                        <div>
                            {% if question.best_answer == 'e' %}
                                <span class="badge bg-success">Correct</span>
                            {% else %}
                                <span class="badge bg-light text-muted">&nbsp;</span>
                            {% endif %}
                        </div>
                    </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>

        {# Aggregated summary: HTMX-loaded automatically on fragment load #}
        <div class="mt-3">
            <h6>Response summary</h6>
            <div id="response-summary"
                 hx-get="{% url 'sbas:exam_review_question_summary' exam.pk q_index %}"
                 hx-trigger="load"
                 hx-swap="innerHTML">
                <div class="small text-muted">Loading summary…</div>
            </div>
        </div>

        {# Responses partial: load on demand via HTMX. Button fetches partial into #responses-container #}
        <div class="mt-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <button class="btn btn-sm btn-outline-primary"
                            hx-get="{% url 'sbas:exam_review_question_responses' exam.pk q_index %}"
                            hx-target="#responses-container"
                            hx-swap="innerHTML">Show responses</button>
                </div>
            </div>
            <div class="mt-2" id="responses-container">
                <div class="text-muted small">Responses are hidden — click “Show responses” to load.</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>
