package source

templ GoogleDriveSourceForm() {
	<div class="space-y-6 mt-4">
		<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 Drive 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_source" name="use_builtin_auth_source" x-model="useBuiltinAuthSource" 
						class="sr-only peer" :value="useBuiltinAuthSource ? '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 built-in authentication</span>
				</label>
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
				Toggle to use your own Google API credentials instead of the built-in ones.
			</p>
		</div>

		<div x-show="!useBuiltinAuthSource">
			<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>
					<span>You'll need to create your own Google API project with Drive API enabled and create OAuth credentials. Learn how at <a href="https://developers.google.com/drive/api/quickstart/go" class="font-medium underline hover:text-yellow-700 dark:hover:text-yellow-200" target="_blank">Google API documentation</a>.</span>
				</div>
			</div>

			<div class="mb-6">
				<label for="source_client_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Client ID</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="source_client_id" name="source_client_id" x-model="sourceClientId"
						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="Your Google API Client ID" x-bind:required="!useBuiltinAuthSource" />
				</div>
				<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">OAuth 2.0 Client ID from Google Cloud Console</p>
			</div>

			<div class="mb-6">
				<label for="source_client_secret" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Client Secret</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="source_client_secret" name="source_client_secret" x-model="sourceClientSecret"
						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="Your Google API Client Secret" x-bind:required="!useBuiltinAuthSource" />
				</div>
				<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">OAuth 2.0 Client Secret from Google Cloud Console</p>
			</div>
		</div>

		<div>
			<label for="source_path" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Drive Path</label>
			<div class="relative">
				<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
					<i class="fab fa-google-drive text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="text" id="source_path" name="source_path" x-model="sourcePath"
					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="/path/in/drive" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
				Path to the directory in your Google Drive. Leave empty for the root of your Drive.
			</p>
		</div>

		<div>
			<label for="source_drive_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Drive ID (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-fingerprint text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="text" id="source_drive_id" name="source_drive_id" x-model="sourceDriveId"
					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="Specific Google Drive ID" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
				For accessing a shared drive. Leave empty to use your personal Google Drive.
			</p>
		</div>

		<div>
			<label for="source_team_drive" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Team Drive (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-users text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="text" id="source_team_drive" name="source_team_drive" x-model="sourceTeamDrive"
					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="Team Drive ID" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
				For accessing a shared team drive. Leave empty for personal drive.
			</p>
		</div>
	</div>
}