{# Aggregated response summary partial for physics questions (HTMX-loadable) #}
<div id="physics-response-summary-content">
    {% if exam_response_total %}
        <div class="small text-muted mb-2">Total responses: {{ exam_response_total }}</div>
        {# Per-part TF breakdown (A-E) #}
        {% if per_part_stats %}
            <div class="row mb-3">
                {% for part in per_part_stats %}
                    {# colour by percent-correct: green >=75, warning >=50, red otherwise #}
                    <div class="col-md-2">
                        <div class="card">
                            <div class="card-body p-2 text-center {% if part.correct_pct >= 75 %}border border-success{% elif part.correct_pct >= 50 %}border border-warning{% elif part.correct_pct > 0 %}border border-danger{% endif %}">
                                <div class="small text-muted">{{ part.part|upper }}</div>
                                <div class="h5 mb-0">{{ part.correct_count }} / {{ part.total }}</div>
                                <div class="small text-muted">Correct: {{ part.correct_pct }}%</div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
        <div class="row mb-2">
            <div class="col-auto">Correct:</div>
            <div class="col">
                {% if exam_response_correct_count is not None %}
                    <strong>{{ exam_response_correct_count }}</strong>
                    {% if exam_response_correct_pct is not None %}
                        <span class="text-muted">({{ exam_response_correct_pct }}%)</span>
                    {% endif %}
                {% else %}
                    <span class="text-muted">N/A</span>
                {% endif %}
            </div>
        </div>

        <div class="list-group mb-2">
            {# Render top-level answer breakdown from exam_response_counts and pcts #}
            {% for item in exam_response_items %}
                <div class="list-group-item">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <div>
                            {% if item.parts %}
                                <div class="d-flex gap-1 align-items-center">
                                    {% for part in item.parts %}
                                        {% with pstats=per_part_stats|get_item:forloop.counter0 %}
                                            {% if pstats %}
                                                {% if pstats.correct_pct >= 75 %}
                                                    <span class="badge border border-success text-success bg-white">{{ part.value|yesno:"T,F" }}</span>
                                                {% elif pstats.correct_pct >= 50 %}
                                                    <span class="badge border border-warning text-warning bg-white">{{ part.value|yesno:"T,F" }}</span>
                                                {% else %}
                                                    <span class="badge border border-danger text-danger bg-white">{{ part.value|yesno:"T,F" }}</span>
                                                {% endif %}
                                            {% else %}
                                                {% if part.is_correct == True %}
                                                    <span class="badge border border-success text-success bg-white">{{ part.value|yesno:"T,F" }}</span>
                                                {% elif part.is_correct == False %}
                                                    <span class="badge border border-danger text-danger bg-white">{{ part.value|yesno:"T,F" }}</span>
                                                {% else %}
                                                    <span class="badge border border-secondary text-muted bg-white">{{ part.value|default:"-" }}</span>
                                                {% endif %}
                                            {% endif %}
                                        {% endwith %}
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div>{{ item.key }}</div>
                            {% endif %}
                        </div>
                        <div class="text-end"><strong>{{ item.count }}</strong> <small class="text-muted">{{ item.pct }}%</small></div>
                    </div>
                    <div class="progress mt-2" style="height:12px;">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: {{ item.pct }}%;" aria-valuenow="{{ item.pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div>
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-1">Correct answer</h6>
                <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#correct-answer-{{ q_index }}" aria-expanded="false" aria-controls="correct-answer-{{ q_index }}">
                    Show
                </button>
            </div>
            <div class="collapse mt-2" id="correct-answer-{{ q_index }}">
                {% if correct_answer %}
                    <div class="small">{{ correct_answer }}</div>
                {% else %}
                    <div class="small text-muted">No correct answer available.</div>
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="small text-muted">No responses recorded for this question in the exam yet.</div>
    {% endif %}
</div>