{# Partial: responses for a question within an exam. Rendered server-side or via HTMX. #}
<div id="responses-container">
    <h6>Responses in this exam</h6>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="small text-muted">List of candidate answers recorded for this question in the current exam.</div>
        <div>
            {% if reveal_respondents %}
                <button class="btn btn-sm btn-outline-secondary" hx-get="{% url 'sbas:exam_review_question_responses' exam.pk q_index %}" hx-target="#responses-container" hx-swap="outerHTML">Hide respondents</button>
            {% else %}
                <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'sbas:exam_review_question_responses' exam.pk q_index %}?reveal=1" hx-target="#responses-container" hx-swap="outerHTML">Show respondents</button>
            {% endif %}
        </div>
    </div>

    <ul class="list-group">
        {% for ua in exam_user_answers %}
            <li class="list-group-item d-flex justify-content-between align-items-start">
                <div>
                    {% if reveal_respondents %}
                        {% if ua.user %}
                            <strong>{{ ua.user.get_full_name|default:ua.user.username }}</strong>
                        {% else %}
                            <strong>Anonymous</strong>
                        {% endif %}
                    {% else %}
                        <strong>Respondent {{ forloop.counter }}</strong>
                    {% endif %}
                    <div>Answer: <strong>{{ ua.answer }}</strong></div>
                    {% if ua.created_date %}
                        <div class="small text-muted">Answered: {{ ua.created_date }}</div>
                    {% endif %}
                </div>
                <div>
                    {% if ua.answer == question.best_answer %}
                        <span class="badge bg-success">Correct</span>
                    {% else %}
                        <span class="badge bg-secondary">Incorrect</span>
                    {% endif %}
                </div>
            </li>
        {% empty %}
            <li class="list-group-item">No responses recorded for this exam.</li>
        {% endfor %}