{{define "app-card"}}
<div class="bg-gray-700 rounded-lg p-4">
	<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/{{.App.Logo}}"
				class="w-8 h-8"
				alt=""
			/>
			<div class="flex min-w-0 items-center gap-2 flex-wrap">
				<h3 class="font-semibold text-white">{{.App.AppName}}</h3>
				{{/* Detected badge for externally installed apps */}} {{if not
				.App.Managed}}
				<span
					class="text-xs bg-amber-500/80 text-gray-900 px-2 py-1 rounded-md flex items-center gap-1"
					title="Externally installed - click Manage to configure"
				>
					<i class="bx bx-radar" aria-hidden="true"></i>
					Detected
				</span>
				{{end}} {{/* Styled install method tag with icon */}} {{if
				.App.TypeTag}} {{if or (eq .App.TypeTag "Package Manager")
				$.Platform.Distro}} {{/* Package Manager with distro logo */}}
				<span
					class="bg-gray-600 text-xs px-2 py-1 rounded flex items-center gap-2"
				>
					{{if and (eq .App.TypeTag "Package Manager")
					$.Platform.Distro}}
					<img
						src="/static/logos/{{getDistroLogo $.Platform.Distro}}"
						class="w-4 h-4"
						alt="{{$.Platform.Distro}}"
					/>
					{{else if .App.TypeLogo}}
					<img
						src="/static/logos/{{.App.TypeLogo}}"
						class="w-4 h-4"
						alt="{{.App.TypeTag}}"
					/>
					{{end}} {{.App.TypeTag}}
				</span>
				{{else if .App.TypeLogo}} {{/* Flatpak, Portable, or Installed
				App with icon */}}
				<span
					class="bg-gray-600 text-xs px-2 py-1 rounded flex items-center gap-2"
				>
					<img
						src="/static/logos/{{.App.TypeLogo}}"
						class="w-4 h-4"
						alt="{{.App.TypeTag}}"
					/>
					{{.App.TypeTag}}
				</span>
				{{else}} {{/* UI Component, Utility, or fallback without icon
				*/}}
				<span class="bg-gray-600 text-xs px-2 py-1 rounded"
					>{{.App.TypeTag}}</span
				>
				{{end}} {{end}} {{/* UI overlay tag - only for MPV-based apps
				that support UI changes */}} {{if and .App.UIType (canChangeUI
				.App.InstallMethod)}}
				<span
					class="text-xs bg-violet-500/80 text-white px-2 py-1 rounded-md"
					title="UI Overlay"
					>{{if eq .App.UIType "uosc"}}UOSC UI{{else if eq .App.UIType
					"modernz"}}ModernZ UI{{else}}Default UI{{end}}</span
				>
				{{end}} {{if .App.Version}}
				<span
					class="text-xs bg-gray-600 text-gray-300 px-2 py-1 rounded-md"
					>{{cleanAppVersion .App.Version}}</span
				>
				{{end}}
			</div>
		</div>

		<div class="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:shrink-0">
			{{/* Show Create Shortcut button for Windows MPV portable/binary
			installs */}} {{if and $.Platform.IsWindows (or (eq
			.App.InstallMethod "mpv-binary") (eq .App.InstallMethod
			"mpv-binary-v3"))}}
			<button
				data-create-shortcut
				data-app-id="{{.App.App.ID}}"
				data-app-name="{{.App.AppName}}"
				class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-2 rounded transition flex flex-1 items-center justify-center gap-1 text-sm focus:outline-hidden focus:ring-2 focus:ring-purple-500 sm:flex-none"
				title="Create Desktop and Start Menu Shortcuts"
				aria-label="Create Desktop and Start Menu Shortcuts"
			>
				<i class="bx bx-link" aria-hidden="true"></i>
				<span class="hidden sm:inline">Create Shortcut</span>
			</button>
			{{end}} {{/* For unmanaged apps: Show Manage button to
			adopt/configure - available for ALL externally detected apps */}}
			{{if not .App.Managed}}
			<button
				data-adopt-app
				data-app-id="{{.App.App.ID}}"
				data-app-name="{{.App.AppName}}"
				data-install-method="{{.App.InstallMethod}}"
				data-install-path="{{.App.App.InstallPath}}"
				class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded transition flex flex-1 items-center justify-center gap-1 text-sm focus:outline-hidden focus:ring-2 focus:ring-purple-500 sm:flex-none"
				title="Configure and manage this app with MPV Manager"
				aria-label="Configure and manage this app with MPV Manager"
			>
				<i class="bx bx-arrow-in-right-stroke-circle-half" aria-hidden="true"></i>
				<span class="hidden sm:inline">Import to Manager</span>
			</button>
			{{/* For managed apps that support UI changes: Show Change UI button
			*/}} {{else if canChangeUI .App.InstallMethod}}
			<button
				data-change-ui
				data-app-id="{{.App.App.ID}}"
				data-app-name="{{.App.AppName}}"
				data-install-method="{{.App.InstallMethod}}"
				data-install-path="{{.App.App.InstallPath}}"
				data-current-ui="{{.App.UIType}}"
				class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-2 rounded transition flex flex-1 items-center justify-center gap-1 text-sm focus:outline-hidden focus:ring-2 focus:ring-purple-500 sm:flex-none"
				title="Change UI Overlay"
				aria-label="Change UI Overlay"
			>
				<i class="bx bx-palette" aria-hidden="true"></i>
				<span class="hidden sm:inline">Change UI</span>
			</button>
			{{end}} {{/* Uninstall button - only for managed apps */}} {{if
			.App.Managed}}
			<button
				data-uninstall
				data-uninstall-app-id="{{.App.App.ID}}"
				data-uninstall-app-name="{{.App.AppName}}"
				data-uninstall-app-type="{{.App.AppType}}"
				data-uninstall-method="{{.App.InstallMethod}}"
				data-uninstall-path="{{.App.App.InstallPath}}"
				class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded transition flex flex-1 items-center justify-center gap-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-red-500 sm:flex-none"
			>
				<i class="bx bx-trash" aria-hidden="true"></i>
				Uninstall
			</button>
			{{end}}
		</div>
	</div>

	{{if and .Platform.IsWindows .App.Managed (or (eq .App.InstallMethod "mpv-binary") (eq .App.InstallMethod "mpv-binary-v3"))}}
	<div class="mt-4 border-t border-gray-600 pt-3">
		<h4 class="font-semibold text-purple-400 mb-2">File Associations</h4>
		<p class="text-sm text-gray-300 mb-2">Open media files with this MPV installation. Choose the file types in Windows Settings.</p>
		<p class="text-xs text-gray-400 mb-2 break-all">{{.App.App.InstallPath}}</p>
		<div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
			<button type="button" data-file-assoc-setup data-app-id="{{.App.App.ID}}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg focus-visible:ring-2 focus-visible:ring-purple-400">Install File Associations</button>
			<button type="button" data-file-assoc-remove data-app-id="{{.App.App.ID}}" class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded-lg focus-visible:ring-2 focus-visible:ring-purple-400">Remove File Associations</button>
		</div>
		<p class="text-xs text-gray-400 mt-2">In Windows Settings, select mpv and choose your defaults. On older Windows versions, search for mpv under Default apps.</p>
	</div>
	{{end}}
</div>
{{end}}