<!-- https://www.tailwindtoolbox.com/components/modal -->
<!--Modal-->
<div class="modal-<%= modal.id %> opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center z-50">
  <div class="modal-<%= modal.id %>-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
  <div class="modal-container bg-white dark:bg-gray-900 w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
    <div class="modal-<%= modal.id %>-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
      <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
        <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
      </svg>
      <span class="text-sm">(Esc)</span>
    </div>
    <div class="modal-content py-4 text-left px-6">
      <!-- Title -->
      <div class="flex justify-between items-center pb-3">
        <p class="text-2xl font-bold"><%- modal.title %></p>
        <div class="modal-<%= modal.id %>-close cursor-pointer z-50">
          <svg class="fill-current text-black dark:text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
          </svg>
        </div>
      </div>

      <!-- Body -->
      <div id="<%= modal.id %>-body" class="flex flex-wrap gap-2 py-3 px-3 rounded">
        <%- modal.body %>
      </div>

      <!-- Footer -->
      <div class="flex justify-end pt-2">
        <button type="button" class="modal-<%= modal.id %>-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
      </div>
    </div>
  </div>
</div>
<script>
  const openmodal_<%= modal.id %> = document.querySelectorAll('.modal-<%= modal.id %>-open');
  for (let i = 0; i < openmodal_<%= modal.id %>.length; i++) {
    openmodal_<%= modal.id %>[i].addEventListener('click', function (event) {
      event.preventDefault();
      toggleModal_<%= modal.id %>();
    });
  }

  const overlay_<%= modal.id %> = document.querySelector('.modal-<%= modal.id %>-overlay');
  overlay_<%= modal.id %>.addEventListener('click', toggleModal_<%= modal.id %>);

  const closemodal_<%= modal.id %> = document.querySelectorAll('.modal-<%= modal.id %>-close');
  for (let i = 0; i < closemodal_<%= modal.id %>.length; i++) {
    closemodal_<%= modal.id %>[i].addEventListener('click', toggleModal_<%= modal.id %>);
  }

  function toggleModal_<%= modal.id %>() {
    const body = document.querySelector('body');
    const modal = document.querySelector('.modal-<%= modal.id %>');
    modal.classList.toggle('opacity-0');
    modal.classList.toggle('pointer-events-none');
    body.classList.toggle('modal-<%= modal.id %>-active');
  }

  document.addEventListener('keydown', (event) => {
    const isEscape = event.key === 'Escape' || event.key === 'Esc' || event.key === 27;
    if (isEscape && document.body.classList.contains('modal-<%= modal.id %>-active')) toggleModal_<%= modal.id %>();
  });
</script>