{{define "nav"}}
<header>
  <!-- top bar -->
  <div class="hairline">
    <div class="max-w-[1280px] mx-auto px-8 flex items-center justify-between py-4">
      <div class="flex items-center gap-3">
        <a href="/" class="mono text-[13px] text-ink font-medium tracking-[0.02em] no-underline">restic-manager</a>
        <span class="mono text-[11px] text-ink-fade">{{.Version}}</span>
      </div>
      <div class="flex items-center gap-5">
        {{if .User}}
          <span class="mono text-xs text-ink-mute">{{.User.Username}}</span>
          <form method="post" action="/logout" class="inline">
            <button class="btn btn-ghost" type="submit">Sign out</button>
          </form>
        {{else}}
          <a href="/login" class="btn btn-ghost">Sign in</a>
        {{end}}
      </div>
    </div>
  </div>

  <!-- primary nav -->
  <div class="hairline">
    <div class="max-w-[1280px] mx-auto px-8 flex items-end justify-between">
      <nav class="flex items-end">
        <a href="/"        class="nav-tab {{if eq .Active "dashboard"}}active{{end}}">Dashboard</a>
        <a href="/alerts"  class="nav-tab {{if eq .Active "alerts"}}active{{end}}">Alerts{{if gt .OpenAlerts 0}} <span class="tag tag-critical mono ml-1">{{.OpenAlerts}}</span>{{end}}</a>
        <a href="/audit"   class="nav-tab {{if eq .Active "audit"}}active{{end}}">Audit</a>
        <a href="/settings" class="nav-tab {{if eq .Active "settings"}}active{{end}}">Settings</a>
      </nav>
      {{if .User}}
        <div class="pb-3">
          <a href="/hosts/new" class="btn btn-primary">+ Add host</a>
        </div>
      {{end}}
    </div>
  </div>
</header>
{{end}}