base.templ

package layouts

import "context"
import "encoding/json"
import "github.com/sarg3nt/gearbox/internal/framework/auth"
import "github.com/sarg3nt/gearbox/internal/framework/models"
import "github.com/sarg3nt/gearbox/internal/framework/ui"
import "github.com/sarg3nt/gearbox/internal/framework/middleware"
import "strings"

// activeBoxIDForChip returns the active box's ID, or "" if no box is
// selected — used as the data-active-box-id attribute on the chip so the
// switcher palette can mark the current row.
func activeBoxIDForChip(active *models.BoxConfig, has bool) string {
	if !has || active == nil {
		return ""
	}
	return active.ID
}

// gearLabelForPath maps a request path to its display label (the human-
// readable gear name shown in the header breadcrumb). Returns "" for paths
// the breadcrumb shouldn't claim (e.g. the bare root, which RootRedirect
// resolves anyway).
func gearLabelForPath(path string) string {
	switch {
	case path == "/" || path == "":
		return ""
	case path == "/bx" || strings.HasPrefix(path, "/bx/"):
		return "Bx"
	case path == "/home" || strings.HasPrefix(path, "/home/"):
		// /home's title role is taken over by the per-page board selector
		// — surfacing both "Home" in the breadcrumb and the board name
		// next to it is redundant. The page emits the board name via the
		// hoisted page-header-source.
		return ""
	case path == "/haproxy" || strings.HasPrefix(path, "/haproxy/"):
		return "HAProxy"
	case path == "/metrics" || strings.HasPrefix(path, "/metrics/"):
		return "Metrics"
	case path == "/logs" || strings.HasPrefix(path, "/logs/"):
		return "Logs"
	case path == "/services" || strings.HasPrefix(path, "/services/"):
		return "Services"
	case path == "/certificates" || strings.HasPrefix(path, "/certificates/"):
		return "Certificates"
	case path == "/traffic" || strings.HasPrefix(path, "/traffic/"):
		return "Traffic"
	case path == "/alerts" || strings.HasPrefix(path, "/alerts/"):
		return "Alerts"
	case path == "/os-updates" || strings.HasPrefix(path, "/os-updates/"):
		return "OS Updates"
	case path == "/config/firewall" || strings.HasPrefix(path, "/config/firewall/"):
		return "Firewall Configuration"
	case path == "/config/haproxy" || strings.HasPrefix(path, "/config/haproxy/"):
		return "HAProxy Configuration"
	case path == "/settings" || strings.HasPrefix(path, "/settings/"):
		return "Settings"
	case path == "/welcome":
		return "Welcome"
	}
	return ""
}


// encodeBoxesJSON serializes the box roster for the switcher palette's
// dataset. We only ship `id` and `name` — the agent URL and API key never
// leave the server, even though they are present in the source slice.
func encodeBoxesJSON(boxes []models.BoxConfig) string {
	type lite struct {
		ID   string `json:"id"`
		Name string `json:"name"`
	}
	out := make([]lite, 0, len(boxes))
	for _, b := range boxes {
		out = append(out, lite{ID: b.ID, Name: b.Name})
	}
	b, err := json.Marshal(out)
	if err != nil {
		return "[]"
	}
	return string(b)
}

// encodeGearsJSON serializes the per-user gear list for the command
// palette. Filters to integrations the user can view AND that are
// enabled — disabled gears would point at empty pages and clutter the
// list. The label / path mapping mirrors what OrderedIntegrationLinks
// renders into the sidebar.
func encodeGearsJSON(ctx context.Context) string {
	type lite struct {
		Name    string `json:"name"`
		Label   string `json:"label"`
		Path    string `json:"path"`
		Enabled bool   `json:"enabled"`
	}
	out := make([]lite, 0, 16)
	integrations, ok := auth.GetGearOrderFromContext(ctx)
	if ok {
		for _, i := range integrations {
			if !i.Enabled {
				continue
			}
			if !canViewIntegration(ctx, i.Name) {
				continue
			}
			path := integrationPath(i.Name)
			out = append(out, lite{
				Name:    i.Name,
				Label:   gearLabelForName(i.Name),
				Path:    path,
				Enabled: i.Enabled,
			})
		}
	}
	b, err := json.Marshal(out)
	if err != nil {
		return "[]"
	}
	return string(b)
}

// encodePagesJSON serializes the user's reachable settings/profile pages
// for the command palette. Source of truth is models.SettingsPagesFor —
// the Settings template renders cards from the same slice, so the palette
// can never dangle a 403 destination or omit a page the user can reach.
// Augmented with palette-only entries (Settings root, Profile sub-pages,
// Add-a-box) that don't need their own Settings card.
func encodePagesJSON(ctx context.Context) string {
	type lite struct {
		Name  string `json:"name"`
		Label string `json:"label"`
		Path  string `json:"path"`
	}
	user, _ := auth.GetUserFromContext(ctx)
	perms, _ := auth.GetUserPermissionsFromContext(ctx)

	pages := models.SettingsPagesFor(user, perms)
	out := make([]lite, 0, len(pages)+4)
	// Always reachable, but not their own Settings card.
	out = append(out, lite{Name: "settings", Label: "Settings", Path: "/settings"})
	out = append(out, lite{Name: "change-password", Label: "Change password", Path: "/settings/change-password"})
	for _, p := range pages {
		out = append(out, lite{Name: p.Name, Label: p.Label, Path: p.Path})
		// Surface "Add a box" alongside the Boxes card for one-keystroke
		// access from anywhere — only when the user can see Boxes itself.
		if p.Name == "boxes" {
			out = append(out, lite{Name: "boxes-new", Label: "Add a box", Path: "/settings/boxes/new"})
		}
	}

	b, err := json.Marshal(out)
	if err != nil {
		return "[]"
	}
	return string(b)
}

// gearLabelForName returns the user-facing label for a gear name. Mirrors
// the labels used by SidebarLink* templates so the palette matches the
// sidebar's vocabulary exactly.
func gearLabelForName(name string) string {
	switch name {
	case "bx":
		return "Bx"
	case "home":
		return "Home"
	case "haproxy":
		return "HAProxy"
	case "metrics":
		return "Metrics"
	case "logs":
		return "Logs"
	case "services":
		return "Services"
	case "certificates":
		return "Certificates"
	case "traffic":
		return "Traffic"
	case "alerts":
		return "Alerts"
	case "os_updates":
		return "OS Updates"
	}
	return name
}

// isActivePath checks if the current path matches the nav link
func isActivePath(href, currentPath string) bool {
	if href == "/" {
		return currentPath == "/" || currentPath == ""
	}
	return strings.HasPrefix(currentPath, href)
}

// getPath extracts the path from the variadic argument
func getPath(paths []string) string {
	if len(paths) > 0 {
		return paths[0]
	}
	return ""
}

// shouldHideSidebar determines if the sidebar should be hidden based on context
// Returns true if there are no servers configured (initial setup state)
func shouldHideSidebar(ctx context.Context, currentPath string) bool {
	// Check if gear status is in context - if not, we're in initial setup
	_, hasPluginStatus := auth.GetGearStatusFromContext(ctx)
	_, hasPluginOrder := auth.GetGearOrderFromContext(ctx)

	// If neither gear status nor order is set, we're in initial setup (no servers)
	// Hide the sidebar to provide a cleaner first-time experience
	return !hasPluginStatus && !hasPluginOrder
}

templ Base(title string, user *models.User, currentPath ...string) {
	<!DOCTYPE html>
	<html lang="en" class="h-full">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>{ title } - Gearbox</title>
		<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
		<link rel="alternate icon" href="/favicon.ico"/>
		<!-- Asset Loading: CDN (production) vs Local (dev with USE_LOCAL_ASSETS=true) -->
		if middleware.UseLocalAssets(ctx) {
			<!-- Local assets for CSP-compliant development -->
			<script src="/static/js/vendor/tailwind.js"></script>
		} else {
			<!-- CDN assets for production (always up-to-date) -->
			<script src="https://cdn.tailwindcss.com"></script>
		}
		<script>
			// Configure Tailwind for dark mode
			tailwind.config = {
				darkMode: 'class',
				theme: {
					extend: {
						colors: {
							sidebar: {
								light: '#ffffff',
								dark: '#1e293b'
							}
						}
					}
				}
			}
		</script>
		<script>
			// Immediately apply sidebar state to prevent flash
			(function() {
				const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
				if (isCollapsed) {
					document.documentElement.classList.add('sidebar-initially-collapsed');
				}
			})();
		</script>
		if middleware.UseLocalAssets(ctx) {
			<!-- Local JavaScript libraries -->
			<script src="/static/js/vendor/htmx.min.js"></script>
			<script src="/static/js/vendor/morphdom-umd.min.js"></script>
			<script src="/static/js/vendor/chart.umd.min.js"></script>
			<script src="/static/js/vendor/hammer.min.js"></script>
			<script src="/static/js/vendor/chartjs-plugin-zoom.min.js"></script>
			<link rel="stylesheet" href="/static/css/vendor/tabulator.min.css"/>
			<script src="/static/js/vendor/tabulator.min.js"></script>
			<script src="/static/js/vendor/sortable.min.js"></script>
		} else {
			<!-- CDN JavaScript libraries -->
			<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"></script>
			<script src="https://unpkg.com/morphdom@2.7.4/dist/morphdom-umd.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
			<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css"/>
			<script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
		}
		<!-- Chart widget styles and utilities -->
		<link rel="stylesheet" href="/static/css/charts/charts.css"/>
		<script src="/static/js/charts/chart-defaults.js"></script>
		<style>
			/* SortableJS sidebar drag styles (single class names required by SortableJS) */
			.sortable-ghost {
				@apply bg-blue-50 dark:bg-slate-700;
			}
			.sortable-chosen {
				@apply opacity-50;
			}
			.sortable-drag {
				@apply opacity-75;
			}
			/* Base styles */
			.metric-card {
				@apply bg-white dark:bg-slate-800 rounded-lg shadow p-6;
			}
			.metric-value {
				@apply text-3xl font-bold text-blue-600 dark:text-blue-400;
			}
			.metric-label {
				@apply text-sm text-gray-600 dark:text-gray-400;
			}
			.status-up {
				@apply text-green-600 dark:text-green-400;
			}
			.status-down {
				@apply text-red-600 dark:text-red-400;
			}
			.status-degraded {
				@apply text-yellow-600 dark:text-yellow-400;
			}

			/* Global form control styles */
			select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"] {
				height: 42px;
				min-height: 42px;
			}
			select {
				cursor: pointer;
			}
			input[type="checkbox"] {
				width: 1.25rem;
				height: 1.25rem;
				cursor: pointer;
			}

			/* Compact controls inside the header bar. Every page's
			   per-page-source div is hoisted into #header-page-content,
			   so this single rule slims every gear's toolbar without
			   touching individual templates. Wins on specificity over
			   per-page Tailwind classes (ID beats class). */
			#header-page-content select,
			#header-page-content input[type="text"],
			#header-page-content input[type="search"],
			#header-page-content input[type="number"] {
				height: 30px;
				min-height: 30px;
				padding-top: 0.125rem;
				padding-bottom: 0.125rem;
				font-size: 0.8125rem; /* 13px */
				line-height: 1rem;
			}
			#header-page-content select {
				padding-left: 0.5rem;
				padding-right: 1.75rem;
			}
			#header-page-content input[type="text"],
			#header-page-content input[type="search"] {
				padding-left: 0.625rem;
				padding-right: 0.625rem;
			}
			/* Header buttons (refresh, copy, download, …) get the same
			   compact footprint as the surrounding selects. */
			#header-page-content button {
				min-height: 30px;
				padding-top: 0.25rem;
				padding-bottom: 0.25rem;
			}

			/* Sidebar transition */
			.sidebar {
				transition: width 0.3s ease-in-out;
				overflow: hidden;
			}
			.sidebar-collapsed {
				width: 4rem;
			}
			.sidebar-expanded {
				width: 16rem;
			}
			.sidebar-text {
				/* When expanding: delay opacity until sidebar has expanded enough */
				transition: opacity 0.15s ease-in-out 0.15s;
				white-space: nowrap;
			}
			.sidebar-collapsed .sidebar-text {
				/* When collapsed/collapsing: no delay, hide immediately.
				   Also collapse layout width so the nav icon can center
				   inside the 4rem rail — without `width: 0` the
				   invisible label still occupies its intrinsic width and
				   shoves the icon left. */
				transition:
					opacity 0.1s ease-in-out 0s,
					width 0.2s ease-in-out 0s;
				opacity: 0;
				width: 0;
				overflow: hidden;
				display: inline-block; /* needed so width: 0 takes effect */
			}

			/* Collapsed nav links: center the icon. The default expanded
			   layout uses `flex items-center space-x-3 px-4 border-l-4`
			   which adds ~20px of left offset (border + padding) plus a
			   space-x-3 gap before the text. When the sidebar shrinks
			   to 4rem and the text width collapses to 0, those rules
			   leave the icon stranded near the left edge / clipped on
			   the right. Force-center, drop the side padding, and
			   neutralize the space-x-3 margin (which Tailwind keeps
			   applying to the SVG because the preceding `.hidden`
			   drag-handle uses the class `.hidden` rather than the
			   HTML `[hidden]` attribute that space-x-3 filters on). */
			.sidebar-collapsed .nav-link,
			.sidebar-initially-collapsed .nav-link {
				justify-content: center;
				padding-left: 0;
				padding-right: 0;
			}
			.sidebar-collapsed .nav-link > * + *,
			.sidebar-initially-collapsed .nav-link > * + * {
				margin-left: 0;
			}

			/* Sidebar nav scrollbar — overlay-style (Slack/Linear pattern):
			   invisible until hover, then a thin pill fades in. Keeps the
			   sidebar quiet on tall viewports; usable when the gear list
			   exceeds the available height. */
			.sidebar-overlay-scroll {
				/* Firefox */
				scrollbar-width: thin;
				scrollbar-color: transparent transparent;
				transition: scrollbar-color 0.2s ease-in-out;
			}
			.sidebar-overlay-scroll:hover {
				scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
			}
			/* WebKit (Chrome, Safari, Edge) */
			.sidebar-overlay-scroll::-webkit-scrollbar {
				width: 6px;
			}
			.sidebar-overlay-scroll::-webkit-scrollbar-track {
				background: transparent;
			}
			.sidebar-overlay-scroll::-webkit-scrollbar-thumb {
				background: transparent;
				border-radius: 3px;
				transition: background 0.2s ease-in-out;
			}
			.sidebar-overlay-scroll:hover::-webkit-scrollbar-thumb {
				background: rgba(148, 163, 184, 0.5);
			}
			.dark .sidebar-overlay-scroll:hover::-webkit-scrollbar-thumb {
				background: rgba(100, 116, 139, 0.5);
			}

			/* Initial sidebar state from localStorage */
			.sidebar-initially-collapsed #sidebar {
				width: 4rem;
			}
			.sidebar-initially-collapsed #main-content {
				margin-left: 4rem;
			}
			.sidebar-initially-collapsed header {
				left: 4rem;
			}
			.sidebar-initially-collapsed .sidebar-text {
				opacity: 0;
			}

			/* Below md (~768px) pop the page's toolbar out as a sheet
			   under the header. `#header-page-content.filters-open` uses
			   ID+class specificity (1,1,0) which beats the .hidden
			   utility (0,1,0), so no !important needed.

			   Layout strategy inside the sheet:
			   - Selects, text inputs, and search inputs each take a
			     full row (one per row) so labels and placeholders are
			     legible on a phone-width screen.
			   - Icon-style buttons (refresh, copy, download,
			     fullscreen) share a row at the bottom — stacking them
			     would look silly on pages with several icon buttons
			     (Logs is the motivating example). They're recognized
			     as "icon buttons" by being <button> elements that
			     contain only an <svg> child after my own padding rules
			     normalize them; CSS just packs naturally-sized buttons
			     together with flex-wrap. */
			@media (max-width: 767px) {
				#header-page-content.filters-open {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					align-content: flex-start;
					gap: 0.5rem;
					position: fixed;
					top: 55px;
					left: 4rem;
					right: 0;
					padding: 0.75rem 1rem;
					background-color: #ffffff;
					border-bottom: 1px solid #e5e7eb;
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
					z-index: 39;
					max-height: 75vh;
					overflow-y: auto;
				}
				.dark #header-page-content.filters-open {
					background-color: rgb(30 41 59);   /* slate-800 */
					border-bottom-color: rgb(51 65 85); /* slate-700 */
				}
				/* Hide the per-page spacer div (flex-1) — it's only
				   useful for the inline-row layout. */
				#header-page-content.filters-open > .flex-1 {
					display: none;
				}
				/* Each inner control row (the per-page wrapper that
				   bundles selects + inputs + buttons) becomes a flex
				   wrap so its children can mix full-row wide controls
				   with shared-row icon buttons. */
				#header-page-content.filters-open .flex {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					gap: 0.5rem;
					margin: 0;
				}
				/* Tailwind's space-x-* utilities add margin-left to
				   every child after the first. With our gap-based
				   layout that's redundant and creates uneven shifting,
				   so neutralise them. */
				#header-page-content.filters-open .space-x-1 > :not([hidden]) ~ :not([hidden]),
				#header-page-content.filters-open .space-x-2 > :not([hidden]) ~ :not([hidden]),
				#header-page-content.filters-open .space-x-3 > :not([hidden]) ~ :not([hidden]),
				#header-page-content.filters-open .space-x-4 > :not([hidden]) ~ :not([hidden]) {
					margin-left: 0;
				}
				/* Wide controls (selects + text inputs) force a new
				   row by being 100%-wide flex items. */
				#header-page-content.filters-open select,
				#header-page-content.filters-open input[type="text"],
				#header-page-content.filters-open input[type="search"],
				#header-page-content.filters-open input[type="number"] {
					flex: 1 0 100%;
					width: 100%;
				}
				/* Input wrappers (e.g. <div class="relative"> with a
				   clear button inside) also take a full row so the
				   input inside can stretch. */
				#header-page-content.filters-open .relative {
					flex: 1 0 100%;
					width: 100%;
				}
				/* Buttons keep their natural width and flow inline —
				   the row at the bottom of the sheet packs the icon
				   buttons (refresh, copy, download, fullscreen, …). */
				#header-page-content.filters-open button {
					flex: 0 0 auto;
				}
				/* The font-size slider on /logs is inside a small flex
				   container; let it sit on its own row with its label
				   and current-value badge. */
				#header-page-content.filters-open input[type="range"] {
					flex: 1 1 auto;
				}
			}

			/* Below md (~768px) force the sidebar to its collapsed (icon-
			   only) rail regardless of the user's saved preference — full-
			   width sidebar eats most of a phone viewport. ID-scoped rules
			   beat the .sidebar-expanded/.sidebar-collapsed class rules on
			   specificity, so the user's toggle state is left intact and
			   restored when the viewport widens again. */
			@media (max-width: 767px) {
				#sidebar {
					width: 4rem;
				}
				#sidebar .sidebar-text {
					opacity: 0;
					width: 0;
					overflow: hidden;
					display: inline-block;
				}
				#sidebar #sidebar-toggle-btn,
				#sidebar #sidebar-edit-banner {
					display: none;
				}
				#main-content {
					margin-left: 4rem;
				}
				header {
					left: 4rem;
				}
				/* Center the nav icons just like .sidebar-collapsed does. */
				#sidebar .nav-link {
					justify-content: center;
					padding-left: 0;
					padding-right: 0;
				}
				#sidebar .nav-link > * + * {
					margin-left: 0;
				}
			}

			/* Main content transition */
			.main-content {
				transition: margin-left 0.3s ease-in-out;
			}

			/* Sidebar-aware responsive grid for backend cards */
			/* When sidebar is expanded (256px), switch to 2 cols earlier and 1 col earlier */
			@media (max-width: 1279px) {
				.sidebar-expanded ~ #main-content .backend-card-grid,
				:not(.sidebar-initially-collapsed) #main-content .backend-card-grid {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}
			}
			@media (max-width: 1023px) {
				.backend-card-grid {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}
			}
			@media (max-width: 767px) {
				.backend-card-grid {
					grid-template-columns: repeat(1, minmax(0, 1fr));
				}
			}

			/* Dark mode Tabulator (legacy — for non-datagrid-unifi instances like statusgrid).
			   New tables should opt into the UniFi skin via createDataGrid(). */
			.dark .tabulator:not(.datagrid-unifi) {
				background-color: #1e293b;
				border-color: #475569;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header {
				background-color: #334155;
				border-color: #475569;
				color: #e2e8f0;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-col {
				background-color: #334155;
				border-color: #475569;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-col .tabulator-col-content {
				color: #e2e8f0;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
				color: #e2e8f0;
			}
			/* Header column hover */
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-col:hover {
				background-color: #475569 !important;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-col:hover .tabulator-col-content,
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-col:hover .tabulator-col-title {
				color: #ffffff !important;
			}
			.tabulator .tabulator-header .tabulator-header-filter input,
			.tabulator .tabulator-header .tabulator-header-filter select {
				padding-top: 2px;
				padding-bottom: 2px;
				min-height: unset;
				height: 24px;
				font-size: 0.75rem;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-header-filter input,
			.dark .tabulator:not(.datagrid-unifi) .tabulator-header .tabulator-header-filter select {
				background-color: #1e293b;
				border-color: #475569;
				color: #e2e8f0;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row {
				background-color: #1e293b !important;
				border-color: #475569;
				color: #e2e8f0;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
				background-color: #1e293b !important;
				border-color: #475569;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even,
			.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even .tabulator-cell {
				background-color: #273549 !important;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-odd,
			.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-odd .tabulator-cell {
				background-color: #1e293b !important;
			}
			/* Hover states - Tabulator uses .tabulator-selectable:hover */
			@media (hover:hover) and (pointer:fine) {
				.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selectable:hover {
					background-color: #64748b !important;
					color: #ffffff !important;
				}
				.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selectable:hover .tabulator-cell {
					background-color: #64748b !important;
					color: #ffffff !important;
				}
				.dark .tabulator:not(.datagrid-unifi) .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selectable:hover .tabulator-frozen {
					background-color: #64748b !important;
					color: #ffffff !important;
				}
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-footer {
				background-color: #334155;
				border-color: #475569;
				color: #e2e8f0;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-footer .tabulator-page {
				background-color: #1e293b;
				border-color: #475569;
				color: #e2e8f0;
			}
			.dark .tabulator:not(.datagrid-unifi) .tabulator-footer .tabulator-page.active {
				background-color: #3b82f6;
				color: white;
			}

			/* Dropdown menu */
			.dropdown-menu {
				display: none;
			}
			.dropdown-menu.show {
				display: block;
			}
		</style>
		<!-- Custom CSS Components -->
		<link rel="stylesheet" href="/static/css/utilities.css"/>
		<link rel="stylesheet" href="/static/css/components/cards.css"/>
		<link rel="stylesheet" href="/static/css/components/modals.css"/>
		<link rel="stylesheet" href="/static/css/components/buttons.css"/>
		<link rel="stylesheet" href="/static/css/components/datagrid.css"/>
		<script src="/static/js/common/datagrid.js"></script>
		<script>
			// Theme management
			function getThemePreference() {
				const stored = localStorage.getItem('theme');
				if (stored) return stored;
				return 'system';
			}

			function getEffectiveTheme() {
				const pref = getThemePreference();
				if (pref === 'system') {
					return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
				}
				return pref;
			}

			function applyTheme() {
				const theme = getEffectiveTheme();
				if (theme === 'dark') {
					document.documentElement.classList.add('dark');
				} else {
					document.documentElement.classList.remove('dark');
				}
				updateThemeIcon();
			}

			function setTheme(theme) {
				localStorage.setItem('theme', theme);
				applyTheme();
				// Close dropdown
				document.getElementById('theme-dropdown')?.classList.remove('show');
			}

			function updateThemeIcon() {
				const pref = getThemePreference();
				const btnLight = document.getElementById('theme-btn-light');
				const btnDark = document.getElementById('theme-btn-dark');
				const btnSystem = document.getElementById('theme-btn-system');

				// Reset all buttons
				[btnLight, btnDark, btnSystem].forEach(btn => {
					if (btn) {
						btn.classList.remove('bg-blue-100', 'dark:bg-blue-900', 'text-blue-600', 'dark:text-blue-400');
					}
				});

				// Highlight active button
				const activeBtn = pref === 'light' ? btnLight : pref === 'dark' ? btnDark : btnSystem;
				if (activeBtn) {
					activeBtn.classList.add('bg-blue-100', 'dark:bg-blue-900', 'text-blue-600', 'dark:text-blue-400');
				}
			}

			function toggleUserDropdown() {
				const dropdown = document.getElementById('user-dropdown');
				const button = document.getElementById('user-button');
				if (dropdown && button) {
					const isShowing = dropdown.classList.contains('show');
					if (!isShowing) {
						// Position the dropdown above the button, to the right of the sidebar
						const buttonRect = button.getBoundingClientRect();
						const dropdownHeight = dropdown.offsetHeight || 300; // Estimate if not visible

						// Position dropdown to appear above the button and to its right
						dropdown.style.left = buttonRect.right + 8 + 'px';
						dropdown.style.bottom = (window.innerHeight - buttonRect.bottom) + 'px';
						dropdown.style.top = 'auto';
					}
					dropdown.classList.toggle('show');
				}
			}

			// Apply theme immediately to prevent flash
			applyTheme();

			// Listen for system theme changes
			window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
				if (getThemePreference() === 'system') {
					applyTheme();
				}
			});

			// Close dropdown when clicking outside
			document.addEventListener('click', function(e) {
				const userDropdown = document.getElementById('user-dropdown');
				const userButton = document.getElementById('user-button');
				if (userDropdown && userButton && !userButton.contains(e.target) && !userDropdown.contains(e.target)) {
					userDropdown.classList.remove('show');
				}
			});

			// Sidebar management
			function getSidebarState() {
				const stored = localStorage.getItem('sidebarCollapsed');
				return stored === 'true';
			}

			// Header "Filters" popover (narrow viewports only). Pops
			// #header-page-content out from its inline header slot into a
			// fixed sheet just below the header. The state is one CSS
			// class on the content node — no DOM moves, so per-page
			// listeners on the controls keep working untouched. Auto-
			// closes on Escape, click outside, and when the viewport
			// widens back to md+.
			function toggleHeaderFilters() {
				const content = document.getElementById('header-page-content');
				const btn = document.getElementById('header-filters-btn');
				if (!content || !btn) return;
				const opening = !content.classList.contains('filters-open');
				content.classList.toggle('filters-open');
				btn.setAttribute('aria-expanded', opening ? 'true' : 'false');
			}
			// Expose to other modules (shortcut-help.js calls this when
			// `/` is pressed and the focus target lives in the hidden
			// header content slot).
			window.toggleHeaderFilters = toggleHeaderFilters;
			function closeHeaderFilters() {
				const content = document.getElementById('header-page-content');
				const btn = document.getElementById('header-filters-btn');
				if (!content || !btn) return;
				if (!content.classList.contains('filters-open')) return;
				content.classList.remove('filters-open');
				btn.setAttribute('aria-expanded', 'false');
			}
			document.addEventListener('click', function (e) {
				const content = document.getElementById('header-page-content');
				if (!content || !content.classList.contains('filters-open')) return;
				const btn = document.getElementById('header-filters-btn');
				if (btn && btn.contains(e.target)) return;
				if (content.contains(e.target)) return;
				closeHeaderFilters();
			});
			document.addEventListener('keydown', function (e) {
				if (e.key !== 'Escape') return;
				const content = document.getElementById('header-page-content');
				if (content && content.classList.contains('filters-open')) {
					closeHeaderFilters();
				}
			});
			window.addEventListener('resize', function () {
				if (window.matchMedia('(min-width: 768px)').matches) {
					closeHeaderFilters();
				}
			});

			function toggleSidebar() {
				const sidebar = document.getElementById('sidebar');
				const mainContent = document.getElementById('main-content');
				const header = document.querySelector('header');
				const iconCollapse = document.getElementById('sidebar-icon-collapse');
				const iconExpand = document.getElementById('sidebar-icon-expand');
				const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

				if (isCollapsed) {
					sidebar.classList.remove('sidebar-collapsed');
					sidebar.classList.add('sidebar-expanded');
					mainContent.classList.remove('ml-16');
					mainContent.classList.add('ml-64');
					if (header) {
						header.style.left = '16rem'; // 64 * 4px = 256px = 16rem
					}
					// Show collapse icon, hide expand icon
					if (iconCollapse) iconCollapse.classList.remove('hidden');
					if (iconExpand) iconExpand.classList.add('hidden');
					localStorage.setItem('sidebarCollapsed', 'false');
				} else {
					sidebar.classList.add('sidebar-collapsed');
					sidebar.classList.remove('sidebar-expanded');
					mainContent.classList.add('ml-16');
					mainContent.classList.remove('ml-64');
					if (header) {
						header.style.left = '4rem'; // 16 * 4px = 64px = 4rem
					}
					// Show expand icon, hide collapse icon
					if (iconCollapse) iconCollapse.classList.add('hidden');
					if (iconExpand) iconExpand.classList.remove('hidden');
					localStorage.setItem('sidebarCollapsed', 'true');
				}
			}

			function applySidebarState() {
				const isCollapsed = getSidebarState();
				const sidebar = document.getElementById('sidebar');
				const mainContent = document.getElementById('main-content');
				const header = document.querySelector('header');
				const iconCollapse = document.getElementById('sidebar-icon-collapse');
				const iconExpand = document.getElementById('sidebar-icon-expand');

				// IMPORTANT: apply the correct sidebar/main-content classes
				// BEFORE removing the .sidebar-initially-collapsed pin from
				// <html>. Otherwise on a navigation where the user has the
				// sidebar collapsed:
				//   1. <html>.sidebar-initially-collapsed is removed → the
				//      ID-scoped width override goes away.
				//   2. The sidebar still carries its default
				//      .sidebar-expanded class from the server HTML, so the
				//      cascade snaps width to 16rem.
				//   3. JS then adds .sidebar-collapsed → width transitions
				//      back to 4rem.
				// Step 2→3 animates because of `transition: width 0.3s` on
				// .sidebar, producing a visible "twitch" left-to-right on
				// every gear click. Applying classes first keeps the
				// computed width pinned the whole time.
				if (sidebar && mainContent) {
					if (isCollapsed) {
						sidebar.classList.add('sidebar-collapsed');
						sidebar.classList.remove('sidebar-expanded');
						mainContent.classList.add('ml-16');
						mainContent.classList.remove('ml-64');
						if (header) {
							header.style.left = '4rem';
						}
						// Show expand icon, hide collapse icon
						if (iconCollapse) iconCollapse.classList.add('hidden');
						if (iconExpand) iconExpand.classList.remove('hidden');
					} else {
						sidebar.classList.remove('sidebar-collapsed');
						sidebar.classList.add('sidebar-expanded');
						mainContent.classList.remove('ml-16');
						mainContent.classList.add('ml-64');
						if (header) {
							header.style.left = '16rem';
						}
						// Show collapse icon, hide expand icon
						if (iconCollapse) iconCollapse.classList.remove('hidden');
						if (iconExpand) iconExpand.classList.add('hidden');
					}
				}

				// Now safe to drop the initial-state pin — the regular
				// class-based rules resolve to the same width.
				document.documentElement.classList.remove('sidebar-initially-collapsed');
			}

			// Sidebar edit mode state
			let sidebarEditMode = false;
			let sidebarSortable = null;

			// Prevent navigation when in edit mode
			function preventNavClick(e) {
				e.preventDefault();
			}

			function toggleSidebarEditMode() {
				sidebarEditMode = !sidebarEditMode;
				const iconEdit = document.getElementById('sidebar-icon-edit');
				const iconSave = document.getElementById('sidebar-icon-save');
				const banner = document.getElementById('sidebar-edit-banner');
				const sidebar = document.getElementById('sidebar');
				const dragHandles = document.querySelectorAll('.nav-drag-handle');
				const navLinks = document.querySelectorAll('.nav-link');

				if (sidebarEditMode) {
					// Enter edit mode
					if (iconEdit) iconEdit.classList.add('hidden');
					if (iconSave) iconSave.classList.remove('hidden');
					if (banner) {
						banner.classList.remove('hidden');
						banner.classList.add('flex');
					}
					if (sidebar) sidebar.classList.add('sidebar-edit-mode');

					// Show drag handle indicators
					dragHandles.forEach(handle => handle.classList.remove('hidden'));

					// Prevent link navigation — entire item is draggable
					// Remove first to avoid duplicate listeners from rapid toggling
					navLinks.forEach(link => {
						link.removeEventListener('click', preventNavClick);
						link.addEventListener('click', preventNavClick);
						link.style.cursor = 'grab';
					});

					// Initialize Sortable if not already done
					initSidebarSortable();
				} else {
					// Exit edit mode (save)
					if (iconEdit) iconEdit.classList.remove('hidden');
					if (iconSave) iconSave.classList.add('hidden');
					if (banner) {
						banner.classList.add('hidden');
						banner.classList.remove('flex');
					}
					if (sidebar) sidebar.classList.remove('sidebar-edit-mode');

					// Hide drag handle indicators
					dragHandles.forEach(handle => handle.classList.add('hidden'));

					// Restore link behavior
					navLinks.forEach(link => {
						link.removeEventListener('click', preventNavClick);
						link.style.cursor = '';
					});

					// Save the new order
					saveSidebarOrder();
				}
			}

			// Right-click on any sidebar gear opens a tiny context menu with
			// a "Reorder gears" entry. Lets the user discover the feature
			// without needing the command palette — matches the Linear
			// pattern (right-click → reorder).
			document.addEventListener('contextmenu', function (e) {
				const item = e.target.closest('.nav-item-draggable');
				if (!item) return;
				e.preventDefault();
				showSidebarContextMenu(e.clientX, e.clientY);
			});

			function showSidebarContextMenu(x, y) {
				let menu = document.getElementById('sidebar-context-menu');
				if (!menu) {
					menu = document.createElement('div');
					menu.id = 'sidebar-context-menu';
					menu.className = 'fixed z-[80] min-w-[160px] py-1 rounded-lg bg-white dark:bg-slate-800 shadow-2xl border border-gray-200 dark:border-slate-700';
					const btn = document.createElement('button');
					btn.type = 'button';
					btn.className = 'w-full text-left px-3 py-1.5 text-sm text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-slate-700 flex items-center gap-2';
					const icon = document.createElement('span');
					icon.className = 'inline-block w-4 h-4 text-gray-500 dark:text-gray-400';
					icon.textContent = '↕';
					const label = document.createElement('span');
					label.textContent = 'Reorder gears';
					btn.appendChild(icon);
					btn.appendChild(label);
					btn.addEventListener('click', function () {
						hideSidebarContextMenu();
						if (!sidebarEditMode) toggleSidebarEditMode();
					});
					menu.appendChild(btn);
					document.body.appendChild(menu);
				}
				menu.style.left = x + 'px';
				menu.style.top = y + 'px';
				menu.classList.remove('hidden');
				// Dismiss on next outside click / escape.
				setTimeout(function () {
					document.addEventListener('click', hideSidebarContextMenu, { once: true });
					document.addEventListener('keydown', sidebarContextMenuEsc, { once: true });
				}, 0);
			}
			function sidebarContextMenuEsc(e) {
				if (e.key === 'Escape') hideSidebarContextMenu();
			}
			function hideSidebarContextMenu() {
				const menu = document.getElementById('sidebar-context-menu');
				if (menu) menu.classList.add('hidden');
				document.removeEventListener('keydown', sidebarContextMenuEsc);
			}

			function initSidebarSortable() {
				if (typeof window.Sortable === 'undefined') {
					console.error('Sortable not loaded!');
					return;
				}

				const navList = document.getElementById('sidebar-nav-list');
				if (!navList) {
					console.error('Navigation list not found!');
					return;
				}

				// Destroy existing sortable instance if it exists
				if (sidebarSortable) {
					sidebarSortable.destroy();
				}

				// Create new sortable instance
				// Note: ghostClass/chosenClass/dragClass only accept a single class name
				// (SortableJS uses classList.add internally). Custom classes are defined in <style>.
				sidebarSortable = window.Sortable.create(navList, {
					animation: 200,
					draggable: '.nav-item-draggable',
					ghostClass: 'sortable-ghost',
					chosenClass: 'sortable-chosen',
					dragClass: 'sortable-drag',
					onEnd: function(evt) {
						console.log('Item moved from index', evt.oldIndex, 'to', evt.newIndex);
					}
				});
			}

			function saveSidebarOrder() {
				const navItems = document.querySelectorAll('.nav-item-draggable');
				// API expects a flat map: {"gearName": sortIndex, ...}
				const orders = {};

				navItems.forEach((item, index) => {
					const gearName = item.dataset.gearName;
					if (gearName) {
						orders[gearName] = index;
					}
				});

				console.log('Saving sidebar order:', orders);

				// Build URL — server param is optional, API defaults to first enabled server
				let url = '/api/gears/sort-order';
				const serverID = window.ServerSelector ? window.ServerSelector.getSelectedServer() : null;
				if (serverID) {
					url += `?server=${encodeURIComponent(serverID)}`;
				}

				// Send to server
				fetch(url, {
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					credentials: 'same-origin',
					body: JSON.stringify(orders)
				})
				.then(response => {
					if (response.ok) {
						console.log('Sidebar order saved successfully');
					} else {
						console.error('Failed to save sidebar order:', response.statusText);
					}
				})
				.catch(error => {
					console.error('Error saving sidebar order:', error);
				});
			}

			// Session keep-alive and timeout tracking
			let sessionKeepAliveInterval = null;
			let sessionTimeoutChecker = null;
			let sessionExpiresAt = null;

			function startSessionKeepAlive() {
				// Ping every 5 minutes to keep session alive when page is focused
				sessionKeepAliveInterval = setInterval(() => {
					if (document.hasFocus()) {
						fetch('/api/keepalive', { method: 'POST', credentials: 'same-origin' })
							.then(response => {
								if (response.status === 401 || response.status === 403) {
									// Session expired, redirect to login
									redirectToLogin('Your session has expired. Please log in again.');
								} else if (response.ok) {
									// Update session expiration time on successful keep-alive
									return response.json();
								}
							})
							.then(data => {
								if (data && data.expiresAt) {
									sessionExpiresAt = new Date(data.expiresAt);
								}
							})
							.catch(() => {}); // Ignore network errors silently
					}
				}, 5 * 60 * 1000);

				// Start session timeout checker (runs every 10 seconds)
				startSessionTimeoutChecker();
			}

			function stopSessionKeepAlive() {
				if (sessionKeepAliveInterval) {
					clearInterval(sessionKeepAliveInterval);
					sessionKeepAliveInterval = null;
				}
				stopSessionTimeoutChecker();
			}

			function startSessionTimeoutChecker() {
				// Check session expiration every 10 seconds
				sessionTimeoutChecker = setInterval(() => {
					if (sessionExpiresAt) {
						const now = new Date();
						if (now >= sessionExpiresAt) {
							// Session has expired, redirect to login
							redirectToLogin('Your session has expired. Please log in again.');
						}
					}
				}, 10 * 1000);

				// Fetch initial session expiration time
				fetch('/api/session-info', { credentials: 'same-origin' })
					.then(response => {
						if (response.ok) {
							return response.json();
						}
					})
					.then(data => {
						if (data && data.expiresAt) {
							sessionExpiresAt = new Date(data.expiresAt);
						}
					})
					.catch(() => {});
			}

			function stopSessionTimeoutChecker() {
				if (sessionTimeoutChecker) {
					clearInterval(sessionTimeoutChecker);
					sessionTimeoutChecker = null;
				}
			}

			function redirectToLogin(message) {
				// Clear intervals before redirect
				stopSessionKeepAlive();

				// Build redirect URL with return path
				const returnURL = window.location.pathname;
				let redirectURL = '/login?message=' + encodeURIComponent(message);
				if (returnURL && returnURL !== '/' && returnURL !== '/login' && returnURL !== '/logout') {
					redirectURL += '&return=' + encodeURIComponent(returnURL);
				}

				window.location.href = redirectURL;
			}

			// Global fetch interceptor for session timeout detection
			(function() {
				const originalFetch = window.fetch;
				window.fetch = function(...args) {
					return originalFetch.apply(this, args)
						.then(response => {
							// If we get a 401/403 on any API call, redirect to login
							if ((response.status === 401 || response.status === 403) &&
								!args[0].includes('/login') &&
								!args[0].includes('/api/keepalive') &&
								!args[0].includes('/api/session-info')) {
								redirectToLogin('Your session has expired. Please log in again.');
							}
							return response;
						});
				};
			})();

			// Global server selection management
			// Uses sessionStorage for tab isolation - each tab maintains its own server selection
			const ServerSelector = {
				STORAGE_KEY: 'global-selected-server',

				// Get the currently selected server for this tab
				getSelectedServer: function() {
					return sessionStorage.getItem(this.STORAGE_KEY) || null;
				},

				// Set the selected server for this tab and notify listeners
				setSelectedServer: function(serverID) {
					const oldServer = this.getSelectedServer();
					sessionStorage.setItem(this.STORAGE_KEY, serverID);
					if (oldServer !== serverID) {
						// Dispatch custom event for pages to listen to
						window.dispatchEvent(new CustomEvent('serverChanged', {
							detail: { serverID: serverID, previousServerID: oldServer }
						}));
					}
				},

				// Initialize server selector from a dropdown/select element
				// If no selection exists in sessionStorage, uses the first option
				initFromSelect: function(selectElement) {
					if (!selectElement) return null;

					const savedServer = this.getSelectedServer();

					// Check if saved server exists in options
					if (savedServer) {
						const optionExists = Array.from(selectElement.options).some(opt => opt.value === savedServer);
						if (optionExists) {
							selectElement.value = savedServer;
							return savedServer;
						}
					}

					// Use first option as default
					if (selectElement.options.length > 0) {
						const firstServer = selectElement.options[0].value;
						this.setSelectedServer(firstServer);
						selectElement.value = firstServer;
						return firstServer;
					}

					return null;
				}
			};

			// Expose globally
			window.ServerSelector = ServerSelector;

			// Alert badge management
			let alertBadgeInterval = null;

			function updateAlertBadge() {
				fetch('/api/alerts/count', { credentials: 'same-origin' })
					.then(response => {
						if (response.ok) return response.json();
						return null;
					})
					.then(data => {
						const badge = document.getElementById('alert-badge');
						if (badge && data) {
							const count = data.total_active || 0;
							if (count > 0) {
								badge.textContent = count > 99 ? '99+' : count;
								badge.classList.remove('hidden');
								badge.classList.add('flex');
								// Add pulse animation for critical alerts
								if (data.critical_count > 0) {
									badge.classList.add('animate-pulse');
								} else {
									badge.classList.remove('animate-pulse');
								}
							} else {
								badge.classList.add('hidden');
								badge.classList.remove('flex', 'animate-pulse');
							}
						}
					})
					.catch(() => {});
			}

			function startAlertBadgeUpdates() {
				// Initial update
				updateAlertBadge();
				// Update every 30 seconds
				alertBadgeInterval = setInterval(updateAlertBadge, 30000);
			}

			function stopAlertBadgeUpdates() {
				if (alertBadgeInterval) {
					clearInterval(alertBadgeInterval);
					alertBadgeInterval = null;
				}
			}

			// Start keep-alive when page loads
			document.addEventListener('DOMContentLoaded', function() {
				applySidebarState();
				updateThemeIcon();
				startSessionKeepAlive();
				startAlertBadgeUpdates();
			});

			// Handle visibility changes
			document.addEventListener('visibilitychange', function() {
				if (document.hidden) {
					stopSessionKeepAlive();
					stopAlertBadgeUpdates();
				} else {
					startSessionKeepAlive();
					startAlertBadgeUpdates();
				}
			});
		</script>
		<!-- Common JavaScript Utilities -->
		<script src="/static/js/utils/formatting.js" defer></script>
		<script src="/static/js/utils/dom.js" defer></script>
		<script src="/static/js/utils/api.js" defer></script>
		<script src="/static/js/utils/char-limit.js" defer></script>
		<script src="/static/js/common/page-header.js" defer></script>
		<script src="/static/js/common/box-selector.js" defer></script>
		<script src="/static/js/common/keymap.js" defer></script>
		<script src="/static/js/common/focus-trap.js" defer></script>
		<script src="/static/js/common/command-palette.js" defer></script>
		<script src="/static/js/common/shortcut-help.js" defer></script>
	</head>
	<body class="h-full bg-gray-100 dark:bg-slate-900">
		@ui.CollapsibleRestoreScript()
		if user != nil {
			// Check if we should hide the sidebar (e.g., on initial setup pages)
			if shouldHideSidebar(ctx, getPath(currentPath)) {
				<!-- No sidebar, full-width layout for initial setup -->
				<main class="min-h-screen">
					{ children... }
				</main>
			} else {
				@Sidebar(user, getPath(currentPath))
				<div id="main-content" class="main-content ml-64 min-h-screen flex flex-col pt-[57px]">
					@Header(getPath(currentPath))
					<main class="flex-1 p-6">
						{ children... }
					</main>
				</div>
			}
		} else {
			<main class="min-h-screen">
				{ children... }
			</main>
		}
		@ConfirmDialog()
		@PromptDialog()
		@AlertDialog()
		@ui.Toast()
	</body>
	</html>
}

// ConfirmDialog provides a reusable custom confirmation dialog that replaces browser confirm()
templ ConfirmDialog() {
	<!-- Global Confirmation Dialog -->
	<div id="confirm-dialog" class="fixed inset-0 z-[100] hidden overflow-y-auto" aria-labelledby="confirm-dialog-title" role="dialog" aria-modal="true">
		<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
			<!-- Background overlay -->
			<div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity" onclick="closeConfirmDialog(false)"></div>
			<span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
			<!-- Dialog panel -->
			<div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
				<div class="sm:flex sm:items-start">
					<!-- Icon - changes based on type -->
					<div id="confirm-dialog-icon-warning" class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 dark:bg-yellow-900 sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
						</svg>
					</div>
					<div id="confirm-dialog-icon-danger" class="hidden mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
						</svg>
					</div>
					<div id="confirm-dialog-icon-info" class="hidden mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
						</svg>
					</div>
					<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
						<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="confirm-dialog-title">
							Confirm Action
						</h3>
						<div class="mt-2">
							<p id="confirm-dialog-message" class="text-sm text-gray-500 dark:text-gray-400">
								Are you sure you want to proceed?
							</p>
						</div>
					</div>
				</div>
				<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
					<button
						type="button"
						id="confirm-dialog-confirm-btn"
						onclick="closeConfirmDialog(true)"
						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
					>
						Confirm
					</button>
					<button
						type="button"
						onclick="closeConfirmDialog(false)"
						class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
					>
						Cancel
					</button>
				</div>
			</div>
		</div>
	</div>
	<script>
	// Global confirmation dialog API
	let confirmDialogResolve = null;

	/**
	 * Show a custom confirmation dialog
	 * @param {Object} options - Dialog options
	 * @param {string} options.title - Dialog title
	 * @param {string} options.message - Dialog message
	 * @param {string} [options.confirmText='Confirm'] - Confirm button text
	 * @param {string} [options.type='warning'] - Dialog type: 'warning', 'danger', or 'info'
	 * @returns {Promise<boolean>} - Resolves to true if confirmed, false if cancelled
	 */
	function showConfirmDialog(options) {
		return new Promise((resolve) => {
			confirmDialogResolve = resolve;

			const dialog = document.getElementById('confirm-dialog');
			const title = document.getElementById('confirm-dialog-title');
			const message = document.getElementById('confirm-dialog-message');
			const confirmBtn = document.getElementById('confirm-dialog-confirm-btn');
			const iconWarning = document.getElementById('confirm-dialog-icon-warning');
			const iconDanger = document.getElementById('confirm-dialog-icon-danger');
			const iconInfo = document.getElementById('confirm-dialog-icon-info');

			// Set content
			title.textContent = options.title || 'Confirm Action';
			message.textContent = options.message || 'Are you sure you want to proceed?';
			confirmBtn.textContent = options.confirmText || 'Confirm';

			// Set button style based on type
			const type = options.type || 'warning';
			confirmBtn.className = confirmBtn.className.replace(/bg-\w+-600/g, '').replace(/hover:bg-\w+-700/g, '').replace(/focus:ring-\w+-500/g, '');

			// Hide all icons first
			iconWarning.classList.add('hidden');
			iconDanger.classList.add('hidden');
			iconInfo.classList.add('hidden');

			if (type === 'danger') {
				confirmBtn.classList.add('bg-red-600', 'hover:bg-red-700', 'focus:ring-red-500');
				iconDanger.classList.remove('hidden');
			} else if (type === 'info') {
				confirmBtn.classList.add('bg-blue-600', 'hover:bg-blue-700', 'focus:ring-blue-500');
				iconInfo.classList.remove('hidden');
			} else {
				confirmBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700', 'focus:ring-yellow-500');
				iconWarning.classList.remove('hidden');
			}

			// Show dialog
			dialog.classList.remove('hidden');
		});
	}

	function closeConfirmDialog(result) {
		const dialog = document.getElementById('confirm-dialog');
		dialog.classList.add('hidden');

		if (confirmDialogResolve) {
			confirmDialogResolve(result);
			confirmDialogResolve = null;
		}
	}

	// Close dialog on Escape key
	document.addEventListener('keydown', function(e) {
		if (e.key === 'Escape') {
			const dialog = document.getElementById('confirm-dialog');
			if (dialog && !dialog.classList.contains('hidden')) {
				closeConfirmDialog(false);
			}
			const promptDialog = document.getElementById('prompt-dialog');
			if (promptDialog && !promptDialog.classList.contains('hidden')) {
				closePromptDialog(null);
			}
			const alertDialog = document.getElementById('alert-dialog');
			if (alertDialog && !alertDialog.classList.contains('hidden')) {
				closeAlertDialog();
			}
		}
	});
	</script>
}

// PromptDialog provides a reusable custom prompt dialog that replaces browser prompt()
templ PromptDialog() {
	<!-- Global Prompt Dialog -->
	<div id="prompt-dialog" class="fixed inset-0 z-[100] hidden overflow-y-auto" aria-labelledby="prompt-dialog-title" role="dialog" aria-modal="true">
		<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
			<!-- Background overlay -->
			<div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity" onclick="closePromptDialog(null)"></div>
			<span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
			<!-- Dialog panel -->
			<div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
				<div class="sm:flex sm:items-start">
					<!-- Icon -->
					<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
						</svg>
					</div>
					<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
						<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="prompt-dialog-title">
							Input Required
						</h3>
						<div class="mt-2">
							<p id="prompt-dialog-message" class="text-sm text-gray-500 dark:text-gray-400 mb-3">
								Please enter a value:
							</p>
							<input
								type="text"
								id="prompt-dialog-input"
								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
								placeholder=""
							/>
						</div>
					</div>
				</div>
				<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
					<button
						type="button"
						id="prompt-dialog-ok-btn"
						onclick="closePromptDialog(document.getElementById('prompt-dialog-input').value)"
						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
					>
						OK
					</button>
					<button
						type="button"
						onclick="closePromptDialog(null)"
						class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
					>
						Cancel
					</button>
				</div>
			</div>
		</div>
	</div>
	<script>
	// Global prompt dialog API
	let promptDialogResolve = null;

	/**
	 * Show a custom prompt dialog
	 * @param {Object} options - Dialog options
	 * @param {string} options.title - Dialog title
	 * @param {string} options.message - Dialog message
	 * @param {string} [options.defaultValue=''] - Default input value
	 * @param {string} [options.placeholder=''] - Input placeholder
	 * @returns {Promise<string|null>} - Resolves to the entered value or null if cancelled
	 */
	function showPromptDialog(options) {
		return new Promise((resolve) => {
			promptDialogResolve = resolve;

			const dialog = document.getElementById('prompt-dialog');
			const title = document.getElementById('prompt-dialog-title');
			const message = document.getElementById('prompt-dialog-message');
			const input = document.getElementById('prompt-dialog-input');

			// Set content
			title.textContent = options.title || 'Input Required';
			message.textContent = options.message || 'Please enter a value:';
			input.value = options.defaultValue || '';
			input.placeholder = options.placeholder || '';

			// Show dialog
			dialog.classList.remove('hidden');

			// Focus input
			setTimeout(() => input.focus(), 100);

			// Handle Enter key
			input.onkeydown = (e) => {
				if (e.key === 'Enter') {
					closePromptDialog(input.value);
				}
			};
		});
	}

	function closePromptDialog(result) {
		const dialog = document.getElementById('prompt-dialog');
		dialog.classList.add('hidden');

		if (promptDialogResolve) {
			promptDialogResolve(result);
			promptDialogResolve = null;
		}
	}
	</script>
}

// AlertDialog provides a reusable custom alert dialog that replaces browser alert()
templ AlertDialog() {
	<!-- Global Alert Dialog -->
	<div id="alert-dialog" class="fixed inset-0 z-[100] hidden overflow-y-auto" aria-labelledby="alert-dialog-title" role="dialog" aria-modal="true">
		<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
			<!-- Background overlay -->
			<div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity" onclick="closeAlertDialog()"></div>
			<span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
			<!-- Dialog panel -->
			<div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
				<div class="sm:flex sm:items-start">
					<!-- Icon - changes based on type -->
					<div id="alert-dialog-icon-error" class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
						</svg>
					</div>
					<div id="alert-dialog-icon-success" class="hidden mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
						</svg>
					</div>
					<div id="alert-dialog-icon-info" class="hidden mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
						<svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
						</svg>
					</div>
					<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
						<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="alert-dialog-title">
							Alert
						</h3>
						<div class="mt-2">
							<p id="alert-dialog-message" class="text-sm text-gray-500 dark:text-gray-400">
								Message
							</p>
						</div>
					</div>
				</div>
				<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
					<button
						type="button"
						onclick="closeAlertDialog()"
						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
					>
						OK
					</button>
				</div>
			</div>
		</div>
	</div>
	<script>
	// Global alert dialog API
	let alertDialogResolve = null;

	/**
	 * Show a custom alert dialog
	 * @param {Object} options - Dialog options
	 * @param {string} options.title - Dialog title
	 * @param {string} options.message - Dialog message
	 * @param {string} [options.type='error'] - Dialog type: 'error', 'success', or 'info'
	 * @returns {Promise<void>} - Resolves when dialog is closed
	 */
	function showAlertDialog(options) {
		return new Promise((resolve) => {
			alertDialogResolve = resolve;

			const dialog = document.getElementById('alert-dialog');
			const title = document.getElementById('alert-dialog-title');
			const message = document.getElementById('alert-dialog-message');
			const iconError = document.getElementById('alert-dialog-icon-error');
			const iconSuccess = document.getElementById('alert-dialog-icon-success');
			const iconInfo = document.getElementById('alert-dialog-icon-info');

			// Set content
			title.textContent = options.title || 'Alert';
			message.textContent = options.message || 'Message';

			// Hide all icons first
			iconError.classList.add('hidden');
			iconSuccess.classList.add('hidden');
			iconInfo.classList.add('hidden');

			// Show appropriate icon
			const type = options.type || 'error';
			if (type === 'success') {
				iconSuccess.classList.remove('hidden');
			} else if (type === 'info') {
				iconInfo.classList.remove('hidden');
			} else {
				iconError.classList.remove('hidden');
			}

			// Show dialog
			dialog.classList.remove('hidden');
		});
	}

	function closeAlertDialog() {
		const dialog = document.getElementById('alert-dialog');
		dialog.classList.add('hidden');

		if (alertDialogResolve) {
			alertDialogResolve();
			alertDialogResolve = null;
		}
	}
	</script>
}

templ Sidebar(user *models.User, currentPath string) {
	<aside id="sidebar" class="sidebar sidebar-expanded fixed left-0 top-0 h-full bg-white dark:bg-slate-950 text-gray-800 dark:text-white z-50 flex flex-col shadow-xl border-r border-gray-200 dark:border-slate-800">
		<!-- Logo + Toggle (Linear / Notion pattern: collapse button at top
		     where it's most predictable, freeing the footer for user
		     identity + settings). -->
		<div class="flex items-center px-3 h-[56px] border-b border-gray-200 dark:border-slate-700 gap-2 flex-shrink-0">
			<a href="/" class="flex items-center gap-2 min-w-0 flex-1 group">
				<img src="/favicon.svg" alt="Gearbox Logo" class="w-8 h-8 flex-shrink-0"/>
				<span class="sidebar-text font-bold text-lg whitespace-nowrap group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Gearbox</span>
			</a>
			<button id="sidebar-toggle-btn" onclick="toggleSidebar()" class="p-1.5 hover:bg-gray-100 dark:hover:bg-slate-700 rounded transition-colors text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex-shrink-0" title="Toggle Sidebar">
				<svg id="sidebar-icon-collapse" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
					<line x1="9" y1="3" x2="9" y2="21"></line>
					<polyline points="15 8 12 12 15 16"></polyline>
				</svg>
				<svg id="sidebar-icon-expand" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
					<line x1="9" y1="3" x2="9" y2="21"></line>
					<polyline points="13 8 16 12 13 16"></polyline>
				</svg>
			</button>
		</div>

		<!-- Edit-mode banner. Hidden by default; toggleSidebarEditMode()
		     toggles `.sidebar-edit-mode` on #sidebar, which reveals this
		     and gives the user a visible "Done" button to exit. Without
		     this affordance the only way out was via the command palette,
		     which is unintuitive once you're already in edit mode. -->
		<div id="sidebar-edit-banner" class="hidden flex-shrink-0 px-3 py-2 bg-blue-50 dark:bg-blue-900/30 border-b border-blue-200 dark:border-blue-800 flex items-center gap-2">
			<svg class="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 sidebar-edit-banner-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
			</svg>
			<span class="text-xs text-blue-700 dark:text-blue-300 flex-1 sidebar-text whitespace-nowrap">Drag to reorder</span>
			<button onclick="toggleSidebarEditMode()" class="px-2 py-0.5 text-xs font-medium bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors sidebar-text">Done</button>
		</div>

		<!-- Navigation. overflow-y:auto + thin overlay scrollbar (see CSS
		     above) so a long gear list doesn't get clipped on small
		     viewports. Edit-mode toggle is no longer in the footer — invoke
		     via `Cmd+K → Reorder sidebar` or right-click a gear. The hidden
		     button below keeps toggleSidebarEditMode()'s icon-swap logic
		     working without being persistently visible. -->
		<nav id="sidebar-nav-scroll" class="flex-1 py-4 overflow-y-auto sidebar-overlay-scroll">
			<ul id="sidebar-nav-list" class="space-y-1">
				@OrderedIntegrationLinks(currentPath)
			</ul>
		</nav>
		<button id="sidebar-edit-btn" onclick="toggleSidebarEditMode()" class="hidden" aria-hidden="true" tabindex="-1">
			<svg id="sidebar-icon-edit" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
				<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
			</svg>
			<svg id="sidebar-icon-save" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
				<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
			</svg>
		</button>

		<!-- User menu -->
		<div class="py-1">
			<div class="px-2">
				<button
					id="user-button"
					onclick="toggleUserDropdown()"
					class="w-full flex items-center space-x-3 px-2 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
				>
					<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
						<span class="text-sm font-medium text-white">{ user.Initials() }</span>
					</div>
					<span class="sidebar-text text-sm font-medium whitespace-nowrap">{ user.DisplayName() }</span>
				</button>
			</div>
		</div>

		<!-- Settings at very bottom (no border) -->
		<div class="py-1">
			if isActivePath("/settings", currentPath) {
				<a href="/settings" class="flex items-center space-x-3 px-4 py-3 bg-blue-50 dark:bg-slate-700 border-l-4 border-blue-600 dark:border-blue-400 text-blue-700 dark:text-blue-300 transition-colors">
					<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
					</svg>
					<span class="sidebar-text whitespace-nowrap font-medium">Settings</span>
				</a>
			} else {
				<a href="/settings" class="flex items-center space-x-3 px-4 py-3 border-l-4 border-transparent hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
					<svg class="w-6 h-6 flex-shrink-0 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
					</svg>
					<span class="sidebar-text whitespace-nowrap">Settings</span>
				</a>
			}
		</div>
	</aside>

	<!-- User dropdown (positioned fixed, outside sidebar to escape overflow) -->
	<div id="user-dropdown" class="dropdown-menu fixed w-48 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-gray-200 dark:border-slate-700 py-1 z-[100]">
		<div class="px-4 py-2 border-b border-gray-200 dark:border-slate-700">
			<p class="text-sm font-medium text-gray-900 dark:text-gray-100">{ user.DisplayName() }</p>
			<p class="text-xs text-gray-500 dark:text-gray-400">{ user.Email }</p>
		</div>
		<a href="/settings/profile" class="flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700">
			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
			</svg>
			<span>Profile</span>
		</a>
		<a href="/settings/change-password" class="flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700">
			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
			</svg>
			<span>Change Password</span>
		</a>
		<!-- Theme selection -->
		<div class="border-t border-gray-200 dark:border-slate-700 mt-1 pt-1">
			<div class="px-4 py-2">
				<p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Theme</p>
				<div class="flex items-center space-x-1">
					<button
						onclick="setTheme('light'); event.stopPropagation();"
						id="theme-btn-light"
						class="flex-1 flex items-center justify-center p-2 rounded text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
						title="Light"
					>
						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
						</svg>
					</button>
					<button
						onclick="setTheme('dark'); event.stopPropagation();"
						id="theme-btn-dark"
						class="flex-1 flex items-center justify-center p-2 rounded text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
						title="Dark"
					>
						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
						</svg>
					</button>
					<button
						onclick="setTheme('system'); event.stopPropagation();"
						id="theme-btn-system"
						class="flex-1 flex items-center justify-center p-2 rounded text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
						title="System"
					>
						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
						</svg>
					</button>
				</div>
			</div>
		</div>
		<div class="border-t border-gray-200 dark:border-slate-700 mt-1 pt-1">
			<form action="/logout" method="POST" class="block">
				<button type="submit" class="w-full flex items-center space-x-2 px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-slate-700">
					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
					</svg>
					<span>Logout</span>
				</button>
			</form>
		</div>
	</div>
}

templ SidebarLink(href string, label string, icon templ.Component, currentPath string) {
	<li>
		if isActivePath(href, currentPath) {
			<a href={ templ.SafeURL(href) } class="flex items-center space-x-3 px-4 py-3 bg-blue-50 dark:bg-slate-700 border-l-4 border-blue-600 dark:border-blue-400 text-blue-700 dark:text-blue-300 transition-colors">
				@icon
				<span class="sidebar-text whitespace-nowrap font-medium">{ label }</span>
			</a>
		} else {
			<a href={ templ.SafeURL(href) } class="flex items-center space-x-3 px-4 py-3 border-l-4 border-transparent hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
				@icon
				<span class="sidebar-text whitespace-nowrap">{ label }</span>
			</a>
		}
	</li>
}

templ SidebarIconDashboard() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
	</svg>
}

templ SidebarIconGrid() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
	</svg>
}

templ SidebarIconLogs() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
	</svg>
}

templ SidebarIconHistory() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
	</svg>
}

templ SidebarIconMetrics() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20V4"></path>
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 15l3-4 3 3 4-5"></path>
	</svg>
}

templ SidebarIconCertificate() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
	</svg>
}

templ SidebarIconServices() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path>
	</svg>
}

templ SidebarIconTraffic() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
	</svg>
}

templ SidebarIconAlerts() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
	</svg>
}

templ SidebarIconOSUpdates() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
	</svg>
}

templ SidebarIconHome() {
	<!-- Canonical Heroicons v1 "home" outline. The earlier path was a
	     malformed variant whose right wall didn't reach the roof and
	     drew a stray vertical stroke through the middle. -->
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
	</svg>
}

templ SidebarIconHAProxy() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
	</svg>
}

templ SidebarLinkWithBadge(href string, label string, icon templ.Component, currentPath string, badgeID string) {
	<li>
		if isActivePath(href, currentPath) {
			<a href={ templ.SafeURL(href) } class="flex items-center space-x-3 px-4 py-3 bg-blue-50 dark:bg-slate-700 border-l-4 border-blue-600 dark:border-blue-400 text-blue-700 dark:text-blue-300 transition-colors">
				<div class="relative flex-shrink-0">
					@icon
					<span id={ badgeID } class="absolute -top-1 -right-1 hidden min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full flex items-center justify-center"></span>
				</div>
				<span class="sidebar-text whitespace-nowrap font-medium">{ label }</span>
			</a>
		} else {
			<a href={ templ.SafeURL(href) } class="flex items-center space-x-3 px-4 py-3 border-l-4 border-transparent hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
				<div class="relative flex-shrink-0">
					@icon
					<span id={ badgeID } class="absolute -top-1 -right-1 hidden min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full flex items-center justify-center"></span>
				</div>
				<span class="sidebar-text whitespace-nowrap">{ label }</span>
			</a>
		}
	</li>
}

// SidebarLinkDraggable renders a sidebar link with drag-and-drop support for reordering.
templ SidebarLinkDraggable(href string, label string, icon templ.Component, currentPath string, gearName string) {
	<li class="nav-item-draggable" data-gear-name={ gearName }>
		if isActivePath(href, currentPath) {
			<a href={ templ.SafeURL(href) } draggable="false" class="nav-link flex items-center space-x-3 px-4 py-3 bg-blue-50 dark:bg-slate-700 border-l-4 border-blue-600 dark:border-blue-400 text-blue-700 dark:text-blue-300 transition-colors">
				<!-- Drag handle (hidden by default, shown in edit mode) -->
				<div class="nav-drag-handle hidden flex-shrink-0 cursor-grab mr-2">
					<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
						<circle cx="7" cy="5" r="1.5"></circle>
						<circle cx="7" cy="12" r="1.5"></circle>
						<circle cx="7" cy="19" r="1.5"></circle>
						<circle cx="14" cy="5" r="1.5"></circle>
						<circle cx="14" cy="12" r="1.5"></circle>
						<circle cx="14" cy="19" r="1.5"></circle>
					</svg>
				</div>
				@icon
				<span class="sidebar-text whitespace-nowrap font-medium">{ label }</span>
			</a>
		} else {
			<a href={ templ.SafeURL(href) } draggable="false" class="nav-link flex items-center space-x-3 px-4 py-3 border-l-4 border-transparent hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
				<!-- Drag handle (hidden by default, shown in edit mode) -->
				<div class="nav-drag-handle hidden flex-shrink-0 cursor-grab mr-2">
					<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
						<circle cx="7" cy="5" r="1.5"></circle>
						<circle cx="7" cy="12" r="1.5"></circle>
						<circle cx="7" cy="19" r="1.5"></circle>
						<circle cx="14" cy="5" r="1.5"></circle>
						<circle cx="14" cy="12" r="1.5"></circle>
						<circle cx="14" cy="19" r="1.5"></circle>
					</svg>
				</div>
				@icon
				<span class="sidebar-text whitespace-nowrap">{ label }</span>
			</a>
		}
	</li>
}

// SidebarLinkDraggableWithBadge renders a draggable sidebar link with a notification badge.
templ SidebarLinkDraggableWithBadge(href string, label string, icon templ.Component, currentPath string, gearName string, badgeID string) {
	<li class="nav-item-draggable" data-gear-name={ gearName }>
		if isActivePath(href, currentPath) {
			<a href={ templ.SafeURL(href) } draggable="false" class="nav-link flex items-center space-x-3 px-4 py-3 bg-blue-50 dark:bg-slate-700 border-l-4 border-blue-600 dark:border-blue-400 text-blue-700 dark:text-blue-300 transition-colors">
				<!-- Drag handle (hidden by default, shown in edit mode) -->
				<div class="nav-drag-handle hidden flex-shrink-0 cursor-grab mr-2">
					<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
						<circle cx="7" cy="5" r="1.5"></circle>
						<circle cx="7" cy="12" r="1.5"></circle>
						<circle cx="7" cy="19" r="1.5"></circle>
						<circle cx="14" cy="5" r="1.5"></circle>
						<circle cx="14" cy="12" r="1.5"></circle>
						<circle cx="14" cy="19" r="1.5"></circle>
					</svg>
				</div>
				<div class="relative flex-shrink-0">
					@icon
					<span id={ badgeID } class="absolute -top-1 -right-1 hidden min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full flex items-center justify-center"></span>
				</div>
				<span class="sidebar-text whitespace-nowrap font-medium">{ label }</span>
			</a>
		} else {
			<a href={ templ.SafeURL(href) } draggable="false" class="nav-link flex items-center space-x-3 px-4 py-3 border-l-4 border-transparent hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
				<!-- Drag handle (hidden by default, shown in edit mode) -->
				<div class="nav-drag-handle hidden flex-shrink-0 cursor-grab mr-2">
					<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
						<circle cx="7" cy="5" r="1.5"></circle>
						<circle cx="7" cy="12" r="1.5"></circle>
						<circle cx="7" cy="19" r="1.5"></circle>
						<circle cx="14" cy="5" r="1.5"></circle>
						<circle cx="14" cy="12" r="1.5"></circle>
						<circle cx="14" cy="19" r="1.5"></circle>
					</svg>
				</div>
				<div class="relative flex-shrink-0">
					@icon
					<span id={ badgeID } class="absolute -top-1 -right-1 hidden min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full flex items-center justify-center"></span>
				</div>
				<span class="sidebar-text whitespace-nowrap">{ label }</span>
			</a>
		}
	</li>
}

// SidebarLinkWithIntegration renders a sidebar link only if the integration is enabled.
// Uses server-side context to determine visibility - disabled integrations are not rendered at all.
templ SidebarLinkWithIntegration(href string, label string, icon templ.Component, currentPath string, integration string) {
	if auth.IsGearEnabledFromContext(ctx, integration) {
		<li>
			if isActivePath(href, currentPath) {
				<a href={ templ.SafeURL(href) } class="flex items-center space-x-3 px-4 py-3 bg-blue-50 dark:bg-slate-700 border-l-4 border-blue-600 dark:border-blue-400 text-blue-700 dark:text-blue-300 transition-colors">
					@icon
					<span class="sidebar-text whitespace-nowrap font-medium">{ label }</span>
				</a>
			} else {
				<a href={ templ.SafeURL(href) } class="flex items-center space-x-3 px-4 py-3 border-l-4 border-transparent hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
					@icon
					<span class="sidebar-text whitespace-nowrap">{ label }</span>
				</a>
			}
		</li>
	}
}

// hasAnyEnabledIntegration checks if any integration (gear) is enabled in the current context.
func hasAnyEnabledIntegration(ctx context.Context) bool {
	integrations, ok := auth.GetGearOrderFromContext(ctx)
	if !ok {
		return false
	}
	for _, integration := range integrations {
		if integration.Enabled {
			return true
		}
	}
	return false
}

// integrationPath returns the URL path for a given integration name.
func integrationPath(name string) string {
	switch name {
	case "home":
		return "/home"
	case "haproxy":
		return "/haproxy"
	case "metrics":
		return "/metrics"
	case "logs":
		return "/logs"
	case "services":
		return "/services"
	case "certificates":
		return "/certificates"
	case "traffic":
		return "/traffic"
	case "alerts":
		return "/alerts"
	case "os_updates":
		return "/os-updates"
	default:
		return "/"
	}
}

// firstEnabledIntegrationPath returns the URL path for the first enabled integration.
// Returns "/" if no integrations are enabled.
func firstEnabledIntegrationPath(ctx context.Context) string {
	integrations, ok := auth.GetGearOrderFromContext(ctx)
	if !ok {
		return "/"
	}
	for _, integration := range integrations {
		if integration.Enabled {
			return integrationPath(integration.Name)
		}
	}
	return "/"
}

// canViewIntegration checks if the user has permission to view an integration.
// Maps integration names to component View permissions.
func canViewIntegration(ctx context.Context, integrationName string) bool {
	switch integrationName {
	case "bx":
		// Bx (fleet view) is gated on bx:view in handlers and the sidebar
		// config (SidebarItem.RequiresPermission); mirror that here so the
		// sidebar link doesn't render for users who'd get a 403 clicking it.
		// `models.Component("bx")` matches the gear-declared permission name.
		return auth.HasPermissionFromContext(ctx, models.Component("bx"), models.PermissionView)
	case "home":
		return true // Home is visible to all authenticated users when enabled.
	case "metrics":
		return auth.HasPermissionFromContext(ctx, models.ComponentMetrics, models.PermissionView)
	case "logs":
		return auth.HasPermissionFromContext(ctx, models.ComponentLogs, models.PermissionView)
	case "services":
		return auth.HasPermissionFromContext(ctx, models.ComponentServices, models.PermissionView)
	case "certificates":
		return auth.HasPermissionFromContext(ctx, models.ComponentCertificates, models.PermissionView)
	case "traffic":
		return auth.HasPermissionFromContext(ctx, models.ComponentMetrics, models.PermissionView)
	default:
		return true // Unknown integrations are visible by default
	}
}

// isBoxScopedIntegration reports whether a sidebar integration is tied to a
// specific box. Box-scoped integrations are hidden when no box is active in
// the request context — the user has no place for them to point at.
// Mirrors gear.Scope.IsBoxScoped() but kept as a template-local helper
// because the sidebar renders from the integration *name* (a DB row), not
// from the gear registry directly. The Bx (fleet view) and Home are the
// only two install-wide entries today.
func isBoxScopedIntegration(name string) bool {
	switch name {
	case "bx", "home":
		return false
	}
	return true
}

// OrderedIntegrationLinks renders sidebar links for integrations in the user's custom order.
// Falls back to default order if no custom order is stored.
//
// Two filters compose here:
//
//  1. Permissions — canViewIntegration(ctx, name).
//  2. Active-box scope — when no box is selected (auth.GetSelectedBoxFromContext
//     returns ok=false), box-scoped integrations are hidden. The user has
//     no place for them to land — Bx (the fleet picker) is the way in.
//     Install-wide entries (Bx, Home) are always shown.
//
// The fallback branch (when no integration order is in context) always
// shows everything for backwards compatibility — that branch fires before
// gears have any rows, e.g. an empty database, and is harmless because
// the user has no boxes yet anyway.
templ OrderedIntegrationLinks(currentPath string) {
	if integrations, ok := auth.GetGearOrderFromContext(ctx); ok {
		// Always render the Bx fleet entry first when permitted — even if
		// the integration table doesn't have a row for it yet (fresh install).
		if !hasIntegration(integrations, "bx") && canViewIntegration(ctx, "bx") {
			@SidebarLinkDraggable("/bx", "Bx", bxSidebarIcon(), currentPath, "bx")
		}
		{{ _, boxActive := auth.GetSelectedBoxFromContext(ctx) }}
		for _, integration := range integrations {
			if integration.Enabled && canViewIntegration(ctx, integration.Name) && (!isBoxScopedIntegration(integration.Name) || boxActive) {
				@renderIntegrationLink(integration.Name, currentPath)
			}
		}
	} else {
		// Fallback to default order only if context doesn't exist at all (backwards compatibility)
		if canViewIntegration(ctx, "bx") {
			@SidebarLinkWithIntegration("/bx", "Bx", bxSidebarIcon(), currentPath, "bx")
		}
		if canViewIntegration(ctx, "haproxy") {
			@SidebarLinkWithIntegration("/haproxy", "HAProxy", SidebarIconHAProxy(), currentPath, "haproxy")
		}
		if canViewIntegration(ctx, "metrics") {
			@SidebarLinkWithIntegration("/metrics", "Metrics", SidebarIconMetrics(), currentPath, "metrics")
		}
		if canViewIntegration(ctx, "logs") {
			@SidebarLinkWithIntegration("/logs", "Logs", SidebarIconLogs(), currentPath, "logs")
		}
		if canViewIntegration(ctx, "services") {
			@SidebarLinkWithIntegration("/services", "Services", SidebarIconServices(), currentPath, "services")
		}
		if canViewIntegration(ctx, "certificates") {
			@SidebarLinkWithIntegration("/certificates", "Certificates", SidebarIconCertificate(), currentPath, "certificates")
		}
		if canViewIntegration(ctx, "traffic") {
			@SidebarLinkWithIntegration("/traffic", "Traffic", SidebarIconTraffic(), currentPath, "traffic")
		}
		if canViewIntegration(ctx, "alerts") {
			@SidebarLinkWithBadge("/alerts", "Alerts", SidebarIconAlerts(), currentPath, "alert-badge")
		}
		if canViewIntegration(ctx, "os_updates") {
			@SidebarLinkWithIntegration("/os-updates", "OS Updates", SidebarIconOSUpdates(), currentPath, "os_updates")
		}
	}
}

// hasIntegration reports whether an integration name is already in the
// ordered list. Used by OrderedIntegrationLinks to decide whether to
// inject the Bx synthetic entry on installs that predate the gear.
func hasIntegration(list []auth.SidebarIntegration, name string) bool {
	for _, i := range list {
		if i.Name == name {
			return true
		}
	}
	return false
}

// renderIntegrationLink renders a single integration link based on the integration name.
templ renderIntegrationLink(name string, currentPath string) {
	switch name {
		case "bx":
			@SidebarLinkDraggable("/bx", "Bx", bxSidebarIcon(), currentPath, "bx")
		case "home":
			@SidebarLinkDraggable("/home", "Home", SidebarIconHome(), currentPath, "home")
		case "haproxy":
			@SidebarLinkDraggable("/haproxy", "HAProxy", SidebarIconHAProxy(), currentPath, "haproxy")
		case "metrics":
			@SidebarLinkDraggable("/metrics", "Metrics", SidebarIconMetrics(), currentPath, "metrics")
		case "logs":
			@SidebarLinkDraggable("/logs", "Logs", SidebarIconLogs(), currentPath, "logs")
		case "services":
			@SidebarLinkDraggable("/services", "Services", SidebarIconServices(), currentPath, "services")
		case "certificates":
			@SidebarLinkDraggable("/certificates", "Certificates", SidebarIconCertificate(), currentPath, "certificates")
		case "traffic":
			@SidebarLinkDraggable("/traffic", "Traffic", SidebarIconTraffic(), currentPath, "traffic")
		case "alerts":
			@SidebarLinkDraggableWithBadge("/alerts", "Alerts", SidebarIconAlerts(), currentPath, "alerts", "alert-badge")
		case "os_updates":
			@SidebarLinkDraggable("/os-updates", "OS Updates", SidebarIconOSUpdates(), currentPath, "os_updates")
	}
}

templ Header(currentPath string) {
	{{ active, hasActive := auth.GetSelectedBoxFromContext(ctx) }}
	<header class="fixed top-0 right-0 left-64 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 z-40 transition-all duration-300">
		<div class="flex items-center px-6 h-[55px] gap-3">
			<!-- Box switcher chip (rendered when boxes are configured) -->
			@boxSwitcherChip()
			<!-- Breadcrumb title: gear name (chip shows the box). Hidden
			     below md to reclaim space for the controls. -->
			@HeaderBreadcrumb(currentPath)
			<!-- Filters toggle. Only visible below md, when the page's
			     controls are hidden and need to be reached via a popover. -->
			<button
				id="header-filters-btn"
				type="button"
				class="md:hidden inline-flex items-center gap-1.5 px-2.5 h-[30px] text-sm rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"
				onclick="toggleHeaderFilters()"
				aria-expanded="false"
				aria-controls="header-page-content"
				title="Show page filters"
			>
				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
					<path stroke-linecap="round" stroke-linejoin="round" d="M3 4h18M6 12h12M10 20h4"></path>
				</svg>
				<span>Filters</span>
			</button>
			<!-- Slot for the page's refresh button (if any) below md. JS
			     in header-refresh-shortcut.js detects #refresh-btn after
			     page-header hoist and clone-mirrors it here so the user
			     doesn't have to open the Filters sheet just to refresh.
			     Empty above md and on pages without a refresh button. -->
			<div id="header-refresh-slot" class="md:hidden flex items-center"></div>
			<!-- Page controls. Above md: inline flex row inside the header.
			     Below md: hidden by default, popped out as a sheet below
			     the header when #header-filters-btn is toggled. -->
			<div id="header-page-content" class="hidden md:flex items-center flex-1 min-w-0">
				<!-- Page-specific content will be injected here via JavaScript -->
			</div>
		</div>
	</header>
	<!-- Global active-box id, rendered server-side from the cookie/url
	     resolution. Reuses the legacy `default-server-id` element name
	     so each page's existing getServerID() helper falls through to
	     this without per-file edits. Replaces the per-page
	     #default-server-id inputs that lived in every template. -->
	if hasActive {
		<input type="hidden" id="default-server-id" value={ active.ID } data-box-name={ active.Name }/>
	} else {
		<input type="hidden" id="default-server-id" value=""/>
	}
	@boxSwitcherPalette()
}

// HeaderBreadcrumb renders the compact page-title slot next to the chip.
// The chip already shows the active box (with status dot + dropdown
// chevron), so this only renders the current gear name — repeating the
// box name here was redundant. Empty for paths the chip alone is enough
// to describe (root, /home where the page emits its own board name).
//
// Hidden below md (~768px) to free horizontal real estate for the page's
// own toolbar controls; the active sidebar entry tells the user where
// they are at that point.
templ HeaderBreadcrumb(currentPath string) {
	{{ gearLabel := gearLabelForPath(currentPath) }}
	if gearLabel != "" {
		<div class="hidden md:block text-sm font-medium text-gray-800 dark:text-gray-200 whitespace-nowrap min-w-0">
			{ gearLabel }
		</div>
	}
}

// boxSwitcherChip is the persistent host pill in the top-left of the
// header chrome. It is the primary box-switching affordance — clicking it
// opens the searchable palette. On installs with no boxes, or for users
// who lack any box, the chip renders as a "Choose a box" CTA. On
// box-agnostic pages without an active selection, it renders as
// "All boxes" so the user can tell at a glance what context they are in.
templ boxSwitcherChip() {
	{{ boxes := auth.GetAllBoxesFromContext(ctx) }}
	{{ active, hasActive := auth.GetSelectedBoxFromContext(ctx) }}
	if len(boxes) == 0 {
		<a
			href="/settings/boxes/new"
			class="inline-flex items-center gap-2 px-2.5 h-[30px] text-sm rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"
			title="No boxes configured — click to add one"
		>
			@boxChipIcon()
			<span>Add a box</span>
		</a>
	} else {
		<button
			type="button"
			id="box-switcher-chip"
			data-active-box-id={ activeBoxIDForChip(active, hasActive) }
			onclick="openBoxSwitcher()"
			class="inline-flex items-center gap-2 px-2.5 h-[30px] text-sm rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"
			title="Open command palette (Cmd/Ctrl+K)"
		>
			if hasActive {
				<span
					id="box-switcher-chip-dot"
					class="inline-block w-2 h-2 rounded-full bg-gray-300 ring-1 ring-inset ring-gray-400/40 animate-pulse"
					data-box-id={ active.ID }
				></span>
				<!-- Box name is hidden on small viewports — the dot still
				     conveys status, and the chevron still signals
				     "switchable." Below sm the chip becomes a tiny
				     dot+chevron button. -->
				<span class="hidden sm:inline font-medium truncate max-w-[18ch]">{ active.Name }</span>
			} else {
				@boxChipIcon()
				<span class="hidden sm:inline text-gray-500 dark:text-gray-400">All boxes</span>
			}
			<svg class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
			</svg>
		</button>
	}
}

// boxSwitcherPalette is a thin compat alias for CommandPalette. The chip
// still calls openBoxSwitcher() — command-palette.js owns that name now,
// and opens the unified palette. Kept as a templ so existing call sites
// don't have to learn the new name.
templ boxSwitcherPalette() {
	@CommandPalette()
	@ShortcutHelp()
}

// CommandPalette is the unified Cmd/Ctrl+K palette. The chip and `g b`
// also open this. Catalog (boxes + gears) is rendered as JSON islands so
// the palette opens instantly on first keypress without a fetch.
templ CommandPalette() {
	{{ boxes := auth.GetAllBoxesFromContext(ctx) }}
	{{ active, _ := auth.GetSelectedBoxFromContext(ctx) }}
	<div
		id="cmdk-overlay"
		class="fixed inset-0 z-[70] hidden bg-black/40 backdrop-blur-sm"
		data-active-box-id={ activeBoxIDForChip(active, active != nil) }
		role="dialog"
		aria-modal="true"
		aria-labelledby="cmdk-title"
	>
		<div class="cmdk-panel absolute left-1/2 -translate-x-1/2 top-[12vh] w-[640px] max-w-[92vw] max-h-[76vh] flex flex-col rounded-xl bg-white dark:bg-slate-800 shadow-2xl border border-gray-200 dark:border-slate-700 overflow-hidden">
			<h2 id="cmdk-title" class="sr-only">Command palette</h2>
			<div class="flex items-center gap-2 px-3 py-2.5 border-b border-gray-200 dark:border-slate-700 flex-shrink-0">
				<svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"></path>
				</svg>
				<input
					id="cmdk-input"
					type="search"
					placeholder="Type a command, box, or gear…"
					aria-label="Command palette search"
					aria-controls="cmdk-list"
					autocomplete="off"
					class="flex-1 bg-transparent text-sm text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none border-0"
				/>
				<kbd class="hidden sm:inline-flex items-center px-1.5 h-5 text-[10px] font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-slate-700 rounded">esc</kbd>
			</div>
			<div id="cmdk-list" role="listbox" class="flex-1 min-h-0 overflow-y-auto py-1 sidebar-overlay-scroll"></div>
			<div class="flex items-center justify-between px-3 py-1.5 border-t border-gray-200 dark:border-slate-700 text-[11px] text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-slate-900/40 flex-shrink-0">
				<span><kbd class="font-mono">↑↓</kbd> navigate · <kbd class="font-mono">↵</kbd> select · <kbd class="font-mono">ctrl+↵</kbd> keep open</span>
				<span>Press <kbd class="font-mono">?</kbd> to see all shortcuts</span>
			</div>
		</div>
	</div>
	<!-- Catalog JSON islands. Hidden text/json scripts; not executed, just
	     parsed by command-palette.js at open time. -->
	@templ.Raw("<script type=\"application/json\" id=\"cmdk-boxes\">" + encodeBoxesJSON(boxes) + "</script>")
	@templ.Raw("<script type=\"application/json\" id=\"cmdk-gears\">" + encodeGearsJSON(ctx) + "</script>")
	@templ.Raw("<script type=\"application/json\" id=\"cmdk-pages\">" + encodePagesJSON(ctx) + "</script>")
}

// ShortcutHelp is the `?`-opens overlay listing every global shortcut.
// Frosted-glass look per issue #66: full-viewport dark blurred backdrop
// with a translucent content panel sitting on top.
templ ShortcutHelp() {
	<div
		id="shortcuts-help-overlay"
		class="fixed inset-0 z-[75] hidden bg-black/50 backdrop-blur-md flex items-center justify-center p-6"
		role="dialog"
		aria-modal="true"
		aria-labelledby="shortcuts-help-title"
	>
		<div class="shortcuts-help-panel relative w-full max-w-2xl rounded-2xl bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden" tabindex="-1">
			<div class="flex items-center justify-between px-5 py-3 border-b border-white/10">
				<h2 id="shortcuts-help-title" class="text-white font-medium tracking-wide">Keyboard shortcuts</h2>
				<button
					type="button"
					onclick="closeShortcutHelp()"
					class="text-white/60 hover:text-white transition-colors"
					aria-label="Close"
				>
					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
					</svg>
				</button>
			</div>
			<div id="shortcuts-help-list" class="px-2 py-2 max-h-[60vh] overflow-y-auto"></div>
		</div>
	</div>
}

// boxChipIcon is the small 2×2 grid drawn inside the header chip when no
// box is selected. Kept local to base.templ (rather than imported from the
// bx gear) to avoid a layouts → gears import cycle.
templ boxChipIcon() {
	<svg class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
		<rect x="3" y="3" width="7.5" height="7.5" rx="1.2"></rect>
		<rect x="13.5" y="3" width="7.5" height="7.5" rx="1.2"></rect>
		<rect x="3" y="13.5" width="7.5" height="7.5" rx="1.2"></rect>
		<rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.2"></rect>
	</svg>
}

// bxSidebarIcon is the sidebar variant of the Bx icon. Same artwork as
// the chip icon but at sidebar size and color. Local to layouts so the
// base template doesn't have to import the bx gear (which would create a
// layouts → gears → layouts cycle).
templ bxSidebarIcon() {
	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.6">
		<rect x="3" y="3" width="7.5" height="7.5" rx="1.2"></rect>
		<rect x="13.5" y="3" width="7.5" height="7.5" rx="1.2"></rect>
		<rect x="3" y="13.5" width="7.5" height="7.5" rx="1.2"></rect>
		<rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.2"></rect>
	</svg>
}