{% load i18n bootstrap %}
<form class="form-horizontal" id="slotEditForm" class="modal-form" method="POST" action="{% url "schedule_slot_edit" slug slot.pk %}">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans "Edit Slot" %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        {% csrf_token %}
        <div class="mb-3">
          <h5>Slot Details</h5>
          <ul>
            <li>Name: {{ slot.name }}</li>
            <li>Kind: {{ slot.kind.label }}</li>
            <li>Date: {{ slot.day.date }}</li>
            <li>Start: {{ slot.start }}</li>
            <li>End: {{ slot.end }}</li>
            <li>Room(s): {{ slot.rooms|join:", " }}</li>
          </ul>
        </div>

        {{ form|bootstrap }}
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
  </div>
</form>