package destination

templ GooglePhotosDestinationForm() {
	<div class="space-y-6 mt-4" x-init="$watch('useBuiltinAuthDestination', value => {
			if(value) {
				destinationClientId = '';
				destinationClientSecret = '';
			}
		})">
		<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-blue-900/30 dark:text-blue-300" role="alert">
			<div class="flex items-center">
				<i class="fas fa-info-circle mr-2"></i>
				<span>Google Photos requires authentication after creating this configuration. You'll be prompted to authenticate once the configuration is saved.</span>
			</div>
		</div>

		<div>
			<div class="flex items-center mb-6">
				<label class="relative inline-flex items-center cursor-pointer">
					<input type="checkbox" id="use_builtin_auth_dest" name="use_builtin_auth_dest" x-model="useBuiltinAuthDest" 
						class="sr-only peer" :value="useBuiltinAuthDest ? 'true' : 'false'">
					<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
					<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Use rclone's built-in Google authentication (recommended)</span>
				</label>
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
				Simple one-click authentication using rclone's shared credentials
			</p>
		</div>

		<div x-bind:class="{ 'opacity-50': useBuiltinAuthDest }">
			<div class="mb-6">
				<label for="dest_client_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
					Google Client ID
					<span x-show="useBuiltinAuthDest" class="text-gray-500 dark:text-gray-400 text-xs font-normal">(Using rclone default)</span>
				</label>
				<div class="relative">
					<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
						<i class="fas fa-id-card text-gray-400 dark:text-gray-500"></i>
					</div>
					<input type="text" id="dest_client_id" name="dest_client_id" x-model="destinationClientId"
						class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
						x-bind:disabled="useBuiltinAuthDest"
						placeholder="Google Photos OAuth Client ID" />
				</div>
				<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
					Client ID from Google Cloud Console
				</p>
			</div>

			<div class="mb-6">
				<label for="dest_client_secret" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
					Google Client Secret
					<span x-show="useBuiltinAuthDest" class="text-gray-500 dark:text-gray-400 text-xs font-normal">(Using rclone default)</span>
				</label>
				<div class="relative">
					<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
						<i class="fas fa-key text-gray-400 dark:text-gray-500"></i>
					</div>
					<input type="password" id="dest_client_secret" name="dest_client_secret" x-model="destinationClientSecret"
						class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
						x-bind:disabled="useBuiltinAuthDest"
						placeholder="Google Photos OAuth Client Secret" />
				</div>
				<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
					Client Secret from Google Cloud Console
				</p>
			</div>
		</div>

		<div class="flex items-center mb-6">
			<label class="relative inline-flex items-center cursor-pointer">
				<input type="checkbox" id="dest_read_only" name="dest_read_only" x-model="destReadOnly" 
					class="sr-only peer" :value="destReadOnly ? 'true' : 'false'">
				<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
				<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Read-only mode</span>
			</label>
		</div>
		<p class="ms-14 text-sm text-gray-500 dark:text-gray-400">
			Only request read-only access to your photos
		</p>

		<div class="mb-6">
			<label for="dest_start_year" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Start Year (Optional)</label>
			<div class="relative">
				<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
					<i class="fas fa-calendar text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="number" id="dest_start_year" name="dest_start_year" x-model="destStartYear"
					class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
					placeholder="Only include photos after this year (default: 2000)" min="1900" max="2100" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
				Only include photos uploaded after this year
			</p>
		</div>

		<div class="flex items-center mb-6">
			<label class="relative inline-flex items-center cursor-pointer">
				<input type="checkbox" id="dest_include_archived" name="dest_include_archived" x-model="destIncludeArchived" 
					class="sr-only peer" :value="destIncludeArchived ? 'true' : 'false'">
				<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
				<span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Include archived media</span>
			</label>
		</div>
		<p class="ms-14 text-sm text-gray-500 dark:text-gray-400">
			Include archived photos and videos in media listings
		</p>

		<div class="mb-6">
			<label for="destination_path" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Album Path</label>
			<div class="relative">
				<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
					<i class="fas fa-images text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="text" id="destination_path" name="destination_path" x-model="destinationPath"
					class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
					placeholder="Album path (e.g., album/my-photos)" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
				Path within Google Photos to download files from
			</p>
		</div>

		<div class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300" role="alert">
			<div class="flex">
				<i class="fas fa-exclamation-triangle mr-2 flex-shrink-0"></i>
				<div>
					<h3 class="font-medium">Authentication Required</h3>
					<p class="mt-1">After saving this configuration, you'll need to authenticate with Google Photos:</p>
					<ol class="list-decimal list-inside mt-2 space-y-1">
						<li>Go to the configurations page</li>
						<li>Click the "Authenticate" button for this configuration</li>
						<li>You'll be redirected to Google to grant access permissions</li>
						<li>After granting permission, you'll be automatically redirected back to GoMFT</li>
					</ol>
				</div>
			</div>
		</div>

		<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-blue-900/30 dark:text-blue-300" role="alert">
			<div class="flex">
				<i class="fas fa-info-circle mr-2 flex-shrink-0"></i>
				<div>
					<h3 class="font-medium">Authentication Information</h3>
					<div class="mt-1">
						<template x-if="useBuiltinAuthDest">
							<div>
								<p>You're using rclone's built-in authentication, which simplifies the setup process:</p>
								<ul class="list-disc list-inside mt-1 space-y-1">
									<li>No need to create your own Google API credentials</li>
									<li>Authentication happens through Google's secure OAuth flow</li>
									<li>Automatic redirection back to GoMFT after authentication</li>
								</ul>
								<p class="mt-2 text-yellow-700 dark:text-yellow-300">
									<i class="fas fa-exclamation-triangle mr-1"></i> 
									Note: The built-in authentication uses shared credentials which have rate limits across all rclone users.
									If you plan to transfer large amounts of data or run many concurrent transfers, consider creating your own credentials.
								</p>
							</div>
						</template>
						<template x-if="!useBuiltinAuthDest">
							<div>
								<p>To use Google Photos with your own credentials:</p>
								<ol class="list-decimal list-inside mt-1 space-y-1">
									<li>Go to the <a href="https://console.cloud.google.com/" target="_blank" class="font-medium underline hover:text-blue-700 dark:hover:text-blue-300">Google Cloud Console</a></li>
									<li>Create a project and enable the Google Photos API</li>
									<li>Create OAuth 2.0 credentials (Client ID & Secret)</li>
									<li>Set authorized redirect URI to <code class="bg-blue-100 dark:bg-blue-800 px-1.5 py-0.5 rounded text-xs">http://localhost:53682/</code></li>
								</ol>
							</div>
						</template>
					</div>
				</div>
			</div>
		</div>

		<div class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300" role="alert">
			<div class="flex">
				<i class="fas fa-exclamation-circle mr-2 flex-shrink-0"></i>
				<div>
					<h3 class="font-medium">Important Note About Google Photos</h3>
					<p class="mt-1">When downloading from Google Photos, be aware that some original metadata may not be preserved. Google Photos processes and may compress some images upon upload.</p>
				</div>
			</div>
		</div>
	</div>
}