---
import { ViewTransitions } from 'astro:transitions';
export interface Props {
  title: string;
}

import '../assets/style/style.scss';
import Navbar from '../components/Navbar.astro';
import Spinner from '../components/Spinner.astro';

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" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <ViewTransitions />

    <!-- Reset and normilize styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
  </head>
  <body transition:animate="fade">
    <header class="position-sticky py-1 py-lg-3">
      <Navbar />
    </header>
    <main>
      <div id="layout-loading-spinner" class="d-none">
        <Spinner />
      </div>
      <slot />
    </main>
    <style lang="scss">
      body {
        header {
          background-color: var(--prj-bg);
          border-radius: 0 0 var(--prj-border-radius) var(--prj-border-radius);
        }
      }

      /* Position spinner in the center of the screen instead of the center of it's parent */
      /* This is because the height of the main div can change */
      /* but we still want the background to hide the content  */
      #layout-loading-spinner :global(.spinner) :global(svg) {
        position: fixed;
        width: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>

    <script is:inline>
      document.addEventListener('astro:before-preparation', (ev) => {
        const originalLoader = ev.loader;
        ev.loader = async function () {
          const spinner = document.querySelector('#layout-loading-spinner');

          // Only show the animation if page load is > than timeout seconds
          const timeoutId = setTimeout(
            () => spinner.classList.remove('d-none'),
            200,
          );

          await originalLoader();

          // cancel timeout if is not run yet
          clearTimeout(timeoutId);
          // spinner.classList.add('d-none');
        };
      });
    </script>
  </body>
</html>
