---
import '../styles/theme.css'
import { ClientRouter } from 'astro:transitions'
import { SessionTerminalModal } from '../components/sessions/SessionTerminalModal'

interface Props {
  title: string
}

const { title } = Astro.props
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} · Overdeck</title>
    <ClientRouter />
    <script is:inline>
      ;(function () {
        var KEY = 'overdeck-theme'
        var root = document.documentElement
        var media = window.matchMedia('(prefers-color-scheme: dark)')

        function apply(pref) {
          var mode = pref === 'system' ? (media.matches ? 'dark' : 'light') : pref
          root.dataset.theme = mode
        }

        function get() {
          var stored = localStorage.getItem(KEY)
          return stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'dark'
        }

        function set(pref) {
          localStorage.setItem(KEY, pref)
          apply(pref)
        }

        apply(get())
        media.addEventListener('change', function () {
          if (get() === 'system') apply('system')
        })
        // Astro's client router replaces every <html> attribute with the incoming
        // document's, which drops the data-theme this script set at first load.
        document.addEventListener('astro:after-swap', function () {
          apply(get())
        })

        window.overdeckTheme = { get: get, set: set }
      })()
    </script>
  </head>
  <body>
    <slot />
    <SessionTerminalModal client:load transition:persist="session-terminal-modal" />
  </body>
</html>
