{{define "ui-select-modal"}}
<div
	id="ui-select-modal"
	class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50"
	role="dialog"
	aria-modal="true"
	aria-labelledby="ui-select-modal-title"
>
	<div
		class="bg-gray-800 rounded-lg shadow-2xl max-w-lg w-full mx-4 transform transition-all"
	>
		<!-- Header -->
		<div
			class="p-6 border-b border-gray-700 flex justify-between items-center"
		>
			<h3
				id="ui-select-modal-title"
				class="text-xl font-semibold text-white"
			>
				Select UI Overlay
			</h3>
			<button
				class="ui-modal-close text-gray-400 hover:text-white transition focus:outline-none focus:ring-2 focus:ring-purple-500 rounded"
				aria-label="Close modal"
			>
				<i class="bx bx-x text-2xl"></i>
			</button>
		</div>

		<!-- Body with radio options -->
		<div class="p-6">
			<p class="text-gray-300 mb-4">
				Choose a UI overlay for
				<span
					id="ui-modal-app-name"
					class="text-purple-400 font-medium"
				></span
				>:
			</p>

			<div
				class="space-y-3"
				role="radiogroup"
				aria-label="UI overlay options"
			>
				<!-- ModernZ option (recommended) -->
				<label
					class="ui-option flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition border-2 border-transparent focus-within:ring-2 focus-within:ring-purple-500"
					data-ui-type="modernz"
				>
					<input
						type="radio"
						name="ui-type"
						value="modernz"
						class="mr-3 accent-purple-500 w-4 h-4"
						checked
					/>
					<div class="flex-1">
						<div class="flex items-center gap-2">
							<span class="font-semibold text-white"
								>ModernZ</span
							>
							<span
								class="bg-purple-600 text-xs px-2 py-1 rounded-full"
								>Recommended</span
							>
						</div>
						<p class="text-gray-400 text-sm">
							Classic OSC look with modern features
						</p>
					</div>
				</label>

				<!-- UOSC option -->
				<label
					class="ui-option flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition border-2 border-transparent focus-within:ring-2 focus-within:ring-purple-500"
					data-ui-type="uosc"
				>
					<input
						type="radio"
						name="ui-type"
						value="uosc"
						class="mr-3 accent-purple-500 w-4 h-4"
					/>
					<div class="flex-1">
						<span class="font-semibold text-white">UOSC</span>
						<p class="text-gray-400 text-sm">
							Feature-rich modern UI with touch support
						</p>
					</div>
				</label>

				<!-- No UI option -->
				<label
					class="ui-option flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition border-2 border-transparent focus-within:ring-2 focus-within:ring-purple-500"
					data-ui-type="none"
				>
					<input
						type="radio"
						name="ui-type"
						value="none"
						class="mr-3 accent-purple-500 w-4 h-4"
					/>
					<div class="flex-1">
						<span class="font-semibold text-white"
							>No UI Overlay</span
						>
						<p class="text-gray-400 text-sm">
							Use MPV's default interface
						</p>
					</div>
				</label>
			</div>
		</div>

		<!-- Footer -->
		<div class="p-6 border-t border-gray-700 flex justify-end gap-3">
			<button
				class="ui-modal-cancel bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded transition focus:outline-none focus:ring-2 focus:ring-gray-500"
			>
				Cancel
			</button>
			<button
				id="ui-modal-confirm"
				class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
			>
				<i class="bx bx-archive-arrow-down"></i>
				<span id="ui-modal-confirm-text">Install</span>
			</button>
		</div>
	</div>
</div>

<style>
	#ui-select-modal {
		backdrop-filter: blur(4px);
	}

	#ui-select-modal > div {
		animation: uiModalSlideIn 0.3s ease-out;
	}

	@keyframes uiModalSlideIn {
		from {
			opacity: 0;
			transform: scale(0.95) translateY(-10px);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	#ui-select-modal.closing > div {
		animation: uiModalSlideOut 0.2s ease-in forwards;
	}

	@keyframes uiModalSlideOut {
		from {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
		to {
			opacity: 0;
			transform: scale(0.95) translateY(-10px);
		}
	}

	/* Selected option styling */
	.ui-option.selected {
		border-color: rgb(147, 51, 234); /* purple-600 */
		background-color: rgb(55, 48, 107); /* purple-900/50 */
	}
</style>
{{end}}