<template x-teleport="body">
  <div>
    <div
      class="fixed inset-0 z-50 bg-gray-800/40 opacity-100 backdrop-blur-sm dark:bg-black/80"
      aria-hidden="true"
      x-show="openImageModal"
      x-transition:enter="ease-in-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="ease-in-out duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    ></div>
    <div
      class="fixed inset-0 z-50 overflow-y-auto"
      tabindex="-1"
      x-show="openImageModal"
      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-100"
      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"
    >
      <div class="flex min-h-full flex-col items-center justify-center p-4 text-center sm:p-0">
        <div
          @click.outside="openImageModal = false"
          class="relative my-4 transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all dark:bg-slate-800 dark:text-slate-100 sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
        >
          <img :src="image" class="w-full" loading="lazy" :alt="alt" />
        </div>
        <div>
          <div
            @click="openImageModal = false"
            class="group inline-flex items-center justify-center rounded-full bg-white p-1.5 dark:bg-slate-800"
          >
            <i
              class="i-tabler-x block text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-500"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
