{{define "sidebar"}}
<aside
	class="sidebar w-[280px] bg-gray-800 p-6 flex flex-col min-w-[280px] max-w-[280px] h-screen overflow-y-auto"
	aria-label="Sidebar"
>
	<div class="mb-8">
		<h1 class="text-2xl font-bold text-purple-400">MPV.Rocks</h1>
		<p class="text-sm text-gray-400 mt-1">MPV App Manager</p>
	</div>

	<nav aria-label="Main navigation" class="flex-1 overflow-y-auto min-h-0">
		<ul class="space-y-1" role="list">
			{{range .Nav}}
			<li>
				<a
					href="{{.URL}}"
					class="nav-item flex items-center gap-3 p-3 rounded-lg text-gray-300 {{if .Active}}active{{end}}"
					{{if .Active}}aria-current="page"{{end}}
				>
					<span class="text-xl" aria-hidden="true">{{.Icon}}</span>
					<span class="text-sm font-medium">{{.Name}}</span>
				</a>
			</li>
			{{end}}
		</ul>
	</nav>

	<!-- Tasks Section -->
	<div id="sidebar-tasks" class="mt-auto pt-4 border-t border-gray-700 mb-4">
		<a
			href="/tasks"
			class="nav-item flex items-center gap-3 p-3 rounded-lg text-gray-300 hover:bg-gray-700"
			id="tasks-nav-link"
		>
			<i class="bx bx-task text-xl" aria-hidden="true"></i>
			<span class="text-sm font-medium">Tasks</span>
			<span
				id="active-tasks-count"
				class="task-badge hidden ml-auto"
				aria-label="Active tasks count"
				>0</span
			>
		</a>
	</div>

	<div class="pt-4 border-t border-gray-700">
		<a
			href="https://mpv.rocks"
			class="text-xs text-purple-400 hover:underline"
			>mpv.rocks</a
		>
		<p class="text-xs text-gray-500 mt-1">Version: {{.AppVersion}}</p>
		<div
			id="server-status"
			class="flex items-center justify-center gap-2 py-2 px-3 bg-gray-700 rounded-lg mt-4 mb-3"
			role="status"
			aria-live="polite"
		>
			<span
				id="status-orb"
				class="w-2 h-2 rounded-full bg-green-400"
				aria-hidden="true"
			></span>
			<span id="status-text" class="text-sm font-medium text-green-400"
				>App Online</span
			>
		</div>
		<button
			data-modal="shutdown"
			hx-confirm="Close MPV.Rocks Installer?"
			class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center justify-center gap-2 mt-3"
		>
			<i class="bx bx-power-off" aria-hidden="true"></i>
			Shutdown App
		</button>
	</div>
</aside>
{{end}}
