---
import GalleryLayout from "@layouts/GalleryLayout.astro";
import "@pagefind/default-ui/css/ui.css";

const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
---

<script>
  import { WebAssembly } from "polywasm";
  import { PagefindUI } from "@pagefind/default-ui";

  globalThis.WebAssembly = globalThis.WebAssembly || WebAssembly;

  function initPageFind() {
    const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
    new PagefindUI({
      element: "#search",
      bundlePath,
      resetStyles: false,
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initPageFind);
  } else {
    initPageFind();
  }
</script>

<GalleryLayout pageTitle="Search">
  <Fragment slot="head">
    <meta property="og:description" content="Bad Manners || Search" />
    <meta name="description" content="Search for stories, games, and blog posts made by Bad Manners." />
  </Fragment>
  <h1 class="m-2 text-3xl font-semibold text-stone-800 dark:text-stone-100">Search</h1>
  <hr class="mb-3 ml-[2px] mt-2 h-[4px] max-w-xs rounded-sm bg-stone-800 dark:bg-stone-100" aria-hidden />
  <div id="search" class="pagefind-ui pagefind-init my-4" data-pagefind-ui data-bundle-path={bundlePath}></div>
</GalleryLayout>
