{% load bootstrap4 %}
<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
  <div class="modal-dialog {{ view.modal_class }}">
    <div class="modal-content">
      {% block modal_content %}
        {% block modal_header %}
          <div class="modal-header ">
            <div class="modal-title">{% block modal_title %}<h4 class="my-0">{{ view.title }}</h4>{% endblock %}</div>
            <button type="button" class="close" name="close_modal" onclick="closeModal()" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
          </div>
        {% endblock %}
        {% block modal_body %}
        {% endblock %}
        {% block modal_footer %}
        {% endblock %}
      {% endblock %}
    </div>
  </div>
</div>
<script>
  function closeModal() {
    let container = document.getElementById("modals-here")
    let backdrop = document.getElementById("modal-backdrop")
    let modal = document.getElementById("modal")
    modal.classList.remove("show")
    backdrop.classList.remove("show")
    setTimeout(function () {
      container.removeChild(backdrop)
      container.removeChild(modal)
    }, 200)
  }
</script>