{# Responses partial for physics question within an exam. HTMX-loadable. #}
<div id="physics-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 'physics:exam_review_question_responses' exam.pk q_index %}" hx-target="#physics-responses-container" hx-swap="outerHTML">Hide respondents</button>
            {% else %}
                <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'physics:exam_review_question_responses' exam.pk q_index %}?reveal=1" hx-target="#physics-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 class="mt-1">Answer:
                        <div class="d-flex gap-1 mt-1">
                            {# Show parts A-E as coloured badges indicating correctness #}
                            <div class="d-flex align-items-center">
                                <span class="me-1 small text-muted">A</span>
                                {% if ua.a is None %}
                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                {% elif ua.a == question.a_answer %}
                                    <span class="badge border border-success text-success bg-white">{{ ua.a|yesno:"T,F" }}</span>
                                {% else %}
                                    <span class="badge border border-danger text-danger bg-white">{{ ua.a|yesno:"T,F" }}</span>
                                {% endif %}
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="me-1 small text-muted">B</span>
                                {% if ua.b is None %}
                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                {% elif ua.b == question.b_answer %}
                                    <span class="badge border border-success text-success bg-white">{{ ua.b|yesno:"T,F" }}</span>
                                {% else %}
                                    <span class="badge border border-danger text-danger bg-white">{{ ua.b|yesno:"T,F" }}</span>
                                {% endif %}
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="me-1 small text-muted">C</span>
                                {% if ua.c is None %}
                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                {% elif ua.c == question.c_answer %}
                                    <span class="badge border border-success text-success bg-white">{{ ua.c|yesno:"T,F" }}</span>
                                {% else %}
                                    <span class="badge border border-danger text-danger bg-white">{{ ua.c|yesno:"T,F" }}</span>
                                {% endif %}
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="me-1 small text-muted">D</span>
                                {% if ua.d is None %}
                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                {% elif ua.d == question.d_answer %}
                                    <span class="badge border border-success text-success bg-white">{{ ua.d|yesno:"T,F" }}</span>
                                {% else %}
                                    <span class="badge border border-danger text-danger bg-white">{{ ua.d|yesno:"T,F" }}</span>
                                {% endif %}
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="me-1 small text-muted">E</span>
                                {% if ua.e is None %}
                                    <span class="badge border border-secondary text-muted bg-white">N/A</span>
                                {% elif ua.e == question.e_answer %}
                                    <span class="badge border border-success text-success bg-white">{{ ua.e|yesno:"T,F" }}</span>
                                {% else %}
                                    <span class="badge border border-danger text-danger bg-white">{{ ua.e|yesno:"T,F" }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% if ua.created_date %}
                        <div class="small text-muted">Answered: {{ ua.created_date }}</div>
                    {% endif %}
                </div>
                <div>
                    {# Physics scoring may be numeric; show a simple badge if fully correct according to score field where present #}
                    {% if ua.score %}
                        {% if ua.score|stringformat:'s' == '5' %}
                            <span class="badge bg-success">Correct</span>
                        {% else %}
                            <span class="badge bg-secondary">Score: {{ ua.score }}</span>
                        {% endif %}
                    {% else %}
                        <span class="badge bg-light text-muted">Unmarked</span>
                    {% endif %}
                </div>
            </li>
        {% empty %}
            <li class="list-group-item">No responses recorded for this exam.</li>
        {% endfor %}
    </ul>
</div>