package  destination

templ LocalDestinationForm() {
	<div class="sm:col-span-6 space-y-6">
		<div class="sm:col-span-4">
			<label for="destination_path" class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">Local Path</label>
			<div class="relative">
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fas fa-folder-open text-secondary-400 dark:text-secondary-600"></i>
				</div>
				<input
					type="text"
					name="destination_path"
					id="destination_path"
					x-model="destinationPath"
					required
					:class="{ 'border-red-300 dark:border-red-700': destPathValid === false, 'border-green-300 dark:border-green-700': destPathValid === true }"
					class="form-input pl-10 w-full rounded-lg border-secondary-300 dark:border-secondary-700 dark:bg-secondary-800 dark:text-secondary-100 focus:ring-primary-500 focus:border-primary-500"
					placeholder="Local directory path (e.g., /path/to/destination)"
				/>
			</div>
			<p class="mt-1 text-xs text-secondary-500 dark:text-secondary-400">
				Full path to the local directory where files will be saved
			</p>
			<!-- Path validation message -->
			<template x-if="destPathValid !== null">
				<p x-show="destPathError" class="mt-1 text-sm" :class="destPathValid ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" x-text="destPathError"></p>
			</template>
		</div>
		<button
			type="button"
			class="btn-secondary h-10 whitespace-nowrap"
			@click="checkPath(destinationPath, 'dest')"
		>
			<i class="fas fa-check-circle mr-2"></i>
			Check Location
		</button>
	</div>
}