{% load django_bootstrap5 %}
{% load sekizai_tags %}

<button type="button" class="btn btn-primary btn-round btn-filter" data-bs-toggle="modal" data-bs-target="#filter-modal">
</button>

<!-- Modal -->
<div class="modal fade" id="filter-modal" tabindex="-1" aria-labelledby="filter-modal-label" aria-hidden="true">
  <div class="mw-75 modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="filter-modal-label">Filter objects</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="get">
        <div id="filter-modal-body" class="modal-body">
          {{ content }}
        </div>
        <div class="modal-footer">
          {% bootstrap_button "Apply" button_type="submit"  %}
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>


{% addtoblock "js" %}

  <script>
    $('#filter-modal').on('shown.bs.modal', function (e) {
      $('.django-select2').djangoSelect2({theme: "classic", dropdownParent: $('#filter-modal-body')});
    })
  </script>

{% endaddtoblock %}
