<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="shareModal"
      x-cloak
      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="shareModal"
      x-cloak
      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="shareModal = false"
          class="relative my-4 transform overflow-hidden rounded-lg bg-white p-4 text-left shadow-xl transition-all dark:bg-slate-800 dark:text-slate-100 sm:w-full sm:max-w-xl"
        >
          <h1 class="text-lg font-semibold" th:text="#{fragment.shareModal.title}"></h1>
          <div class="my-8">
            <div class="grid grid-cols-5 gap-6 sm:grid-cols-6">
              <template x-for="item in activeShareItems">
                <div class="inline-flex flex-col items-center justify-center gap-1.5 rounded-full">
                  <div
                    class="inline-flex size-12 cursor-pointer items-center justify-center rounded-full bg-gray-100 transition-all hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100 sm:size-16"
                    @click="handleShare(item.id)"
                  >
                    <div class="text-xl text-gray-900 dark:text-slate-50" :class="item.icon"></div>
                  </div>
                  <div class="hidden text-xs text-gray-600 dark:text-slate-100 sm:block" x-text="item.name"></div>
                </div>
              </template>
            </div>
            <div class="mt-10">
              <div
                class="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 px-3 py-2 dark:bg-slate-700 sm:justify-between"
              >
                <div
                  class="flex-1 select-all truncate text-xs font-light text-gray-600 dark:text-slate-100"
                  x-text="permalink"
                ></div>
                <div
                  class="flex-none cursor-pointer select-none text-sm text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-500"
                  @click="handleCopy"
                  th:attr="x-text=|copied ? '#{fragment.shareModal.copied}' : '#{fragment.shareModal.copy}'|"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            @click="shareModal = 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>
