package source

templ FTPSourceForm() {
	<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">FTP 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="ftp.example.com" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Hostname or IP address of the FTP 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="21" min="1" max="65535" value="21"/>
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">FTP port number (default: 21)</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">FTP username for authentication</p>
		</div>

		<div>
			<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" 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="Enter password" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">FTP password for authentication</p>
		</div>

		<div class="flex items-center mb-6">
			<label class="relative inline-flex items-center cursor-pointer">
				<input type="checkbox" id="source_passive_mode" name="source_passive_mode" x-model="sourcePassiveMode" 
					class="sr-only peer" :value="sourcePassiveMode ? '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 Passive Mode</span>
			</label>
		</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 FTP server</p>
		</div>
	</div>
}