{% comment %}List of distinct answers submitted within this exam for the question, with counts and mark badges{% endcomment %}
<div class="card mt-2 bg-dark text-light border-secondary">
  <div class="card-body">
    <style>
      /* Hide edit buttons and mark-action forms by default; show only when card has editing-enabled */
      .card .edit-btn { display: none !important; }
      .card.editing-enabled .edit-btn { display: inline-block !important; }
      .card .mark-actions { display: none !important; }
      .card.editing-enabled .mark-actions { display: inline-block !important; }
    </style>
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="card-title mb-0">Answers submitted in this exam</h6>
      <div class="d-flex gap-2 align-items-center">
        <div class="btn-group btn-group-sm" role="group" aria-label="Order">
          <button class="btn btn-sm btn-outline-primary{% if request.GET.order == 'count' or not request.GET.order %} active{% endif %}" hx-get="{{ request.path }}?order=count" hx-swap="outerHTML" hx-target="closest .card">By count</button>
          <button class="btn btn-sm btn-outline-primary{% if request.GET.order == 'mark' %} active{% endif %}" hx-get="{{ request.path }}?order=mark" hx-swap="outerHTML" hx-target="closest .card">By score</button>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="this.closest('.card').classList.toggle('editing-enabled'); this.textContent = this.closest('.card').classList.contains('editing-enabled') ? 'Disable editing' : 'Enable editing'">Enable editing</button>
      </div>
    </div>
    {% if not items %}
      <div class="small text-muted">No answers submitted in this exam.</div>
    {% else %}
      <ul class="list-group">
        {% for it in items %}
          <li class="list-group-item bg-dark text-light border-secondary d-flex justify-content-between align-items-center">
            <div class="flex-grow-1 me-3"><pre class="mb-0 text-light">{{ it.answer }}</pre></div>
            <div class="text-end d-flex align-items-center gap-2">
              {# Stored mark badge #}
              {% if it.mark == 'correct' %}
                <span class="badge bg-success me-1" title="Stored answer marked as correct (2)">2</span>
              {% elif it.mark == 'half-correct' %}
                <span class="badge bg-warning text-dark me-1" title="Stored answer marked as half-correct (1)">1</span>
              {% elif it.mark == 'incorrect' %}
                <span class="badge bg-danger me-1" title="Stored answer marked as incorrect (0)">0</span>
              {% else %}
                <span class="badge bg-secondary me-1" title="No stored mark for this answer">-</span>
              {% endif %}

              {# Submission count badge #}
              <span class="badge bg-light text-dark me-2" title="Submitted {{ it.count }} times">{{ it.count }}</span>

              <form hx-post="{% url 'rapids:mark2_toggle_answer' %}" hx-target="closest .card" hx-swap="outerHTML" class="d-inline mark-actions">
                {% csrf_token %}
                <input type="hidden" name="question_pk" value="{{ question.pk }}">
                <input type="hidden" name="answer" value="{{ it.answer }}">
                <input type="hidden" name="exam_pk" value="{{ exam.pk }}">
                <input type="hidden" name="sk" value="{{ sk }}">
                <button class="btn btn-sm btn-outline-success" name="newmark" value="correct" title="Mark as correct (2)">2</button>
                <button class="btn btn-sm btn-outline-warning text-dark" name="newmark" value="half-correct" title="Mark as half-correct (1)">1</button>
                <button class="btn btn-sm btn-outline-danger" name="newmark" value="incorrect" title="Mark as incorrect (0)">0</button>
                <button class="btn btn-sm btn-outline-secondary" name="newmark" value="clear" title="Clear stored mark">⨯</button>
              </form>

              <button class="btn btn-sm btn-outline-secondary edit-btn" hx-get="{% url 'rapids:mark2_edit_answer' %}?question_pk={{ question.pk }}&original={{ it.answer|urlencode }}&exam_pk={{ exam.pk }}&sk={{ sk }}" hx-target="closest .card" hx-swap="outerHTML" title="Edit stored answer">Edit</button>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>

<script>
  (function(){
    document.querySelectorAll('.card').forEach(function(card){
      function update(){
        const enable = card.classList.contains('editing-enabled');
        card.querySelectorAll('.edit-btn').forEach(function(b){
          b.classList.toggle('d-none', !enable);
        });
      }
      update();
      const obs = new MutationObserver(update);
      obs.observe(card, { attributes: true, attributeFilter: ['class'] });
    });
  })();
</script>