
<div
  x-cloak
  x-data="{ open: false }"
  {% if autoplay == True %}x-init="$nextTick(() => { open = true })"{% endif %} >
  <div x-ref="modal1_button"
       @click="open = true">
    {% slot "modal_enabler" %}
    {% endslot %}
  </div>
  <div

    role="dialog"
    aria-labelledby="modal1_label"
    aria-modal="true"
    tabindex="0"
    x-show="open"
    @click="open = false; $refs.modal1_button.focus()"
    @keydown.escape="open = false"
    @click.away="open = false"
    style="display: none;"
    class="z-[100] fixed top-0 left-0 w-full h-screen flex justify-center items-center" >
    <div aria-hidden="true"
         class="absolute top-0 left-0 w-full h-screen bg-black transition duration-300"
         :class="{ 'opacity-60': open, 'opacity-0': !open }"
         x-show="open"
         style="display: none;"
         x-transition:leave="delay-150"></div>
    <div data-modal-document
         @click.stop=""
         @keydown.escape="open = false"
         x-show="open"
         x-trap="open"
         x-trap.noscroll="open"
         x-trap.inert="open"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="transform scale-50 opacity-0"
         x-transition:enter-end="transform scale-100 opacity-100"
         x-transition:leave="transition ease-out duration-200"
         x-transition:leave-start="transform scale-100 opacity-100"
         x-transition:leave-end="transform scale-50 opacity-0"
         class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-neutral-900 dark:text-neutral-100 m-w-4/5 xl:m-w-3/5  min-h-4/5 z-[100]" style="max-height: 95vh;">
      <div class="p-6 border-b border-neutral-300 dark:border-neutral-700 flex justify-between">
        <h1 id="modal1_label" class="font-semibold" x-ref="modal1_label"> {% slot "modal_header" %} {% if title %}{{ title }}{% endif %}{% endslot %}</h1>

        <button autofocus class="h-6 w-6 cursor-pointer" label="Close modal" @click="open = false"><svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"  >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
        </button>
      </div>
      <div class="p-6 overflow-y-auto">
        {% slot "modal_content" %}


        {% endslot %}
      </div>
    </div>
  </div>
</div>
