{{ define "sync/component/header.html" }}
	<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
		<div class="container">
			<!-- Logo -->
			<a class="navbar-brand" href="/">
				<img
					src="/static/img/nidus-logo-no-lettering-64.png"
					style="height: 48px; display: flex; align-items: center; justify-content: center; "
				/>
			</a>

			<!-- Toggle Button for Mobile -->
			<button
				class="navbar-toggler"
				type="button"
				data-bs-toggle="collapse"
				data-bs-target="#navbarNav"
				aria-controls="navbarNav"
				aria-expanded="false"
				aria-label="Toggle navigation"
			>
				<span class="navbar-toggler-icon"></span>
			</button>

			<!-- Nav Items -->
			<div class="collapse navbar-collapse" id="navbarNav">
				<ul class="navbar-nav me-auto">
					<li class="nav-item">
						<a class="nav-link" href="/">Dashboard</a>
					</li>
				</ul>

				<!-- User Info, Notifications & Logout -->
				<div class="d-flex align-items-center">
					<!-- Notification Bell with Badge -->
					<div class="dropdown me-3">
						<a
							class="position-relative text-decoration-none"
							href="#"
							role="button"
							id="notificationsDropdown"
							data-bs-toggle="dropdown"
							aria-expanded="false"
						>
							<i class="bi bi-bell-fill fs-5"></i>
							{{ if gt (len .Notifications) 0 }}
								<span
									class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
								>
									{{ if gt (len .Notifications) 99 }}
										99+
									{{ else }}
										{{ len .Notifications }}
									{{ end }}
									<span class="visually-hidden">unread notifications</span>
								</span>
							{{ end }}
						</a>
						<ul
							class="dropdown-menu dropdown-menu-end"
							aria-labelledby="notificationsDropdown"
							style="width: 300px; max-height: 400px; overflow-y: auto;"
						>
							<li><h6 class="dropdown-header">Notifications</h6></li>
							{{ if gt (len .Notifications) 0 }}
								{{ range .Notifications }}
									<li>
										<a class="dropdown-item py-2" href="{{ .Link }}">
											<div class="d-flex align-items-center">
												<div class="flex-shrink-0">
													<div
														class="{{ if eq .Type "alert" }}
															bg-danger
														{{ else }}
															bg-primary
														{{ end }} rounded-circle p-1"
													>
														<i
															class="bi bi-{{ if eq .Type "alert" }}
																exclamation
															{{ else }}
																info
															{{ end }}-circle text-white small"
														></i>
													</div>
												</div>
												<div class="flex-grow-1 ms-2">
													<p class="mb-0 small">{{ .Message }}</p>
													<span class="text-muted x-small"
														>{{ .Time | timeSincePtr }}</span
													>
												</div>
											</div>
										</a>
									</li>
								{{ end }}
								<li><hr class="dropdown-divider" /></li>
								<li>
									<a
										class="dropdown-item text-center small"
										href="notifications.html"
										>View all</a
									>
								</li>
							{{ else }}
								<li>
									<p class="dropdown-item text-center py-3 text-muted">
										No new notifications
									</p>
								</li>
							{{ end }}
						</ul>
					</div>

					<div class="dropdown">
						<a
							class="text-decoration-none dropdown-toggle d-flex align-items-center"
							href="#"
							role="button"
							id="userDropdown"
							data-bs-toggle="dropdown"
							aria-expanded="false"
						>
							<div
								class="avatar me-2 bg-primary rounded-circle d-flex align-items-center justify-content-center"
								style="width: 36px; height: 36px;"
							>
								<span class="text-white">{{ .Initials }}</span>
							</div>
							<span class="me-2">{{ .DisplayName }}</span>
						</a>
						<ul
							class="dropdown-menu dropdown-menu-end"
							aria-labelledby="userDropdown"
						>
							<li><a class="dropdown-item" href="/settings">Settings</a></li>
							<li><hr class="dropdown-divider" /></li>
							<li>
								<a class="dropdown-item text-danger" href="/signout"
									>Sign out</a
								>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</header>
{{ end }}