package destination

templ LocalDestinationForm() {
	<div class="space-y-4 mt-4">
		<div>
			<label for="destination_path" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Local 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="destination_path" name="destination_path" x-model="destinationPath" x-bind:required="requiresDestination"
					:class="{ 'border-red-500 dark:border-red-700': destPathValid === false, 'border-green-500 dark:border-green-700': destPathValid === true }"
					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/files" />
			</div>
			<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Full path to the local directory containing your files</p>
			<div x-show="destPathValid === false" class="mt-2 text-sm text-red-600 dark:text-red-400">
				<div class="flex items-center">
					<i class="fas fa-exclamation-circle mr-2"></i>
					<span x-text="destPathError"></span>
				</div>
			</div>
			<div x-show="destPathValid === true" class="mt-2 text-sm text-green-600 dark:text-green-400">
				<div class="flex items-center">
					<i class="fas fa-check-circle mr-2"></i>
					<span x-text="destPathError || 'Path is valid'"></span>
				</div>
			</div>
		</div>
	</div>
}