{# Responses partial for anatomy question within an exam. HTMX-loadable. #}
<div id="anatomy-responses-container">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            <h6 class="mb-0">Responses in this exam</h6>
            <div class="small text-muted">List of candidate answers recorded for this question in the current exam.</div>
        </div>
        <div>
            {% if not reveal_respondents %}
                <button type="button" class="btn btn-sm btn-outline-primary show-respondents-btn"
                        hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1"
                        hx-target="#anatomy-responses-container"
                        hx-swap="outerHTML"
                        data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1"
                >Show respondents</button>
            {% else %}
                <button type="button" class="btn btn-sm btn-outline-secondary show-respondents-btn"
                        hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}"
                        hx-target="#anatomy-responses-container"
                        hx-swap="outerHTML"
                        data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}"
                >Hide respondents</button>
            {% endif %}
        </div>
    </div>
    <ul class="list-group">
        {% for item in exam_user_answers %}
            {% with ua=item.ua %}
                <li class="list-group-item d-flex justify-content-between align-items-start">
                    <div>
                        {% if reveal_respondents %}
                            {% if item.display_name_raw %}
                                <strong>{{ item.display_name_raw }}</strong>
                            {% else %}
                                <strong>{{ ua.get_candidate_masked }}</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.score == '2' %}
                            <span class="badge bg-success">Correct</span>
                        {% elif ua.score == '1' %}
                            <span class="badge bg-warning text-dark">Half mark</span>
                        {% elif ua.score == '0' %}
                            <span class="badge bg-secondary">Incorrect</span>
                        {% else %}
                            <span class="badge bg-light text-muted">Unmarked</span>
                        {% endif %}
                    </div>
                </li>
            {% endwith %}
        {% empty %}
            <li class="list-group-item">No responses recorded for this exam.</li>
        {% endfor %}
    </ul>
</div>

<script>
// Fallback for environments where HTMX isn't active or the hx-* attributes don't trigger.
// Attach a click handler to buttons with class .show-respondents-btn that will fetch
// the fragment URL (from data-url) and replace the container content.
    (function(){
        try {
            var els = document.querySelectorAll('.show-respondents-btn');
            els.forEach(function(btn){
                btn.addEventListener('click', function(ev){
                // If HTMX is present it will handle the request; only run fallback when not handled.
                    if (window.htmx) return;
                    ev.preventDefault();
                    var url = btn.getAttribute('data-url');
                    if (!url) return;
                    fetch(url, {credentials: 'same-origin'})
                        .then(function(r){ if (!r.ok) throw new Error('Network response was not ok'); return r.text(); })
                        .then(function(html){
                            var container = document.querySelector('#anatomy-responses-container');
                            if (container) container.outerHTML = html;
                        }).catch(function(err){
                            console.error('Failed to load responses fragment', err);
                        });
                }, {passive: false});
            });
        } catch (e) {
        // ignore
        }
    })();
</script>