<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= title %> — <%= appName %></title>
  <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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
  <meta name="theme-color" content="#171717" />
  <link rel="stylesheet" href="/css/app.css" />
  <script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
  <% if (user) { %>
  <nav class="sticky top-0 z-50 bg-canvas border-b border-hairline">
    <div class="max-w-[1200px] mx-auto px-6 h-16 flex items-center justify-between">
      <a href="/dashboard" class="text-ink font-semibold text-base" style="letter-spacing:-0.6px">Tasyakuran NFBS</a>
      <div class="flex items-center gap-1">
        <a href="/dashboard" class="px-3 py-1.5 rounded-full text-sm text-body hover:text-ink hover:bg-canvas-soft-2 transition">Dashboard</a>
        <% if (user.role === 'admin') { %>
          <a href="/angkatan" class="px-3 py-1.5 rounded-full text-sm text-body hover:text-ink hover:bg-canvas-soft-2 transition">Angkatan</a>
          <a href="/kelas" class="px-3 py-1.5 rounded-full text-sm text-body hover:text-ink hover:bg-canvas-soft-2 transition">Kelas</a>
          <a href="/users" class="px-3 py-1.5 rounded-full text-sm text-body hover:text-ink hover:bg-canvas-soft-2 transition">User</a>
          <a href="/audit" class="px-3 py-1.5 rounded-full text-sm text-body hover:text-ink hover:bg-canvas-soft-2 transition">Audit</a>
        <% } %>
        <div class="w-px h-5 bg-hairline mx-2"></div>
        <span class="mono-label"><%= user.nama %></span>
        <a href="/auth/logout" class="btn-secondary btn-xs ml-2">Logout</a>
      </div>
    </div>
  </nav>
  <% } %>

  <main class="max-w-[1200px] mx-auto px-6 py-8">
    <% if (flashSuccess && flashSuccess.length > 0) { %>
      <div class="flash-success mb-6"><%= flashSuccess.join(' ') %></div>
    <% } %>
    <% if (flashError && flashError.length > 0) { %>
      <div class="flash-error mb-6"><%= flashError.join(' ') %></div>
    <% } %>
    <%- body %>
  </main>
</body>
</html>
