---
import { getImage } from "astro:assets";
import BaseLayout from "@layouts/BaseLayout.astro";
import logoBM from "@assets/images/logo_bm.png";
import { t } from "@i18n";
import {
  IconBlog,
  IconBook,
  IconBriefcase,
  IconGamepad,
  IconMagnifyingGlass,
  IconMoon,
  IconSun,
  IconTags,
} from "@components/icons";

type Props = {
  pageTitle: string;
  isAgeRestricted?: boolean;
  enablePagefind?: boolean;
  class?: string;
};

const { pageTitle, enablePagefind, class: className, isAgeRestricted } = Astro.props;
const logo = await getImage({ src: logoBM, width: 192 });
const currentYear = new Date().getFullYear().toString();
const isCurrentRoute = (path: string) =>
  Astro.url.pathname === path || (path !== "/" && Astro.url.pathname === `${path}/`);
---

<BaseLayout pageTitle={pageTitle} isAgeRestricted={isAgeRestricted ?? true}>
  <Fragment slot="head">
    <meta property="og:title" content={pageTitle || "Bad Manners"} />
    <meta property="og:url" content={Astro.url} />
    <meta property="og:image" content={logo.src} />
    <meta property="og:image:alt" content="Logo for Bad Manners" />
    <slot name="head" />
  </Fragment>
  <div
    class="grid grid-cols-1 flex-col bg-stone-200 text-stone-800 md:grid-cols-[18rem_1fr] md:flex-row dark:bg-stone-800 dark:text-stone-200 print:bg-none"
  >
    <nav
      class="h-card flex shrink-0 flex-col items-center border-b-4 border-bm-400 bg-gradient-to-b from-bm-300 from-[calc(100%-2rem)] to-bm-400 pb-10 pr-3 pt-10 text-center text-stone-900 shadow-lg md:min-h-screen md:w-72 md:justify-self-stretch md:border-b-0 md:border-r-4 md:bg-gradient-to-r md:pt-20 dark:border-green-950 dark:from-green-900 dark:to-green-950 dark:text-stone-100 print:bg-none print:shadow-none"
    >
      <a
        class="u-url"
        href="https://badmanners.xyz"
        x-data={JSON.stringify({ href: "https://badmanners.xyz", suffix: "?ageVerified=true" })}
        x-bind:href="ageVerified ? href + suffix : href"
        rel="me"
        aria-label="Bad Manners's website"
      >
        <img
          loading="eager"
          src={logo.src}
          alt="A pixelated metal briefcase over a green gradient background."
          class="u-logo my-4 w-full max-w-[192px] rounded-sm border-2 border-green-800 shadow-md dark:border-green-950"
          height={192}
        />
      </a>
      <span class="p-name mb-6 mt-4 text-3xl font-semibold">Bad Manners</span>
      <ul class="flex w-[80%] max-w-sm flex-col gap-y-2 px-2 text-left">
        <li>
          <a class="text-link group" href="/" aria-current={isCurrentRoute("/") ? "page" : undefined}>
            <IconBriefcase width="1.25rem" height="1.25rem" class="order-1 inline align-text-top" />
            <span class="order-3 group-hover:underline group-focus:underline">Gallery</span>
          </a>
        </li>
        <li>
          <a class="text-link group" href="/stories" aria-current={isCurrentRoute("/stories") ? "page" : undefined}>
            <IconBook width="1.25rem" height="1.25rem" class="order-1 inline align-text-top" />
            <span class="order-3 group-hover:underline group-focus:underline">Stories</span>
          </a>
        </li>
        <li>
          <a class="text-link group" href="/games" aria-current={isCurrentRoute("/games") ? "page" : undefined}>
            <IconGamepad width="1.25rem" height="1.25rem" class="order-1 inline align-text-top" />
            <span class="order-3 group-hover:underline group-focus:underline">Games</span>
          </a>
        </li>
        <li>
          <a class="text-link group" href="/blog" aria-current={isCurrentRoute("/blog") ? "page" : undefined}>
            <IconBlog width="1.25rem" height="1.25rem" class="order-1 inline align-text-top" />
            <span class="order-3 group-hover:underline group-focus:underline">Blog</span>
          </a>
        </li>
        <li>
          <a class="text-link group" href="/tags" aria-current={isCurrentRoute("/tags") ? "page" : undefined}>
            <IconTags width="1.25rem" height="1.25rem" class="order-1 inline align-text-top" />
            <span class="order-3 group-hover:underline group-focus:underline">Tags</span>
          </a>
        </li>
        <li>
          <a
            class="text-link group"
            href="/search"
            rel="search"
            aria-current={isCurrentRoute("/search") ? "page" : undefined}
          >
            <IconMagnifyingGlass width="1.25rem" height="1.25rem" class="order-1 inline align-text-top" />
            <span class="order-3 group-hover:underline group-focus:underline">Search</span>
          </a>
        </li>
        <li>
          <button
            class="text-link group"
            aria-label={t("en", "published_content/toggle_dark_mode")}
            @click="darkMode = !darkMode; localStorage.colorScheme = darkMode ? 'dark' : 'light'"
          >
            <IconSun width="1.25rem" height="1.25rem" class="order-1 hidden align-text-top dark:inline" />
            <IconMoon width="1.25rem" height="1.25rem" class="order-1 inline align-text-top dark:hidden" />
            <span class="order-3 hidden group-hover:underline group-focus:underline dark:block" aria-hidden="true"
              >Light mode</span
            >
            <span class="order-3 block group-hover:underline group-focus:underline dark:hidden" aria-hidden="true"
              >Dark mode</span
            >
          </button>
        </li>
      </ul>
      <footer class="py-6 text-center text-xs text-black dark:text-white">
        <span
          >&copy;
          <time datetime="2024">2024</time>&ndash;<time datetime={currentYear}>{currentYear}</time>
          |
        </span>
        <a class="text-link hover:underline focus:underline" href="/licenses.toml" rel="license">Licenses</a>
      </footer>
    </nav>
    <main
      class:list={[className, "ml-0 w-full max-w-6xl px-2 pb-28 pt-4 md:pl-12 md:pr-8 print:pb-0"]}
      data-pagefind-body={enablePagefind ? "" : undefined}
    >
      <slot />
    </main>
  </div>
</BaseLayout>

<style>
  nav ul li a,
  nav ul li button {
    @apply flex w-full items-baseline justify-between;
  }

  nav ul li a::after,
  nav ul li button::after {
    @apply order-2 flex-grow self-end bg-bottom;
    background: radial-gradient(circle, currentcolor 1px, transparent 1px);
    background-size: 1ex 4.5px;
    background-repeat: space no-repeat;
    content: "";
    height: 1ex;
  }
</style>

<script>
  import tippy from "tippy.js";
  import "tippy.js/dist/tippy.css";

  const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
  tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
  tippy(tooltipItems, {
    content: (el) => (el as HTMLElement).dataset.tooltip!,
    theme: "bm",
  });
  tooltipItems.forEach((el) => el.removeAttribute("title"));
</script>
