{% load crispy_forms_tags %}
{% load static %}

<div class="extra-interface card-body py-1" id="ds-content-{{ object.id }}">
  <form action="{% url 'reader-studies:display-set-interfaces-create' pk=object.pk slug=object.reader_study.slug %}" method="post" class="ds-form" data-hx-target="#ds-content-{{ object.id }}" id="form-{{ object.pk }}">
    {% csrf_token %}
    {{ form|crispy }}
    <div id="id-{{ object.pk }}-interface-value"></div>
    <div class="d-flex justify-content-between pb-2">
      <div>
        <button type="button" class="btn btn-outline-primary" hx-get="{% url 'reader-studies:display-set-update' pk=object.pk slug=object.reader_study.slug %}" hx-target="#ds-content-{{ object.id }}" hx-swap="outerHTML">Back</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </div>
  </form>
</div>

<script type="text/javascript" src="{% static "cases/js/ignore_enter_button.js" %}"></script>