{{ define "sync/component/sidebar.html" }}
	<div id="sidebar">
		<div class="sidebar-header">
			<div class="logo-container">
				<img class="logo" src="/static/img/nidus-logo-256-transparent.png" />
			</div>
		</div>
		<button id="sidebarToggle" class="btn btn-sm p-0">
			<i id="sidebarToggleIcon" class="bi bi-chevron-left"></i>
		</button>

		<ul class="sidebar-menu">
			<li>
				<a
					href="{{ .URL.Root }}"
					data-bs-toggle="tooltip"
					data-bs-placement="right"
					title="Home"
				>
					<div class="menu-icon"><i class="bi bi-house"></i></div>
					<span class="menu-text ms-2">Home</span>
				</a>
			</li>
			<li>
				<a
					href="{{ .URL.Sidebar.Intelligence }}"
					data-bs-toggle="tooltip"
					data-bs-placement="right"
					title="Intelligence"
				>
					<div class="menu-icon">{{ template "brain.svg" }}</div>
					<span class="menu-text ms-2">Intelligence</span>
				</a>
			</li>
			<li>
				<a
					href="{{ .URL.Sidebar.Communication }}"
					data-bs-toggle="tooltip"
					data-bs-placement="right"
					title="Communication"
				>
					<div class="menu-icon">{{ template "messaging.svg" }}</div>
					<span class="menu-text ms-2">Communication</span>
					{{ if gt (len .User.Notifications) 0 }}
						<span
							class="position-absolute translate-middle badge rounded-pill bg-primary"
						>
							{{ if gt (len .User.Notifications) 99 }}
								99+
							{{ else }}
								{{ len .User.Notifications }}
							{{ end }}
							<span class="visually-hidden">unread notifications</span>
						</span>
					{{ end }}
				</a>
			</li>
			<li>
				<a
					href="{{ .URL.Sidebar.Planning }}"
					data-bs-toggle="tooltip"
					data-bs-placement="right"
					title="Planning"
				>
					<div class="menu-icon">{{ template "strategy.svg" }}</div>
					<span class="menu-text ms-2">Planning</span>
				</a>
			</li>
			<li>
				<a
					href="{{ .URL.Sidebar.Operations }}"
					data-bs-toggle="tooltip"
					data-bs-placement="right"
					title="Operations"
				>
					<div class="menu-icon">{{ template "assign.svg" }}</div>
					<span class="menu-text ms-2">Operations</span>
				</a>
			</li>
			<li>
				<a
					href="{{ .URL.Sidebar.Review }}"
					data-bs-toggle="tooltip"
					data-bs-placement="right"
					title="Review"
				>
					<div class="menu-icon">{{ template "review.svg" }}</div>
					<span class="menu-text ms-2">Review</span>
				</a>
			</li>
			<li>
				<a
					href="{{ .URL.Sidebar.Configuration }}"
					data-bs-toggle="tooltip"
					data-bs-placement="right"
					title="Configuration"
				>
					<div class="menu-icon">{{ template "settings.svg" }}</div>
					<span class="menu-text ms-2">Configuration</span>
				</a>
			</li>
			{{ if eq .User.Role "root" }}
				<li>
					<a
						href="/sudo"
						data-bs-toggle="tooltip"
						data-bs-placement="right"
						title="Sudo"
					>
						<div class="menu-icon">{{ template "god.svg" }}</div>
						<span class="menu-text ms-2">Sudo</span>
					</a>
				</li>
			{{ end }}
		</ul>
	</div>
{{ end }}