<div class="card mt-2 bg-dark text-light border-secondary">
  <div class="card-body">
    <h6 class="card-title">Edit stored answer</h6>
    <form hx-post="{% url 'rapids:mark2_edit_answer' %}" hx-target="closest .card" hx-swap="outerHTML">
      {% csrf_token %}
      <input type="hidden" name="question_pk" value="{{ question.pk }}">
      <input type="hidden" name="original" value="{{ original }}">
      {% if exam_pk %}
        <input type="hidden" name="exam_pk" value="{{ exam_pk }}">
      {% endif %}
      {% if sk is not None %}
        <input type="hidden" name="sk" value="{{ sk }}">
      {% endif %}

      <div class="mb-2">
        <label class="form-label">Original</label>
        <pre class="small bg-secondary text-light p-2">{{ original }}</pre>
      </div>

      <div class="mb-2">
        <label class="form-label">New answer text</label>
        <textarea class="form-control bg-dark text-light border-secondary" name="new_answer" rows="3">{% if existing %}{{ existing.answer }}{% else %}{{ original }}{% endif %}</textarea>
      </div>

      <div class="d-flex justify-content-end gap-2">
        <button type="submit" class="btn btn-primary btn-sm">Save</button>
        {% if exam_pk and sk is not None %}
          <button type="button" class="btn btn-outline-secondary btn-sm" hx-get="{% url 'rapids:mark2_exam_marked' exam_pk sk %}" hx-swap="outerHTML" hx-target="closest .card">Cancel</button>
        {% else %}
          <button type="button" class="btn btn-outline-secondary btn-sm" _="on click remove .card">Cancel</button>
        {% endif %}
      </div>
    </form>
  </div>
</div>
