{{define "dashboard"}}
<!doctype html>
<html lang="en">
	<head>
		{{template "head-common" .}}
		<title>{{.Title}}</title>
	</head>
	<body class="bg-gray-900 text-gray-100">
		{{template "accessibility-common" .}} {{template "main-layout-start" .}}
		{{template "dashboard-content" .}} {{template "main-layout-end" .}}
		{{template "ui-select-modal" .}} {{template "body-common-scripts" .}}
		<script src="/static/install.js"></script>
		<script src="/static/ui-select.js"></script>
	</body>
</html>
{{end}} {{define "dashboard-content"}}
<div class="space-y-6">
	<div class="mb-6">
		<h2 class="text-3xl font-bold text-white">Dashboard</h2>
		<p class="text-gray-400 mt-1">System overview and quick actions</p>
	</div>

	<div class="bg-gray-800 rounded-lg p-6 mb-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			Hardware Information
		</h3>

		<div class="grid grid-cols-2 gap-6">
			<div class="bg-gray-700 rounded-lg p-4">
				<div class="flex items-center gap-3 mb-2">
					<i class="bx bx-chip text-2xl text-purple-400"></i>
					<h4 class="font-semibold text-white">CPU</h4>
				</div>
				<div class="text-gray-300 text-sm">
					<p
						class="font-medium {{getVendorColor .Platform.CPUInfo.Vendor}}"
					>
						{{.Platform.CPUInfo.Model}}
					</p>
					<p class="text-gray-400">
						Vendor: {{.Platform.CPUInfo.VendorDisplay}}
					</p>
					<p class="text-gray-400">
						Arch: {{.Platform.CPUInfo.ArchitectureLevel}}
					</p>
					{{if .Platform.CPUInfo.SupportsAVX2}}
					<p class="text-green-400">✓ AVX2 Supported</p>
					{{end}} {{if .Platform.CPUInfo.SupportsAVX512}}
					<p class="text-green-400">✓ AVX512 Supported</p>
					{{end}} {{if .Platform.CPUInfo.SupportsNEON}}
					<p class="text-green-400">✓ NEON Supported</p>
					{{end}}
				</div>
			</div>

			<div class="bg-gray-700 rounded-lg p-4">
				<div class="flex items-center gap-3 mb-2">
					<i class="bx bx-bolt text-2xl text-purple-400"></i>
					<h4 class="font-semibold text-white">
						GPU & Hardware Acceleration
					</h4>
				</div>

				<!-- GPU Model and Vendor -->
				<div class="text-gray-300 text-sm mb-3">
					{{range .Platform.GPUInfo.Models}}
					<p
						class="font-medium {{getVendorColor $.Platform.GPUInfo.Brand}}"
					>
						{{.}}
					</p>
					{{end}}
					<p class="text-gray-400">
						Vendor:
						<span
							>{{getVendorDisplay .Platform.GPUInfo.Brand}}</span
						>
					</p>
				</div>

				<!-- Hardware Acceleration Status and Method -->
				<div class="mb-3">
					<div class="flex items-center justify-between mb-2">
						<h5 class="font-semibold text-white">
							Hardware Acceleration
						</h5>
						<span
							class="{{getHWABadgeColor .Config.HardwareAccel}} text-white px-2 py-1 rounded text-xs font-medium"
						>
							{{getHWABadgeText .Config.HardwareAccel}}
						</span>
					</div>

					{{if .Config.HardwareAccel}}
					<div class="flex items-center gap-2 text-sm">
						<span class="text-gray-400">Method:</span>
						<span class="text-white font-medium"
							>{{.Config.HardwareAccel}}</span
						>
					</div>
					{{end}}
				</div>

				<!-- Supported Codecs -->
				<div class="mt-4">
					<h5 class="font-semibold text-white mb-2">
						Supported Codecs
					</h5>
					<div class="flex flex-wrap gap-2">
						{{range .Platform.GPUInfo.SupportedCodecs}}
						<span
							class="{{getCodecBadgeColor .}} text-white px-3 py-1 rounded-full text-sm font-medium"
						>
							{{formatCodecName .}}
						</span>
						{{end}} {{if not .Platform.GPUInfo.SupportedCodecs}}
						<span class="text-gray-400 text-sm"
							>No codec information available</span
						>
						{{end}}
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="bg-gray-800 rounded-lg p-6 mb-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			MPV Manager Update
		</h3>

		<div
			class="flex items-center justify-between bg-gray-700 rounded-lg p-4"
		>
			<div>
				<p class="text-sm text-gray-400">Current Version</p>
				<p class="font-semibold text-white">
					{{.ManagerUpdate.CurrentVersion}}
				</p>
			</div>

			<div class="text-center">
				<p class="text-sm text-gray-400">Latest Version</p>
				<p class="font-semibold text-white">
					{{.ManagerUpdate.LatestVersion}}
				</p>
			</div>

			<div class="text-center">
				<p class="text-sm text-gray-400">Status</p>
				{{if .ManagerUpdate.UpdateAvailable}}
				<p class="font-semibold text-orange-400">
					<i class="bx bx-archive-arrow-down"></i> Update Available
				</p>
				{{else}}
				<p class="font-semibold text-green-400">
					<i class="bx bx-check-circle"></i> Up to Date
				</p>
				{{end}}
			</div>

			<div class="flex gap-2">
				<a
					href="https://gitgud.io/mike/mpv-manager"
					target="_blank"
					class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded transition flex items-center gap-2"
				>
					<i class="bxl bx-gitlab"></i>
					Repository
				</a>

				<a
					href="https://mpv.rocks/manager"
					target="_blank"
					class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded transition flex items-center gap-2"
				>
					<i class="bx bx-link"></i>
					Website
				</a>

				{{if .ManagerUpdate.UpdateAvailable}}
				<button
					data-modal="update-manager"
					data-modal-params="version={{.ManagerUpdate.LatestVersion}}"
					hx-confirm="Update MPV Manager to version {{.ManagerUpdate.LatestVersion}}?"
					class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
				>
					<i class="bx bx-archive-arrow-down"></i>
					Update Now
				</button>
				{{end}}
			</div>
		</div>
	</div>

	<div class="grid grid-cols-2 gap-6">
		<div class="bg-gray-800 rounded-lg p-6">
			<h3 class="text-xl font-semibold text-purple-400 mb-4">
				Language Preferences
			</h3>

			<div class="space-y-4">
				<div class="bg-gray-700 rounded-lg p-4">
					<label class="block text-sm font-medium text-gray-300 mb-2"
						>Audio Language</label
					>
					{{if .Config.AudioLanguages}}
					<div class="space-y-2">
						{{range $index, $lang := .Config.AudioLanguages}}
						<div
							class="flex items-center gap-3 p-3 bg-gray-600 rounded-lg"
						>
							{{$flagCode := GetLanguageCountryCode $lang}} {{if
							$flagCode}}
							<img
								src="/static/flags/{{$flagCode}}.png"
								class="w-8 h-8"
								onerror="this.src = '/static/flags/UN.png'"
							/>
							{{end}}
							<div class="flex-1">
								<p class="font-medium text-white">
									{{GetRegionalLanguageName $lang}}
								</p>
								<p class="text-gray-400 text-sm">
									{{GetRegionalNativeName $lang}}
								</p>
							</div>
							<div class="text-right">
								<p class="text-blue-400 text-sm font-mono">
									{{$lang}}
								</p>
							</div>
						</div>
						{{end}}
					</div>
					{{else}}
					<div class="flex items-center gap-2">
						<i class="bx bx-speaker text-xl text-purple-400"></i>
						<span class="text-gray-400 font-medium">Not set</span>
					</div>
					{{end}}
				</div>

				<div class="bg-gray-700 rounded-lg p-4">
					<label class="block text-sm font-medium text-gray-300 mb-2"
						>Subtitle Language</label
					>
					{{if .Config.SubtitleLanguages}}
					<div class="space-y-2">
						{{range $index, $lang := .Config.SubtitleLanguages}}
						<div
							class="flex items-center gap-3 p-3 bg-gray-600 rounded-lg"
						>
							{{$flagCode := GetLanguageCountryCode $lang}} {{if
							$flagCode}}
							<img
								src="/static/flags/{{$flagCode}}.png"
								class="w-8 h-8"
								onerror="this.src = '/static/flags/UN.png'"
							/>
							{{end}}
							<div class="flex-1">
								<p class="font-medium text-white">
									{{GetRegionalLanguageName $lang}}
								</p>
								<p class="text-gray-400 text-sm">
									{{GetRegionalNativeName $lang}}
								</p>
							</div>
							<div class="text-right">
								<p class="text-blue-400 text-sm font-mono">
									{{$lang}}
								</p>
							</div>
						</div>
						{{end}}
					</div>
					{{else}}
					<div class="flex items-center gap-2">
						<i class="bx bx-captions text-xl text-purple-400"></i>
						<span class="text-gray-400 font-medium">Not set</span>
					</div>
					{{end}}
				</div>
			</div>
		</div>

		<div>
			<div class="bg-gray-800 rounded-lg p-6 mb-6">
				<div class="flex items-center justify-between mb-4">
					<h3 class="text-xl font-semibold text-purple-400">
						Available Updates
					</h3>
					<button
						hx-post="/api/apps/check-updates"
						hx-target="#available-updates-list"
						hx-indicator="#updates-loading"
						hx-on:htmx:before-request="this.classList.add('bg-purple-800', 'cursor-not-allowed', 'disabled'); this.querySelector('i').classList.add('bx-spin')"
						hx-on:htmx:after-request="this.classList.remove('bg-purple-800', 'cursor-not-allowed', 'disabled'); this.querySelector('i').classList.remove('bx-spin')"
						class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
						id="check-updates-btn"
					>
						<i class="bx bx-refresh-cw" id="check-updates-icon"></i>
						Check for Updates
					</button>
				</div>

				<div id="updates-loading" class="hidden text-center py-4">
					<i
						class="bx bx-loader-alt bx-spin text-3xl text-purple-400"
					></i>
					<p class="text-gray-400 mt-2">Checking for updates...</p>
				</div>

				<div id="available-updates-list">
					{{template "client-updates" .}}
				</div>
			</div>

			<div class="bg-gray-800 rounded-lg p-6">
				<h3 class="text-xl font-semibold text-purple-400 mb-4">
					Installed MPV Clients
				</h3>

				{{if .InstalledAppGroups}}
				<div class="space-y-3">
					{{range $key, $value := .InstalledAppGroups}} {{range
					$value}} {{$data := createAppCardData . $.Platform}}
					{{template "app-card" $data}} {{end}} {{end}}
				</div>
				{{else}}
				<div class="text-center py-8">
					<p class="text-gray-400">No MPV clients installed</p>
					<a
						href="/apps"
						class="mt-4 inline-flex items-center gap-2 bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"
					>
						<i class="bx bx-archive-arrow-down"></i>
						Install MPV
					</a>
				</div>
				{{end}}
			</div>
		</div>
	</div>
</div>
{{end}}
