<div class="card">
  <div class="card-body">
    <form hx-post="{% url 'generic:generic_exam_htmx' %}"
          hx-target="#action-result" hx-swap="innerHTML"
          hx-include="[name='selection']:checked"
    >
      <input type="hidden" name="type" value="{{ type }}" />
      <div class="mb-2">
        <label for="id_exam_id">Choose exam</label>
        <select name="exam_id" id="id_exam_id" class="form-select form-select-sm">
          {% for ex in exams %}
            <option value="{{ ex.pk }}">{{ ex.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="mb-2">
        <label>Selected questions</label>
        <div class="selected-placeholder small text-muted">(will be taken from selected checkboxes)</div>
      </div>
      <div class="d-flex gap-2">
        <button class="btn btn-primary btn-sm" type="submit" name="add_from_selection">Add selected</button>
        <button class="btn btn-secondary btn-sm" type="button" onclick="document.querySelector('#action-result').innerHTML='';">Cancel</button>
      </div>
    </form>
  </div>
</div>