{{define "base"}}
<!DOCTYPE html>
<html lang="en" data-theme="night">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="/public/favicon.ico" />
    <title>{{template "title" .}}</title>
    <meta name="description" content="Just here for the vibes...">
    {{template "head" .}}
  </head>

  <body class="block h-[100%]" hx-ext="preload">
    {{template "header" .}}

    <main class="container flex flex-col items-center justify-center gap-3 sm:gap-6 p-4 text-center mx-auto min-h-[calc(100%-64px)]">
      {{template "main" .}}
    </main>
    <script src="/public/js/htmx.base.js"></script>
    <script src="/public/js/htmx.preload.js"></script>
    {{template "foot" .}}
  </body>
</html>
{{end}}
