<head th:remove="tag">
  <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0BNhakIG.css" integrity="sha384-8gVsVv9pIdvZ2KPpy5ZO/OX9HnRyW9ury+fYFRvbhAj8S7B3akhrdVCw8+UhMnyO">
</head>
<body th:remove="tag" th:fragment="body(media)">
  <div th:if="${#strings.equals(media.type, 'VIDEO')}" x-data="{openVideoModal:false}" class="aspect-h-1 aspect-w-1">
    <video preload="metadata" th:src="${media.url}" class="tw-ae tw-mc tw-ja"></video>
    <div
      th:if="${#strings.equals(media.type, 'VIDEO')}"
      class="color-base-200 v-cursor-pointer absolute flex tw-mc tw-rc tw-ga tw-q tw-hb tw-gb tw-v tw-h"
      @click="openVideoModal = true"
    >
      <span class="iconify-large iconify material-symbols--play-circle-outline"></span>
    </div>
    <template x-teleport="body">
      <div>
        <div
          class="fixed tw-ec tw-xd tw-cb tw-va tw-f"
          aria-hidden="true"
          x-show="openVideoModal"
          x-transition:enter="ease-in-out duration-200"
          x-transition:enter-start="opacity-0"
          x-transition:enter-end="opacity-100"
          x-transition:leave="ease-in-out duration-200"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
        ></div>
        <div
          class="fixed tw-ec tw-xd tw-n"
          tabindex="-1"
          x-show="openVideoModal"
          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"
        >
          <template x-if="openVideoModal">
            <div class="flex tw-fb tw-ac tw-ga tw-q tw-ce tw-za tw-qc">
              <div
                @click.outside="openVideoModal = false"
                class="color-base-300 relative tw-qd transform tw-m tw-ib tw-yb tw-ub tw-v tw-wb tw-xa"
              >
                <video preload="metadata" th:src="${media.url}" class="tw-rc" controls></video>
              </div>
              <div>
                <div
                  @click="openVideoModal = false;"
                  class="color-base-300 group tw-sa tw-ga tw-q tw-ka tw-xc"
                >
                  <span
                    class="iconify-large color-base-content-80 group-hover-text-base-content iconify block material-symbols--cancel-rounded"
                  ></span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</body>
