<div class="card mt-2">
  <div class="card-body">
    <h6 class="card-title">Suggest incorrect answers</h6>
    <form hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="outerHTML">
      {% csrf_token %}
      <div class="mb-2">
        <label class="form-label">Current suggestions</label>
        <div class="mb-2">
          {% for s in question.answer_suggest_incorrect %}
            <button type="button" class="btn btn-sm btn-outline-secondary me-1 mb-1" hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-vals='{"remove": "{{ s|escapejs }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-target="closest .card" hx-swap="outerHTML">{{ s }} <span class="text-danger ms-1">&times;</span></button>
          {% empty %}
            <div class="small text-muted">No suggestions</div>
          {% endfor %}
        </div>

        <div class="d-flex gap-2 align-items-center">
          <input id="new-suggest" name="suggestion" class="form-control form-control-sm" placeholder="Add suggestion" />
          <button type="button" class="btn btn-sm btn-primary" hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-include="#new-suggest" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-target="closest .card" hx-swap="outerHTML">Add</button>
        </div>
      </div>
      <div class="d-flex gap-2 justify-content-end">
        <button type="submit" name="close" value="1" class="btn btn-primary btn-sm">Close</button>
      </div>
    </form>

    {% if candidates %}
      <hr/>
      <h6 class="mt-3">Suggested candidates</h6>
      <div class="small text-muted mb-2">These are frequent submitted answers that might be suitable to treat as incorrect suggestions.</div>
      <ul class="list-group">
        {% for c in candidates %}
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div class="flex-grow-1"><pre class="mb-0">{{ c.answer }}</pre></div>
            <div class="text-end">
              <span class="badge bg-light text-dark me-2">{{ c.count }}</span>
              <button class="btn btn-sm btn-outline-primary" hx-post="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-vals='{"suggestion": "{{ c.answer|escapejs }}", "context": "fragment"}' hx-target="closest .card" hx-swap="outerHTML">Add</button>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>

<template class="incorrect-answers-original" hidden>
  <strong>Answer suggest incorrect:</strong> {{ question.answer_suggest_incorrect }}
  <div class="mt-1"><button id="answer-suggest-incorrect-button" class="btn btn-sm btn-outline-secondary" hx-get="{% url 'anatomy:question_suggest_incorrect_answers' question.pk %}" hx-target="#incorrect-answers" hx-swap="innerHTML">Edit suggestions</button></div>
</template>
