---
import AgeRestrictedScriptInline from "./AgeRestrictedScriptInline.astro";
import { IconTriangleExclamation } from "./icons";
---

<template x-if="!ageVerified">
  <div
    id="modal-age-restricted"
    class="fixed inset-0 z-10 bg-stone-50 dark:bg-zinc-900"
    role="dialog"
    aria-labelledby="title-age-restricted"
  >
    <div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
      <div class="text-bm-500 dark:text-bm-400">
        <IconTriangleExclamation width="3rem" height="3rem" />
      </div>
      <div
        id="title-age-restricted"
        class="pb-3 pt-2 text-3xl font-normal text-stone-700 sm:pb-4 sm:pt-2 dark:text-zinc-50"
      >
        Age verification
      </div>
      <div
        class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl font-medium text-stone-700 dark:border-zinc-300 dark:text-zinc-50"
      >
        You must be 18+ to access this page.
      </div>
      <p class="px-8 text-lg font-normal leading-snug text-stone-700 sm:max-w-2xl dark:text-zinc-50">
        By confirming that you are at least 18 years old, your selection will be saved to your browser to prevent this
        screen from appearing in the future.
      </p>
      <div
        id="age-verification-button-list"
        class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 font-medium sm:max-w-2xl sm:flex-row"
        hidden
      >
        <button
          data-modal-reject
          id="age-verification-reject"
          class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-zinc-300 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
          @click="location.href = 'about:blank'"
        >
          Cancel
        </button>
        <button
          data-modal-accept
          id="age-verification-accept"
          class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
          @click="localStorage.ageVerified = 'true'; ageVerified = true"
        >
          I'm at least 18 years old
        </button>
      </div>
    </div>
  </div>
</template>

<AgeRestrictedScriptInline />