{{define "install-method-card"}}
{{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 flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
		<div class="flex min-w-0 items-center gap-3">
			<img
				src="/static/logos/{{.Logo}}"
				class="w-8 h-8"
				alt=""
			/>
			<div class="flex-1 min-w-0">
				<div class="flex flex-wrap items-center gap-2">
					<h3 class="font-semibold text-white">{{.Name}}</h3>
					{{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 w-full flex-wrap items-center gap-2 sm:w-auto sm:shrink-0">
			<a
				href="{{.Homepage}}"
				target="_blank"
				rel="noopener noreferrer"
				class="text-purple-400 hover:text-purple-300 text-sm flex min-h-11 flex-1 items-center justify-center gap-1 px-3 rounded sm:flex-none"
			>
				<i class="bx bx-arrow-out-up-right-square" aria-hidden="true"></i>
				Homepage
			</a>
			<button
				class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex flex-1 items-center justify-center gap-2 sm:flex-none"
				data-install
				data-method-id="{{.ID}}"
				data-app-name="{{.Name}}"
				{{if or (eq .Type "Package Manager") (eq .Type "Snap") (eq .Type "Flatpak")}}data-requires-sudo="true"{{end}}
				data-method-type="{{.Type}}"
			>
				<i class="bx bx-archive-arrow-down" aria-hidden="true"></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
				type="button"
				data-job-details-method="{{.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}}
{{end}}