@let(props = {
  id: $props.get('id') || 'lazy',
  isOpen: $props.get('isOpen') || false,
  isFullscreen: $props.get('isFullscreen') || false,
  class: $props.get('class') || '',
  backdropClass: $props.get('backdropClass') || 'bg-black/30',
  backdropStatic: $props.get('backdropStatic') || false,
  scrollbar: $props.get('scrollbar') || false,
  level: $props.get('level') || 0,
})

<div
  x-data="$dialog.create({
    id: '{{ props.id }}',
    isOpen: {{ props.isOpen }},
    fullscreen: {{ props.isFullscreen }},
    noscroll: {{ props.scrollbar }},
  })"
  @if (props.backdropStatic)
  x-on:keydown.window.escape="$refs.dialogCard.classList.add('scale-105'); setTimeout(() => $refs.dialogCard.classList.remove('scale-105'), 150);"
  @else
  x-on:keydown.window.escape="$dialog.isOpen('{{ props.id }}') && $dialog.close('{{ props.id }}')"
  @endif
  x-cloak
  x-show="$dialog.isOpen('{{ props.id }}')"
  class="fixed inset-0 z-[61] lazy-dialog-wrapper"
  style="z-index: {{ (61 + props.level) }}"
  id="{{ props.id }}"
  role="dialog"
  x-bind:class="{ 'fullscreen' : $dialog.isFullscreen('{{ props.id }}'), 'open' : $dialog.isOpen('{{ props.id }}') }"
>

  <div
    x-show="$dialog.isOpen('{{ props.id }}')"
    style="z-index: 1"
    :class="{ 'hidden' : $dialog.isFullscreen('{{ props.id }}') }"
    @if (props.backdropStatic)
    x-on:click="$refs.dialogCard.classList.add('scale-105'); setTimeout(() => $refs.dialogCard.classList.remove('scale-105'), 150);"
    @else
    x-on:click="$dialog.close('{{ props.id }}')"
    @endif
    class="{{
      html.classNames([
        'fixed inset-0',
        props.backdropClass
      ])
    }}"
    x-transition.opacity.duration.300ms
  ></div>

  <div class="fixed inset-0 overflow-y-auto pointer-events-none" style="z-index: 2">
    <div class="flex min-h-full justify-center p-4 text-center items-center">
      <div
        x-show="$dialog.isOpen('{{ props.id }}')"
        x-transition:enter="ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        x-ref="dialogCard"
        :class="{
          'fixed inset-0 h-full !max-w-full !rounded-none': $dialog.isFullscreen('{{ props.id }}'),
          'relative': !$dialog.isFullscreen('{{ props.id }}'),
        }"
        class="{{
          html.classNames([
            'bg-white dark:bg-cat-800 text-cat-900 dark:text-white text-left lazy-shadow-overlay transition-all w-full max-w-xl rounded-xl pointer-events-auto',
            props.class
          ])
        }}"
      >
        {{{ await $slots.main() }}}
      </div>
    </div>
  </div>
</div>