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

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

const { pageTitle, enablePagefind, class: className } = 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}>
  <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="flex min-h-screen flex-col bg-stone-200 text-stone-800 md:flex-row dark:bg-stone-800 dark:text-stone-200 print:bg-none"
  >
    <nav
      class="h-card static mb-4 flex flex-col items-center bg-bm-300 pb-10 pt-10 text-center text-stone-900 shadow-xl md:fixed md:inset-y-0 md:left-0 md:mb-0 md:w-60 md:pt-20 dark:bg-green-900 dark:text-stone-100 print:bg-none print:shadow-none"
    >
      <img
        loading="eager"
        src={logo.src}
        alt="A pixelated metal briefcase over a background with a green gradient."
        class="u-logo my-4 w-full max-w-[192px] rounded-sm border-2 border-green-950 shadow-md"
        width={192}
      />
      <span class="p-name my-2 text-2xl font-semibold">Bad Manners</span>
      <ul class="flex flex-col gap-y-2">
        <li>
          <a class="u-url text-link group" href="https://badmanners.xyz/" data-age-restricted rel="me">
            <IconHome width="1.25rem" height="1.25rem" class="inline align-middle" />
            <span class="group-hover:underline group-focus:underline">Main website</span>
          </a>
        </li>
        <li>
          <a class="u-url text-link group" href="/" aria-current={isCurrentRoute("/") ? "page" : undefined}>
            <IconBriefcase width="1.25rem" height="1.25rem" class="inline align-middle" />
            <span class="group-hover:underline group-focus:underline">Gallery</span>
          </a>
        </li>
        <li>
          <a
            class="u-url text-link group"
            href="/stories/1"
            aria-current={isCurrentRoute("/stories/1") ? "page" : undefined}
          >
            <IconBook width="1.25rem" height="1.25rem" class="inline align-middle" />
            <span class="group-hover:underline group-focus:underline">Stories</span>
          </a>
        </li>
        <li>
          <a class="u-url text-link group" href="/games" aria-current={isCurrentRoute("/games") ? "page" : undefined}>
            <IconGamepad width="1.25rem" height="1.25rem" class="inline align-middle" />
            <span class="group-hover:underline group-focus:underline">Games</span>
          </a>
        </li>
        <li>
          <a class="u-url text-link group" href="/tags" aria-current={isCurrentRoute("/tags") ? "page" : undefined}>
            <IconTags width="1.25rem" height="1.25rem" class="inline align-middle" />
            <span class="group-hover:underline group-focus:underline">Tags</span>
          </a>
        </li>
        <li>
          <a
            class="u-url text-link group"
            href="/search"
            rel="search"
            aria-current={isCurrentRoute("/search") ? "page" : undefined}
          >
            <IconMagnifyingGlass width="1.25rem" height="1.25rem" class="inline align-middle" />
            <span class="group-hover:underline group-focus:underline">Search</span>
          </a>
        </li>
        <li>
          <a class="u-url text-link group" href="/feed.xml">
            <IconSquareRSS width="1.25rem" height="1.25rem" class="inline align-middle" />
            <span class="group-hover:underline group-focus:underline">RSS feed</span>
          </a>
        </li>
        <li>
          <button data-dark-mode style={{ display: "none" }} class="text-link group">
            <IconSun width="1.25rem" height="1.25rem" class="hidden align-middle dark:inline" />
            <IconMoon width="1.25rem" height="1.25rem" class="inline align-middle dark:hidden" />
            <span class="group-hover:underline group-focus:underline"
              >{t("en", "published_content/toggle_dark_mode")}</span
            >
          </button>
        </li>
      </ul>
      <div class="pt-4 text-center text-xs text-black dark:text-white">
        <span
          >&copy; {
            currentYear === "2024" ? (
              <time datetime="2024">2024</time>
            ) : (
              <>
                <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>
      </div>
    </nav>
    <main
      class:list={[className, "ml-0 max-w-6xl px-2 pb-12 pt-4 md:ml-60 md:px-4 print:pb-0"]}
      data-pagefind-body={enablePagefind ? "" : undefined}
    >
      <slot />
    </main>
  </div>
</BaseLayout>
