---
import { getLangFromUrl } from '../i18n/utils'
import 'reveal.js/dist/reveal.css'
import 'reveal.js/dist/theme/white.css'
import 'reveal.js/plugin/highlight/monokai.css'

interface Props {
  title: string;
}

const lang = getLangFromUrl(Astro.url);
const { title } = Astro.props;
---

<!doctype html>
<html lang={lang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Slides?" />
    <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>
  </head>

  <body>
    <main>
      <div class="loading">
        Waiting for slides to warm up...
      </div>
      <div class="reveal">
        <slot />
      </div>
    </main>
  </body>

  <script>
    import RevealJS from 'reveal.js';
    import Highlight from 'reveal.js/plugin/highlight/highlight.esm'

    let deck = new RevealJS({
      plugins: [Highlight],
      slideNumber: true,
      hash: true
    });
    deck.initialize()
    .then(() => {
      document.querySelector('.loading')?.remove();
    });
  </script>
</html>

<style>
  main {
    height: 100vh;
  }

  .loading {
    width: 100%;
    height: 100%;
    font-size: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
</style>