{{define "languages"}}
<!doctype html>
<html lang="en">
	<head>
		{{template "head-common" .}}
		<title>{{.Title}}</title>
	</head>
	<body class="bg-gray-900 text-gray-100">
		{{template "accessibility-common" .}} {{template "main-layout-start" .}}
		{{template "languages-content" .}} {{template "main-layout-end" .}}
		{{template "body-common-scripts" .}}
		<script src="/static/languages.js"></script>
	</body>
</html>
{{end}} {{define "languages-content"}}
<div class="space-y-6">
	<!-- Header with Save Button -->
	<div class="flex items-center justify-between mb-6">
		<div>
			<h2 class="text-3xl font-bold text-white">Language Preferences</h2>
			<p class="text-gray-400 mt-1">
				Configure audio and subtitle language preferences for MPV player
			</p>
		</div>
		<button
			id="save-languages-btn"
			class="bg-purple-600 hover:bg-purple-700 text-white px-5 py-2.5 rounded-lg transition flex items-center gap-2 font-medium"
		>
			<i class="bx bx-save"></i>
			Save Preferences
		</button>
	</div>

	<!-- Two-Step Language Selection -->
	<div class="grid md:grid-cols-2 gap-6">
		<!-- Left Column: Step 1 & Step 2 -->
		<div class="bg-gray-800 rounded-lg p-6">
			<!-- Hidden select element for backward compatibility -->
			<select id="language-type-select" class="hidden">
				<option value="audio">Audio Language</option>
				<option value="subtitle">Subtitle Language</option>
			</select>

			<!-- Step 1: Major Languages -->
			<div id="step-1-container" class="language-step">
				<div
					class="mb-4 bg-purple-900/30 border border-purple-500/30 rounded-lg p-4"
				>
					<p class="text-purple-300 text-sm">
						<i class="bx bx-mouse-alt mr-2"></i>
						<strong>Step 1:</strong> Click on a major language to
						view regional variants
					</p>
				</div>
				<div class="mb-4">
					<div class="relative flex items-center">
						<i
							class="bx bx-search absolute left-3 text-gray-400 pointer-events-none"
						></i>
						<input
							type="text"
							id="major-language-search"
							placeholder="Search languages..."
							class="w-full bg-gray-700 text-white px-4 py-2 pl-10 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
						/>
						<div class="absolute right-2 flex items-center gap-1">
							<span
								class="text-xs text-gray-200 bg-gray-600 px-2 py-0.5 rounded"
							>
								<span id="major-language-count">-</span> Languages
							</span>
							<button
								id="clear-search-btn"
								class="text-gray-400 hover:text-white focus:outline-none hover:bg-gray-500 rounded-full w-6 h-6 flex items-center justify-center transition-colors"
								title="Clear search"
							>
								<i class="bx bx-x"></i>
							</button>
						</div>
					</div>
				</div>

				<div
					id="major-language-list"
					class="space-y-2 max-h-[70vh] overflow-y-auto pr-2"
				>
					<!-- Loading indicator -->
					<div id="major-loading" class="text-center py-8">
						<i
							class="bx bx-loader-alt bx-spin text-3xl text-purple-400"
						></i>
						<p class="text-gray-400 mt-2">Loading languages...</p>
					</div>
				</div>
			</div>

			<!-- Step 2: Regional Variants (Hidden Initially) -->
			<div id="step-2-container" class="language-step hidden">
				<div
					class="mb-4 bg-purple-900/30 border border-purple-500/30 rounded-lg p-4"
				>
					<p class="text-purple-300 text-sm">
						<i class="bx bx-list-ul mr-2"></i>
						<strong>Step 2:</strong> Click on a regional variant to
						add it to your priority list
					</p>
				</div>
				<!-- Back Button -->
				<button
					id="back-to-major-btn"
					class="mb-4 bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition flex items-center gap-2"
				>
					<i class="bx bx-arrow-left"></i>
					Back to Languages
				</button>

				<!-- Major Language Display -->
				<div
					id="selected-major-display"
					class="mb-4 p-3 bg-gray-800 rounded-lg border border-gray-700"
				>
					<p class="text-sm text-gray-400">Selected Language:</p>
					<div class="flex items-center gap-3 mt-2">
						<span id="selected-major-flag" class="text-2xl"></span>
						<div>
							<p
								id="selected-major-name"
								class="font-medium text-white"
							></p>
							<p
								id="selected-major-local"
								class="text-gray-400 text-sm"
							></p>
						</div>
					</div>
				</div>

				<!-- Regional Variants List -->
				<div id="regional-loading" class="text-center py-8 hidden">
					<i
						class="bx bx-loader-alt bx-spin text-3xl text-purple-400"
					></i>
					<p class="text-gray-400 mt-2">
						Loading regional languages...
					</p>
				</div>
				<div
					id="regional-variants-list"
					class="space-y-2 max-h-[70vh] overflow-y-auto pr-2"
				>
				</div>
			</div>
		</div>

		<!-- Right Column: Priority Lists -->
		<div class="space-y-6">
			<div
				class="bg-purple-900/20 border border-purple-500/30 rounded-lg p-4"
			>
				<p class="text-purple-300 text-sm">
					<i class="bx bx-help-circle mr-2"></i>
					<strong>Priority Lists:</strong> MPV will try audio/subtitle
					tracks in the order listed below. First available language
					will be used automatically. For regional language
					preferences, if none are found, the main language or related
					will be played.
				</p>
			</div>

			<!-- Audio Language Priority List -->
			<div class="bg-gray-800 rounded-lg p-6">
				<div class="flex items-center justify-between mb-4 gap-3">
					<h3 class="text-xl font-semibold text-purple-400">
						<i class="bx bx-speaker mr-2"></i>Audio Language Priority
					</h3>
					<button
						id="selector-audio"
						class="selector-btn bg-green-600 text-white px-4 py-2 rounded-lg transition text-sm font-medium flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-green-500"
						title="Click to select Audio for adding languages"
					>
						<i class="bx bx-check"></i>
						<span>Selected for Adding</span>
					</button>
				</div>

				<div
					id="audio-priority-list"
					class="space-y-2 max-h-[45vh] overflow-y-auto"
				>
					<div class="text-gray-400 text-sm italic text-center py-4">
						No audio languages selected
					</div>
				</div>
			</div>

			<!-- Subtitle Language Priority List -->
			<div class="bg-gray-800 rounded-lg p-6">
				<div class="flex items-center justify-between mb-4 gap-3">
					<h3 class="text-xl font-semibold text-purple-400">
						<i class="bx bx-captions mr-2"></i>Subtitle Language Priority
					</h3>
					<button
						id="selector-subtitle"
						class="selector-btn bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition text-sm font-medium flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-gray-500"
						title="Click to select Subtitle for adding languages"
					>
						<i class="bx bx-plus"></i>
						<span>Select for Adding</span>
					</button>
				</div>

				<div
					id="subtitle-priority-list"
					class="space-y-2 max-h-[45vh] overflow-y-auto"
				>
					<div class="text-gray-400 text-sm italic text-center py-4">
						No subtitle languages selected
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Hidden save message container -->
	<div
		id="save-message"
		class="text-green-400 font-medium hidden"
	>
		<i class="bx bx-check-circle"></i>
		Language preferences saved successfully!
	</div>
</div>
{{end}}
