{{define "page"}}<!doctype html>
<html lang="fo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zeitkort</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<header>
  <span class="brand">zeitkort</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>

<script src="/static/htmx.min.js"></script>
<script src="/static/timer.js"></script>
</body>
</html>{{end}}
