{{define "available-updates"}}
{{if .ClientUpdates}}
<div class="space-y-3">
	{{range .ClientUpdates}} {{if .UpdateAvailable}}
	<div
		class="bg-gray-700 rounded-lg p-4 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="min-w-0">
				<h3 class="font-semibold text-white">
					{{.AppName}}
				</h3>
				{{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-app-id="{{.AppID}}"
			data-app-name="{{.AppName}}"
			data-is-update="true"
			{{if or (eq .MethodID "mpv-package") (eq .MethodID "celluloid-package") (eq .MethodID "mpv-snap") (eq .MethodID "celluloid-snap") (eq .MethodID "mpv-flatpak") (eq .MethodID "celluloid-flatpak") (eq .MethodID "mpv-brew")}}data-requires-sudo="true"{{end}}
			data-method-type="{{.PackageManager}}"
			class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex w-full items-center justify-center gap-2 sm:w-auto sm:shrink-0"
		>
			<i class="bx bx-archive-arrow-down" aria-hidden="true"></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" aria-hidden="true"></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}}
{{end}}