{{define "head"}}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="color-scheme" content="light">
  <meta name="theme-color" content="#285b48">
  <title>{{.Title}} · Hamkar</title>
  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
  <script src="/static/theme.js"></script>
  <script src="/static/workspace.js" defer></script>
  <!-- Vazirmatn-font-face.css is vendored locally for offline use. -->
  <link rel="stylesheet" href="/static/vendor/Vazirmatn-font-face.css">
  <link rel="stylesheet" href="/static/vendor/fontawesome.min.css">
  <link rel="stylesheet" href="/static/style.css">
  <script src="/static/jalali-picker.js" defer></script>
  <script src="/static/vendor/htmx.min.js" defer></script>
</head>
<body>
{{end}}

{{define "theme-toggle"}}
<button type="button" class="theme-toggle" data-theme-toggle aria-label="Switch to dark mode" title="Change color mode">
  <span class="theme-sun" aria-hidden="true">☀</span>
  <span class="theme-moon" aria-hidden="true">☾</span>
</button>
{{end}}

{{define "sidebar"}}
<aside class="sidebar">
  <a class="brand" href="/">
    <span class="brand-mark">ه</span>
    <span>Hamkar<small>Team presence</small></span>
  </a>
  <nav>
    {{if .Workspace.ID}}
    <form method="post" action="/workspace/switch" class="workspace-switcher">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <label>Workspace<select name="workspace_id" aria-label="Switch workspace" data-workspace-switch>{{range .Workspaces}}<option value="{{.ID}}" {{if eq .ID $.Workspace.ID}}selected{{end}}>{{.Name}}</option>{{end}}</select></label>
    </form>
    {{end}}
    <a href="/" class="{{if eq .SelectedSection "dashboard"}}active{{end}}">
      <span class="nav-icon">⌂</span> Overview
    </a>
    <a href="/day" class="{{if eq .SelectedSection "day"}}active{{end}}">
      <span class="nav-icon">◉</span> Team day
    </a>
    <a href="/requests" class="{{if eq .SelectedSection "requests"}}active{{end}}">
      <span class="nav-icon">◫</span> My requests
    </a>
    <a href="/updates" class="{{if eq .SelectedSection "updates"}}active{{end}}">
      <span class="nav-icon">✎</span> Work updates
    </a>
    <a href="/board" class="{{if eq .SelectedSection "board"}}active{{end}}">
      <span class="nav-icon">▦</span> Team board
    </a>
    {{if eq .User.Role "admin"}}
    <p class="nav-label">ADMIN</p>
    <a href="/admin/requests" class="{{if eq .SelectedSection "admin"}}active{{end}}">
      <span class="nav-icon">✓</span> Approvals
      {{if .PendingCount}}<span class="nav-count">{{.PendingCount}}</span>{{end}}
    </a>
    <a href="/admin/users" class="{{if eq .SelectedSection "users"}}active{{end}}">
      <span class="nav-icon">◎</span> Teammates
    </a>
    <a href="/admin/workspaces" class="{{if eq .SelectedSection "workspaces"}}active{{end}}">
      <span class="nav-icon">▣</span> Workspaces
    </a>
    <a href="/reports" class="{{if eq .SelectedSection "reports"}}active{{end}}">
      <span class="nav-icon">↧</span> Reports
    </a>
    {{end}}
  </nav>
  <div class="sidebar-theme">{{template "theme-toggle" .}}<span>Appearance</span></div>
  <div class="sidebar-user">
    <a class="sidebar-profile-link" href="/profile" title="Open profile" aria-label="Open profile">{{if .User.AvatarURL}}<img class="avatar" src="{{.User.AvatarURL}}" alt="{{.User.DisplayName}}">{{else}}<span class="avatar">{{initial .User.DisplayName}}</span>{{end}}</a>
    <a class="sidebar-profile-details" href="/profile" title="Open profile"><strong>{{.User.DisplayName}}</strong><small>{{.User.Role}}</small></a>
  </div>
</aside>
{{end}}

{{define "shell-start"}}
{{template "head" .}}
<div class="app-shell">
  {{template "sidebar" .}}
  <main class="main">
{{end}}

{{define "shell-end"}}
  </main>
</div>
</body>
</html>
{{end}}

{{define "notice"}}
{{if .Flash}}<div class="notice success">{{.Flash}}</div>{{end}}
{{if .Error}}<div class="notice error">{{.Error}}</div>{{end}}
{{end}}
