{{define "layout"}}<!doctype html>
<html lang="en" data-theme="light" data-default-theme="{{.DefaultTheme}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{.Title}} · Bounty Board</title>
  <link rel="stylesheet" href="/static/css/app.css">
  <script src="/static/js/theme.js"></script>
</head>
<body {{if .User}}data-logged-in="1"{{end}} data-nav="{{if .User}}{{.NavLayout}}{{else}}top{{end}}">
  <nav class="topnav">
    <a class="brand" href="/">Bounty Board</a>
    <div class="links">
      {{if .User}}
        {{if .User.Roles.Developer}}
          <a href="/board" {{if eq .Active "board"}}aria-current="page"{{end}}>Bounty Board</a>
          <a href="/my-tasks" {{if eq .Active "my-tasks"}}aria-current="page"{{end}}>My Tasks</a>
        {{end}}
        {{if .User.Roles.Consultant}}
          <a href="/consultant/board" {{if eq .Active "atomization"}}aria-current="page"{{end}}>Atomization</a>
          <a href="/consultant/reviews" {{if eq .Active "reviews"}}aria-current="page"{{end}}>Reviews</a>
          <a href="/consultant/pool" {{if eq .Active "pool"}}aria-current="page"{{end}}>Pool</a>
        {{end}}
        {{if .User.Roles.Admin}}
          <a href="/admin" {{if eq .Active "admin"}}aria-current="page"{{end}}>Admin</a>
        {{end}}
        <a href="/messages" {{if eq .Active "messages"}}aria-current="page"{{end}}>Messages</a>
        <a href="/metrics" {{if eq .Active "metrics"}}aria-current="page"{{end}}>Metrics</a>
      {{end}}
    </div>
    <div class="right">
      <button class="btn ghost small" id="nav-theme" type="button" aria-label="Toggle dark / light theme">◐</button>
      {{if .User}}
        <span style="position:relative">
          <button class="btn ghost small" id="nav-bell" type="button" aria-label="Notifications">🔔<span class="bell-badge" id="nav-bell-count" hidden></span></button>
          <div id="notif-panel" class="notif-panel" hidden>
            <ul id="notif-list" class="notif-list"></ul>
            <a href="/notifications" class="muted">All notifications →</a>
          </div>
        </span>{{end}}
      {{if .User}}
        <a href="/profile" aria-label="Your profile">
          {{if .User.AvatarFileID}}
            <img class="avatar" src="/files/{{.User.AvatarFileID}}" alt="">
          {{else}}
            <span class="avatar" aria-hidden="true">{{initials .User.Name}}</span>
          {{end}}
        </a>
        <button class="btn small" id="nav-logout" type="button">Log out</button>
      {{else}}
        <a class="btn small" href="/login">Log in</a>
      {{end}}
    </div>
  </nav>
  <main class="container{{if .Narrow}} narrow{{end}}">
    {{template "content" .}}
  </main>
  <div id="toasts" aria-live="polite"></div>
  <script type="module" src="/static/js/nav.js"></script>
  {{if .User}}<script type="module" src="/static/js/notifications.js"></script>
  <script type="module" src="/static/js/shortcuts.js"></script>
  <script type="module" src="/static/js/chat-widget.js"></script>{{end}}
  {{range .Scripts}}<script type="module" src="{{.}}"></script>
  {{end}}
</body>
</html>{{end}}
