{{define "settings"}}
<!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 "settings-content" .}} {{template "main-layout-end" .}}
		{{template "password-modal" .}} {{template "body-common-scripts" .}}
		<script src="/static/settings.js"></script>
	</body>
</html>
{{end}}

{{define "settings-content"}}
<div class="space-y-6">
	<div class="mb-6">
		<h2 class="text-3xl font-bold text-white">Settings</h2>
		<p class="text-gray-400 mt-1">
			Manage MPV Manager application settings
		</p>
	</div>

	{{/* System Password and Desktop Shortcuts - Side by Side */}}
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
		{{/* System Password Section */}}
		<div class="bg-gray-800 rounded-lg p-6 {{if ne .Platform.OSType "linux"}}opacity-60{{end}}">
			<div class="flex items-center justify-between mb-4">
				<h3 class="text-xl font-semibold text-purple-400">
					<i class="bx bx-lock mr-2"></i>System Password
				</h3>
				{{if ne .Platform.OSType "linux"}}
				<span class="text-xs bg-gray-700 text-gray-400 px-2 py-1 rounded">
					Linux Only
				</span>
				{{end}}
			</div>

			{{if eq .Platform.OSType "linux"}}
			<p class="text-gray-400 mb-4">
				Store your sudo password securely for package manager installations.
				The password is encrypted and stored in your system keyring.
			</p>

			<!-- Keyring Status Display -->
			<div id="keyring-status-container" class="space-y-4">
				<!-- Status will be loaded via JS -->
				<div class="animate-pulse flex space-x-4">
					<div class="h-4 bg-gray-700 rounded w-1/4"></div>
				</div>
			</div>

			<!-- Password Actions -->
			<div id="password-actions" class="mt-4 flex flex-wrap gap-3 hidden">
				<button
					id="set-password-btn"
					class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
				>
					<i class="bx bx-key"></i>
					<span id="set-password-btn-text">Set Password</span>
				</button>
				<button
					id="clear-password-btn"
					class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded transition flex items-center gap-2 hidden"
				>
					<i class="bx bx-trash"></i>
					Clear Stored Password
				</button>
			</div>

			<!-- Keyring Setup Hint -->
			<div
				id="keyring-setup-hint"
				class="hidden mt-4 bg-yellow-900/30 border border-yellow-600/50 rounded-lg p-4"
			>
				<div class="flex items-start gap-3">
					<i class="bx bx-info-circle text-yellow-500 text-xl mt-0.5 flex-shrink-0"></i>
					<div>
						<h4 class="text-yellow-400 font-semibold mb-1">
							Keyring Setup Required
						</h4>
						<p class="text-gray-300 text-sm mb-2">
							To securely store passwords, install a keyring service:
						</p>
						<code id="keyring-install-cmd" class="block bg-gray-900 text-green-400 px-3 py-2 rounded text-sm font-mono">
							<!-- Command will be inserted via JS -->
						</code>
					</div>
				</div>
			</div>
			{{else}}
			<p class="text-gray-400 mb-4">
				The system password feature is only available on Linux for package manager installations.
			</p>
			<p class="text-gray-500 text-sm">
				Windows and macOS installations do not require sudo privileges.
			</p>
			{{end}}
		</div>

		{{/* Desktop Shortcuts Section */}}
		<div class="bg-gray-800 rounded-lg p-6">
			<h3 class="text-xl font-semibold text-purple-400 mb-4">
				<i class="bx bx-desktop mr-2"></i>Desktop Shortcuts
			</h3>
			<p class="text-gray-400 mb-4">
				Control whether MPV Manager creates desktop shortcuts automatically.
			</p>

			<div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
				<div>
					<h4 class="font-semibold text-white">Create Desktop Shortcut</h4>
					<p class="text-gray-400 text-sm mt-1">
						Automatically create a desktop shortcut when MPV Manager starts
					</p>
				</div>
				<label class="relative inline-flex items-center cursor-pointer">
					<input
						type="checkbox"
						id="desktop-shortcut-toggle"
						class="sr-only peer"
					/>
					<div
						class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"
					></div>
				</label>
			</div>

			<div id="shortcut-status" class="mt-3 text-sm text-gray-400">
				<!-- Status will be updated via JS -->
			</div>
		</div>
	</div>

	{{/* Data Management Section */}}
	<div class="bg-gray-800 rounded-lg p-6">
		<h3 class="text-xl font-semibold text-purple-400 mb-4">
			<i class="bx bx-data mr-2"></i>Data Management
		</h3>
		<p class="text-gray-400 mb-4">
			Reset or manage MPV Manager data files.
		</p>

		<div class="space-y-4">
			<!-- Reset MPV Manager Data -->
			<div class="p-4 bg-gray-700 rounded-lg">
				<div class="flex items-start justify-between gap-4">
					<div>
						<h4 class="font-semibold text-white">Reset MPV Manager Data</h4>
						<p class="text-gray-400 text-sm mt-1">
							Reset the mpv-manager.json configuration file to default values.
							This will remove all installed app records and reset preferences.
						</p>
						<p class="text-yellow-400 text-sm mt-2">
							<i class="bx bx-warning mr-1"></i>
							This action cannot be undone.
						</p>
					</div>
					<button
						id="reset-data-btn"
						class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center gap-2 flex-shrink-0"
					>
						<i class="bx bx-refresh"></i>
						Reset Data
					</button>
				</div>
			</div>

			<!-- Config File Location -->
			<div class="bg-gray-700 rounded-lg p-4">
				<p class="text-sm text-gray-400">Config File</p>
				<p id="config-file-path" class="font-mono text-sm text-white">
					<!-- Path will be loaded via JS -->
				</p>
			</div>
		</div>
	</div>

	{{/* Confirmation Modal for Reset */}}
	<div
		id="reset-confirm-modal"
		class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-[60]"
		role="dialog"
		aria-modal="true"
		aria-labelledby="reset-modal-title"
	>
		<div
			class="bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 transform transition-all"
		>
			<!-- Header -->
			<div
				class="p-6 border-b border-gray-700 flex justify-between items-center"
			>
				<div class="flex items-center gap-3">
					<i class="bx bx-error text-2xl text-red-400"></i>
					<h3
						id="reset-modal-title"
						class="text-xl font-semibold text-white"
					>
						Confirm Reset
					</h3>
				</div>
				<button
					id="reset-modal-close"
					class="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 -->
			<div class="p-6">
				<p class="text-gray-300 mb-4">
					Are you sure you want to reset MPV Manager data? This will:
				</p>
				<ul class="list-disc list-inside text-gray-400 text-sm space-y-1 mb-4">
					<li>Remove all installed app records</li>
					<li>Reset all preferences to defaults</li>
					<li>Clear saved UI type selections</li>
					<li>Remove hardware decoder preferences</li>
				</ul>
				<p class="text-yellow-400 text-sm">
					<strong>Note:</strong> Your MPV configuration (mpv.conf) and backups will not be affected.
				</p>
			</div>

			<!-- Footer -->
			<div class="p-6 border-t border-gray-700 flex justify-end gap-3">
				<button
					id="reset-modal-cancel"
					class="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="reset-modal-confirm"
					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-refresh"></i>
					<span id="reset-modal-confirm-text">Reset Data</span>
				</button>
			</div>
		</div>
	</div>
</div>
{{end}}
