{{define "base"}}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>{{.Title}} • PlutoOS</title>

    <!-- v1: Tailwind CDN (later: bundle local) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
  </head>

  <body class="bg-slate-950 text-slate-100">
    <header class="border-b border-slate-800 bg-slate-950/80 backdrop-blur">
      <div class="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="h-9 w-9 rounded-lg bg-slate-800 flex items-center justify-center font-bold">P</div>
          <div>
            <div class="font-semibold leading-tight">PlutoOS</div>
            <div class="text-xs text-slate-400 leading-tight">Storage Controller v1</div>
          </div>
        </div>

        <nav class="text-sm text-slate-300 flex items-center gap-4">
          <a class="hover:text-white" href="/">Dashboard</a>
          <a class="hover:text-white opacity-50 cursor-not-allowed" href="#">Storage</a>
          <a class="hover:text-white opacity-50 cursor-not-allowed" href="#">Shares</a>
          <a class="hover:text-white opacity-50 cursor-not-allowed" href="#">iSCSI</a>
          <a class="hover:text-white opacity-50 cursor-not-allowed" href="#">Monitoring</a>
        </nav>
      </div>
    </header>

    <main class="mx-auto max-w-6xl px-4 py-8">
      {{template "content" .}}
    </main>

    <footer class="mx-auto max-w-6xl px-4 pb-10 text-xs text-slate-500">
      <div class="border-t border-slate-800 pt-4 flex items-center justify-between">
        <span>PlutoOS • {{nowRFC3339}}</span>
        <span>Build: {{index .Build "version"}}</span>
      </div>
    </footer>
  </body>
</html>
{{end}}
