{{define "apps-refresh-response"}} {{/* This template returns three sections
using HTMX OOB swap */}} {{/* OOB content - updates the install-methods-section
*/}}
<div
	id="install-methods-section"
	class="bg-gray-800 rounded-lg p-6"
	hx-swap-oob="true"
>
	<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}}"
				>
					<i class="bx bx-archive-arrow-down"></i>
					Install
				</button>
			</div>
		</div>
		<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>

{{/* Main content - replaces the installed-apps-list */}}
<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>

{{/* OOB content - updates the available-updates section */}}
<div id="available-updates" hx-swap-oob="true">
	{{if .ClientUpdates}} {{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}} {{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>
{{end}}