{{define "base"}}
<!doctype html>
<html lang="en" class="h-full">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{.Title}} · Where Woof !</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="min-h-full bg-stone-100 text-stone-900 antialiased">
  <nav class="bg-stone-900 text-white">
    <div class="mx-auto flex max-w-4xl items-center justify-between px-4 py-3">
      <a href="/" class="text-lg font-bold tracking-tight">🐕 Where Woof</a>
      <div class="flex items-center gap-4 text-sm">
        {{if .CurrentUser}}
          <span class="text-stone-300">Hi, {{.CurrentUser.Name}}</span>
          <a href="/account" class="hover:underline">My Tags</a>
          <form method="post" action="/logout" class="inline">
            <button class="hover:underline">Log out</button>
          </form>
        {{else}}
          <a href="/login" class="hover:underline">Log in</a>
          <a href="/register" class="rounded bg-amber-500 px-3 py-1 font-semibold text-stone-900 hover:bg-amber-400">Register</a>
        {{end}}
      </div>
    </div>
  </nav>
  <main class="mx-auto max-w-4xl px-4 py-8">
    {{template "content" .}}
  </main>
</body>
</html>
{{end}}
