{{define "password-modal"}}
<div
	id="password-modal"
	class="fixed inset-0 bg-black/50 hidden items-center justify-center z-[60]"
	role="dialog"
	aria-modal="true"
	aria-labelledby="password-modal-title"
	aria-describedby="password-modal-description"
	aria-hidden="true"
>
	<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-lock text-2xl text-purple-400"></i>
				<h3
					id="password-modal-title"
					class="text-xl font-semibold text-white"
				>
					Administrator Password Required
				</h3>
			</div>
			<button
				id="password-modal-close"
				class="text-gray-400 hover:text-white transition focus:outline-hidden 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 id="password-modal-description" class="text-gray-300 mb-4">
				Package manager installations require administrator privileges.
				Please enter your password to continue.
			</p>

			<!-- Password Input -->
			<div class="mb-4">
				<label
					for="password-input"
					class="block text-sm font-medium text-gray-300 mb-2"
				>
					Password
				</label>
				<div class="relative">
					<input
						type="password"
						id="password-input"
						class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-purple-500 focus:border-transparent"
						placeholder="Enter your password"
						autocomplete="current-password"
					/>
					<button
						type="button"
						id="toggle-password-visibility"
						class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition"
						aria-label="Show password"
						aria-pressed="false"
					>
						<i class="bx bx-eye-slash text-xl"></i>
					</button>
				</div>
			</div>

			<!-- Storage Notice -->
			<p class="text-sm text-gray-400 mb-4">
				Your password will be stored securely in the system keyring for
				future installations.
			</p>

			<!-- Error Message -->
			<div
				id="password-error"
				role="alert"
				class="hidden bg-red-900/30 border border-red-600/50 rounded-lg p-3 mb-4"
			>
				<div class="flex items-center gap-2">
					<i class="bx bx-x-circle text-red-400"></i>
					<span
						id="password-error-message"
						class="text-red-400 text-sm"
					></span>
				</div>
			</div>

			<!-- Keyring Setup Info (shown if keyring needs setup) -->
			<div
				id="keyring-setup-info"
				class="hidden bg-yellow-900/30 border border-yellow-600/50 rounded-lg p-3"
			>
				<div class="flex items-start gap-2">
					<i class="bx bx-info-circle text-yellow-400 mt-0.5"></i>
					<div>
						<p class="text-yellow-400 text-sm font-medium mb-1">
							Keyring Setup Required
						</p>
						<p
							id="keyring-install-hint"
							class="text-gray-300 text-xs"
						></p>
					</div>
				</div>
			</div>
		</div>

		<!-- Footer -->
		<div class="p-6 border-t border-gray-700 flex justify-end gap-3">
			<button
				id="password-modal-cancel"
				class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded transition focus:outline-hidden focus:ring-2 focus:ring-gray-500"
			>
				Cancel
			</button>
			<button
				id="password-modal-authenticate"
				class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2 focus:outline-hidden focus:ring-2 focus:ring-purple-500"
			>
				<i class="bx bx-check"></i>
				<span id="password-modal-auth-text">Authenticate</span>
			</button>
		</div>
	</div>
</div>

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

	#password-modal > div {
		animation: passwordModalSlideIn 0.3s ease-out;
	}

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

	#password-modal.closing > div {
		animation: passwordModalSlideOut 0.2s ease-in forwards;
	}

	@keyframes passwordModalSlideOut {
		from {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
		to {
			opacity: 0;
			transform: scale(0.95) translateY(-10px);
		}
	}
</style>
{{end}}