<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyAnimeList: {{template "title" .}}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <script>
    const preferredTheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    document.documentElement.dataset.theme = preferredTheme;
    document.documentElement.style.colorScheme = preferredTheme;
  </script>
  <link rel="manifest" href="/static/assets/manifest.json">
  <link rel="icon" type="image/png" href="/static/assets/favicon.png">
  <link rel="apple-touch-icon" href="/static/assets/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/static/assets/apple-touch-icon-120x120.png">
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"></noscript>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap"></noscript>
  <link rel="stylesheet" href="{{assetURL "/dist/tailwind.css"}}">
  <style>
    [data-htmx-loading="true"] {
      opacity: 0.65;
      pointer-events: none;
    }
  </style>
   <script type="module" src="{{assetURL "/dist/static/app.js"}}" defer></script>
   <template id="toast-template">
      <div class="toast pointer-events-auto w-88 max-w-[calc(100vw-2rem)] bg-background shadow-card ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0 data-[variant=destructive]:bg-red-950/92 data-[variant=destructive]:ring-red-500/35">
        <div class="min-w-0 flex-1">
         <div class="toast-message text-sm font-medium text-foreground leading-snug data-[variant=destructive]:text-red-100"></div>
       </div>
       <button class="toast-close -mr-1 -mt-1 rounded-md p-1.5 opacity-70 hover:opacity-100 hover:bg-foreground/10 focus:outline-none focus:ring-2 focus:ring-ring data-[variant=destructive]:hover:bg-red-400/12 data-[variant=destructive]:focus:ring-red-300/60" aria-label="Close">
         <svg class="size-4 text-foreground-muted data-[variant=destructive]:text-red-200/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M18 6L6 18M6 6l12 12"/>
         </svg>
       </button>
     </div>
   </template>
   <script src="{{assetURL "/dist/static/htmx-lib.js"}}"></script>
  {{block "scripts" .}}{{end}}
</head>
  <body class="bg-background text-foreground">
  <div class="flex min-h-screen flex-col">
    {{if .User}}
      {{template "header_navigation" dict "CurrentPath" .CurrentPath}}

      <div class="flex flex-1 overflow-hidden pt-16">
        <main class="scrollbar-hidden w-full flex-1 flex flex-col h-[calc(100dvh-4rem)] overflow-y-auto">
          <div class="flex-1 p-4 md:p-8">
            {{block "page_container" .}}
              {{template "content" .}}
            {{end}}
          </div>
        </main>
      </div>
    {{else}}
      <main class="w-full flex-1 flex flex-col">
        <div class="flex-1">
          {{template "content" .}}
        </div>
      </main>
    {{end}}
  </div>
  <div id="toast-container" class="fixed bottom-4 right-4 z-100 flex flex-col gap-2" role="status" aria-live="polite" aria-relevant="additions"></div>
</body>
</html>
