{{define "app-card"}}
<div class="bg-gray-700 rounded-lg p-4">
	<div class="flex items-center justify-between">
		<div class="flex items-center gap-3">
			<img
				src="/static/logos/{{.App.Logo}}"
				class="w-8 h-8"
				alt="{{.App.AppName}}"
			/>
			<div class="flex items-center gap-2 flex-wrap">
				<h4 class="font-semibold text-white">{{.App.AppName}}</h4>
				{{/* Detected badge for externally installed apps */}} {{if not
				.App.Managed}}
				<span
					class="text-xs bg-amber-500/80 text-white px-2 py-1 rounded-md flex items-center gap-1"
					title="Externally installed - click Manage to configure"
				>
					<i class="bx bx-radar"></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 items-center gap-2">
			{{/* 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-name="{{.App.AppName}}"
				class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-2 rounded transition flex items-center gap-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
				title="Create Desktop and Start Menu Shortcuts"
			>
				<i class="bx bx-link"></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-name="{{.App.AppName}}"
				data-install-method="{{.App.InstallMethod}}"
				class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded transition flex items-center gap-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
				title="Configure and manage this app with MPV Manager"
			>
				<i class="bx bx-arrow-in-right-stroke-circle-half"></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-name="{{.App.AppName}}"
				data-current-ui="{{.App.UIType}}"
				class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-2 rounded transition flex items-center gap-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
				title="Change UI Overlay"
			>
				<i class="bx bx-palette"></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-name="{{.App.AppName}}"
				data-uninstall-app-type="{{.App.AppType}}"
				data-uninstall-method="{{.App.InstallMethod}}"
				class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-red-500"
			>
				<i class="bx bx-trash"></i>
				Uninstall
			</button>
			{{end}}
		</div>
	</div>
</div>
{{end}}