{{define "page"}}<!doctype html>
<html lang="fo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zeitkort — FLÓ</title>

<script>
(function () {
  var stored = localStorage.getItem('poc-theme');
  var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
  document.documentElement.setAttribute('data-theme', theme);
})();
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<header>
  <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
  <span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
  <nav>
    <a href="/">Timer</a>
    <a hx-get="/settings" hx-target="#main" href="javascript:void(0)">Settings</a>
    <a hx-get="/about" hx-target="#main" href="javascript:void(0)">About</a>
  </nav>
</header>

<div class="reset-banner" role="status" aria-live="polite">
  <span class="reset-label">POC reset in</span>
  <span id="reset-countdown" class="reset-countdown" data-reset-at="{{rfc3339 .ResetAt}}">--:--</span>
  <span class="reset-note">All in-memory data clears every {{.ResetIntervalMinutes}} minutes.</span>
</div>

<main id="main">
{{template "main" .}}
</main>

<footer>zeitkort-web {{.Version}} · web-only POC · resets every 10 minutes</footer>

<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>

<script src="/static/htmx.min.js"></script>
<script src="/static/timer.js"></script>
<script>
(function () {
  function currentSystemTheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
  }
  var btn = document.getElementById('theme-toggle');
  if (btn) {
    btn.addEventListener('click', function () {
      var current = document.documentElement.getAttribute('data-theme') || 'light';
      var next = current === 'light' ? 'tokyo' : 'light';
      document.documentElement.setAttribute('data-theme', next);
      localStorage.setItem('poc-theme', next);
    });
  }
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
    if (!localStorage.getItem('poc-theme')) {
      document.documentElement.setAttribute('data-theme', currentSystemTheme());
    }
  });
})();
</script>
</body>
</html>{{end}}
