package source

templ SFTPSourceForm() {
	<div class="space-y-6 mt-4">
		<div>
			<label for="source_host" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">SFTP Host</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-server text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="text" id="source_host" name="source_host" x-model="sourceHost" required
					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="sftp.example.com" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Hostname or IP address of the SFTP server</p>
		</div>

		<div>
			<label for="source_port" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Port</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-network-wired text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="number" id="source_port" name="source_port" x-model="sourcePort"
					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="22" min="1" max="65535" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">SFTP port number (default: 22)</p>
		</div>

		<div>
			<label for="source_user" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Username</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-user text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="text" id="source_user" name="source_user" x-model="sourceUser" required
					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="username" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">SFTP username for authentication</p>
		</div>

		<div>
			<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Authentication Method</label>
			<div class="flex items-center mb-4">
				<input id="source_auth_password" type="radio" value="password" name="source_auth_type" x-model="sourceAuthType"
					class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
				<label for="source_auth_password" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
			</div>
			<div class="flex items-center">
				<input id="source_auth_key" type="radio" value="key" name="source_auth_type" x-model="sourceAuthType"
					class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
				<label for="source_auth_key" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">SSH Key</label>
			</div>
		</div>

		<div x-show="sourceAuthType === 'password'">
			<label for="source_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</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-lock text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="password" id="source_password" name="source_password" x-model="sourcePassword"
					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="Enter password" x-bind:required="sourceAuthType === 'password'" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">SFTP password for authentication</p>
		</div>

		<div x-show="sourceAuthType === 'key'">
			<label for="source_key_file" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">SSH Key File</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="text" id="source_key_file" name="source_key_file" x-model="sourceKeyFile"
					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/to/id_rsa" x-bind:required="sourceAuthType === 'key'" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Path to the SSH private key file</p>
		</div>

		<div>
			<label for="source_path" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Remote 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-folder-open text-gray-400 dark:text-gray-500"></i>
				</div>
				<input type="text" id="source_path" name="source_path" x-model="sourcePath" required
					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="/remote/path/to/files" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Full path to the directory on the SFTP server</p>
		</div>
	</div>
}