---
import Header from "../components/Header.astro";
import { ViewTransitions } from "astro:transitions";
import MobileNavigation from "../components/MobileNavigation.astro";

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link
      rel="stylesheet"
      href="/nebula.css"
      id="stylesheet"
      transition:persist
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
    />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <ViewTransitions />
  </head>
  <body class="h-full bg-primary">
    <Header />
    <div class="h-full z-10 w-full fixed">
      <slot />
    </div>
    <div
      id="mobileNavMenu"
      class="w-full fixed inset-0 h-[calc(100%-4rem)] z-20"
      transition:persist
    >
      <MobileNavigation />
    </div>
    <video
      autoplay
      muted
      loop
      id="nebulaVideo"
      class="absolute z-0 h-[calc(100%-4rem)] w-full object-cover"
      transition:persist
    >
      <source type="video/mp4" id="videosource" />
    </video>
    <img
      src=""
      class="absolute z-0 h-[calc(100%-4rem)] w-full object-cover hidden"
      id="nebulaImage"
      transition:persist
    />
    <script>
      import { isMobileNavOpen } from "../store.js";
      const mobileNavMenu = document.getElementById("mobileNavMenu");
      // Listen to changes in the store, and show/hide the mobile navigation accordingly
      isMobileNavOpen.subscribe((open) => {
        if (open) {
          if (mobileNavMenu) {
            mobileNavMenu.style.display = "block";
            mobileNavMenu.style.transform = "translateX(0%)";
          }
        } else {
          if (mobileNavMenu) {
            mobileNavMenu.style.transform = "translateX(100%)";
          }
        }
      });

      const stylesheet_link = localStorage.getItem("stylesheet");
      const stylesheet = document.getElementById(
        "stylesheet"
      )! as HTMLAnchorElement;

      if (stylesheet_link) {
        stylesheet.href = stylesheet_link;
      }

      const video_link = localStorage.getItem("background_video");

      const image_link = localStorage.getItem("background_image");

      const image_source = document.getElementById("nebulaImage")! as any;
      const source = document.getElementById("nebulaVideo")! as any;

      if (video_link) {
        source.src = "/videos/" + video_link;
      }
      if (image_link) {
        image_source.style.display = "block";
        image_source.src = "/images/" + image_link;
      }
    </script>
    <style>
      #mobileNavMenu {
        -webkit-transition-duration: 600ms;
        transition-duration: 600ms;
        transform: translateX(100%);
      }
    </style>

    <style is:global>
      :root {
        --accent: 136, 58, 234;
        --accent-light: 224, 204, 250;
        --accent-dark: 49, 10, 101;
        --accent-gradient: linear-gradient(
          45deg,
          rgb(var(--accent)),
          rgb(var(--accent-light)) 30%,
          white 60%
        );
      }
      html {
        font-family: system-ui, sans-serif;
        background: #13151a;
        background-size: 224px;
      }
      code {
        font-family:
          Menlo,
          Monaco,
          Lucida Console,
          Liberation Mono,
          DejaVu Sans Mono,
          Bitstream Vera Sans Mono,
          Courier New,
          monospace;
      }
      .roboto {
        font-family: Roboto;
      }
    </style>
  </body>
</html>
