{{define "apps"}}
<!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 "apps-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 "apps-content"}}
<div class="space-y-6">
	<div class="mb-6">
		<h2 class="text-3xl font-bold text-white">MPV Player Apps</h2>
		<p class="text-gray-400 mt-1">
			Install and manage MPV-based media players
		</p>
	</div>

	{{if eq .Platform.OSType "darwin"}}
	<div
		class="bg-yellow-900/30 border border-yellow-600/50 rounded-lg p-4 mb-6"
	>
		<div class="flex items-start gap-3">
			<i
				class="bx bx-info-circle text-yellow-500 text-xl mt-0.5 flex-shrink-0"
			></i>
			<div>
				<h4 class="text-yellow-400 font-semibold mb-1">
					macOS Security Notice
				</h4>
				<p class="text-gray-300 text-sm">
					macOS may prompt you to allow MPV Manager to perform
					installation actions. If an installation fails, check
					<strong>System Settings → Privacy & Security</strong>
					for any pending permission requests, then retry the
					installation.
				</p>
			</div>
		</div>
	</div>
	{{end}}

	<div id="install-methods-section" class="bg-gray-800 rounded-lg p-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			Available Install Methods
		</h3>

		{{if .InstallMethods}} {{range .InstallMethods}}
		<div
			class="w-full bg-gray-700 hover:bg-gray-600 p-4 rounded-lg text-left transition mb-2"
			data-method-id="{{.ID}}"
		>
			<div class="flex items-center justify-between">
				<div class="flex items-center gap-3">
					<img
						src="/static/logos/{{.Logo}}"
						class="w-8 h-8"
						alt="{{.Name}}"
					/>
					<div class="flex-1">
						<div class="flex items-center gap-2">
							<h4 class="font-semibold text-white">{{.Name}}</h4>
							{{if eq .Type "Package Manager"}} {{if
							$.Platform.Distro}}
							<span
								class="bg-gray-600 text-xs px-2 py-1 rounded flex items-center gap-2"
							>
								<img
									src="/static/logos/{{getDistroLogo $.Platform.Distro}}"
									class="w-4 h-4"
									alt="{{$.Platform.Distro}}"
								/>
								{{.Type}}
							</span>
							{{else}}
							<span
								class="bg-gray-600 text-xs px-2 py-1 rounded flex items-center gap-2"
							>
								<img
									src="/static/logos/{{getPackageTypeLogo .Type $.Platform}}"
									class="w-4 h-4"
									alt="{{.Type}}"
								/>
								{{.Type}}
							</span>
							{{end}} {{else if getPackageTypeLogo .Type
							$.Platform}}
							<span
								class="bg-gray-600 text-xs px-2 py-1 rounded flex items-center gap-2"
							>
								<img
									src="/static/logos/{{getPackageTypeLogo .Type $.Platform}}"
									class="w-4 h-4"
									alt="{{.Type}}"
								/>
								{{.Type}}
							</span>
							{{else}}
							<span class="bg-gray-600 text-xs px-2 py-1 rounded"
								>{{.Type}}</span
							>
							{{end}} {{/* MPV methods: Best Playback */}} {{if or
							(eq .ID "mpv-flatpak") (eq .ID "mpv-snap") (eq .ID
							"mpv-package") (eq .ID "mpv-binary") (eq .ID
							"mpv-binary-v3") (eq .ID "mpv-app") (eq .ID
							"mpv-brew")}}
							<span
								class="bg-purple-600 text-xs px-2 py-1 rounded-full"
								>Best Playback</span
							>
							{{else if eq .ID "mpc-qt"}}
							<span
								class="bg-blue-600 text-xs px-2 py-1 rounded-full"
								>MPC-HC UI</span
							>
							{{else if or (eq .ID "celluloid-flatpak") (eq .ID
							"celluloid-snap") (eq .ID "celluloid-package") (eq
							.ID "iina")}}
							<span
								class="bg-blue-600 text-xs px-2 py-1 rounded-full"
								>Easy UI</span
							>
							{{end}}
						</div>
						<p class="text-gray-400 text-sm">{{.Description}}</p>
					</div>
				</div>
				<div class="flex items-center gap-2">
					<a
						href="{{.Homepage}}"
						target="_blank"
						class="text-purple-400 hover:text-purple-300 text-sm flex items-center gap-1"
					>
						<i class="bx bx-external-link"></i>
						Homepage
					</a>
					<button
						class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
						data-install
						data-method-id="{{.ID}}"
						data-app-name="{{.Name}}"
					>
						<i class="bx bx-archive-arrow-down"></i>
						Install
					</button>
				</div>
			</div>
			<!-- Progress indicator (hidden by default) -->
			<div id="app-{{.ID}}-progress" class="hidden mt-3">
				<div class="flex items-center justify-between mb-1">
					<span
						class="text-xs text-gray-400"
						data-job-progress-text="{{.ID}}"
						>Installing... 0%</span
					>
					<button
						onclick="
							window.showJobOutput(
								window.jobManager?.activeJobs?.values().next()
									.value?.id,
							)
						"
						class="text-xs text-purple-400 hover:text-purple-300"
					>
						View Details
					</button>
				</div>
				<div class="w-full bg-gray-600 rounded-full h-2">
					<div
						class="bg-purple-500 h-2 rounded-full transition-all duration-300"
						style="width: 0%"
						data-job-progress="{{.ID}}"
					></div>
				</div>
			</div>
		</div>
		{{end}} {{else}}
		<div class="text-center py-8">
			<p class="text-gray-400">All MPV players already installed</p>
		</div>
		{{end}}
	</div>

	{{/* Installed Applications Section */}}
	<div class="bg-gray-800 rounded-lg p-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			Installed Applications
		</h3>

		<div id="installed-apps-list">
			{{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>
			</div>
			{{end}}
		</div>
	</div>

	{{/* Available Updates Section */}}
	<div class="bg-gray-800 rounded-lg p-6">
		<div class="flex items-center justify-between mb-4">
			<h3 class="text-xl font-semibold text-purple-400">
				Available Updates
			</h3>
			<button
				id="check-updates-btn"
				hx-post="/api/apps/refresh-installed"
				hx-target="#installed-apps-list"
				hx-indicator="#updates-loading"
				hx-on:htmx:before-request="this.disabled = true; this.querySelector('i').classList.add('bx-spin')"
				hx-on:htmx:after-request="this.disabled = false; 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"
			>
				<i class="bx bx-refresh-cw"></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">
			{{if .ClientUpdates}}
			<div class="space-y-3">
				{{range .ClientUpdates}} {{if .UpdateAvailable}}
				<div
					class="bg-gray-700 rounded-lg p-4 flex items-center justify-between"
				>
					<div class="flex items-center gap-3">
						<img
							src="/static/logos/{{.Logo}}"
							class="w-8 h-8"
							alt="{{.AppName}}"
						/>
						<div>
							<h4 class="font-semibold text-white">
								{{.AppName}}
							</h4>
							{{if .PackageManager}}
							<p class="text-gray-400 text-sm">
								Current: {{cleanAppVersion .CurrentVersion}}
								({{.PackageManager}}) → Available:
								{{cleanAppVersion .AvailableVersion}}
							</p>
							{{else}}
							<p class="text-gray-400 text-sm">
								Current: {{cleanAppVersion .CurrentVersion}} →
								Available: {{cleanAppVersion .AvailableVersion}}
							</p>
							{{end}}
						</div>
					</div>
					<button
						data-install
						data-method-id="{{.MethodID}}"
						data-is-update="true"
						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>
						Install Update
					</button>
				</div>
				{{end}} {{end}}
			</div>
			{{else}}
			<div class="text-center py-4">
				<i class="bx bx-check-circle text-3xl text-green-400"></i>
				<p class="text-gray-400 mt-2">All apps are up to date</p>
				<p class="text-gray-500 text-sm">
					Click "Check for Updates" to check for new versions
				</p>
			</div>
			{{end}}
		</div>
	</div>

	{{if .Platform.IsWindows}}
	<div class="bg-gray-800 rounded-lg p-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			File Associations
		</h3>
		<p class="text-gray-400 mb-4">
			Set MPV as the default player for video files. Only for MPV
			official, when installed or uninstalled.
		</p>

		<div class="flex gap-4">
			<button
				class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
				hx-post="/api/file-associations/setup"
				hx-on:htmx:before-request="this.disabled = true; this.querySelector('i').classList.add('bx-spin')"
				hx-on:htmx:after-request="this.disabled = false; this.querySelector('i').classList.remove('bx-spin')"
			>
				<i class="bx bx-link"></i>
				Install File Associations
			</button>
			<button
				class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded transition flex items-center gap-2"
				data-modal="remove-file-associations"
				data-modal-fallback="Remove file associations?"
				hx-post="/api/file-associations/remove"
				hx-on:htmx:before-request="this.disabled = true; this.querySelector('i').classList.add('bx-spin')"
				hx-on:htmx:after-request="this.disabled = false; this.querySelector('i').classList.remove('bx-spin')"
			>
				<i class="bx bx-unlink"></i>
				Remove File Associations
			</button>
		</div>
	</div>
	{{end}}
</div>
{{end}}
