GoMFT/components/job_form.templ

package components

import (
	"fmt"
	"github.com/starfleetcptn/gomft/internal/db"
	"context"
)

type JobFormData struct {
	Job     *db.Job
	Configs []db.TransferConfig
	IsNew   bool
}

func getJobFormTitle(isNew bool) string {
	if isNew {
		return "New Job"
	}
	return "Edit Job"
}

func getJobTitle(isNew bool) string {
	if isNew {
		return "Create New Job"
	}
	return "Edit Job"
}

// configSelected checks if a config ID is selected for a job
func configSelected(job *db.Job, configID uint) bool {
	if job.ConfigIDs != "" {
		// If ConfigIDs is populated, only check against those IDs
		for _, id := range job.GetConfigIDsList() {
			if id == configID {
				return true
			}
		}
		return false
	} else {
		// If ConfigIDs is empty, fall back to checking the primary ConfigID
		return job.ConfigID == configID
	}
}

templ configSearchScript() {
	<script>
		document.addEventListener('DOMContentLoaded', () => {
			// Handle search for new job form
			const configSearch = document.getElementById('config-search');
			if (configSearch) {
				configSearch.addEventListener('input', (e) => {
					const searchTerm = e.target.value.toLowerCase();
					const configItems = document.querySelectorAll('#config-list .config-item');
					
					configItems.forEach(item => {
						const name = item.getAttribute('data-name').toLowerCase();
						item.style.display = name.includes(searchTerm) ? 'flex' : 'none';
					});
				});
			}
			
			// Handle search for edit job form
			const configSearchEdit = document.getElementById('config-search-edit');
			if (configSearchEdit) {
				configSearchEdit.addEventListener('input', (e) => {
					const searchTerm = e.target.value.toLowerCase();
					const configItems = document.querySelectorAll('#config-list-edit .config-item');
					
					configItems.forEach(item => {
						const name = item.getAttribute('data-name').toLowerCase();
						item.style.display = name.includes(searchTerm) ? 'flex' : 'none';
					});
				});
			}

			// Handle job ordering
			const setupJobOrdering = (configListId, selectedListId, formId, savedOrder) => {
				const configList = document.getElementById(configListId);
				const selectedList = document.getElementById(selectedListId);
				const form = document.getElementById(formId);
				
				if (!configList || !selectedList || !form) return;

				// Get saved order if available
				const orderedIds = savedOrder ? savedOrder.split(',').map(id => id.trim()) : [];
				console.log('Initial saved order:', orderedIds);

				// Initialize selected items from checked checkboxes
				const updateSelectedItems = (initialLoad = false) => {
					// Clear current list
					selectedList.innerHTML = '';
					
					// Get all checked checkboxes
					const checkedItems = configList.querySelectorAll('input[type="checkbox"]:checked');
					
					if (checkedItems.length === 0) {
						selectedList.innerHTML = '<div class="text-center py-4 text-secondary-500 dark:text-secondary-400">No configurations selected</div>';
						return;
					}
					
					// Create a map of config items for easy access
					const configItems = {};
					checkedItems.forEach(checkbox => {
						configItems[checkbox.value] = {
							checkbox: checkbox,
							configId: checkbox.value,
							configName: checkbox.nextElementSibling.textContent.trim()
						};
					});
					
					// If we have a saved order and this is the initial load, use that order
					let itemsToShow = [];
					if (initialLoad && orderedIds.length > 0) {
						// First add items in the saved order
						orderedIds.forEach(id => {
							if (configItems[id]) {
								itemsToShow.push(configItems[id]);
								delete configItems[id]; // Remove from map to avoid duplicates
							}
						});
						
						// Then add any remaining checked items not in the saved order
						Object.values(configItems).forEach(item => {
							itemsToShow.push(item);
						});
					} else {
						// Just add all checked items in their current order
						itemsToShow = Object.values(configItems);
					}
					
					// Add each item to the selected list
					itemsToShow.forEach((item, index) => {
						const configId = item.configId;
						const configName = item.configName;
						
						const listItem = document.createElement('div');
						listItem.className = 'flex items-center justify-between p-2 mb-2 bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-700 rounded-lg';
						listItem.setAttribute('data-id', configId);
						
						listItem.innerHTML = `
							<div class="flex items-center">
								<span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary-100 dark:bg-primary-900 mr-2 text-primary-700 dark:text-primary-300 text-sm">${index + 1}</span>
								<span class="font-medium text-secondary-700 dark:text-secondary-300">${configName}</span>
							</div>
							<div class="flex space-x-1">
								<button type="button" class="move-up p-1 rounded hover:bg-secondary-100 dark:hover:bg-secondary-700" title="Move up">
									<i class="fas fa-arrow-up text-secondary-500"></i>
								</button>
								<button type="button" class="move-down p-1 rounded hover:bg-secondary-100 dark:hover:bg-secondary-700" title="Move down">
									<i class="fas fa-arrow-down text-secondary-500"></i>
								</button>
							</div>
						`;
						
						selectedList.appendChild(listItem);
					});
					
					// Update hidden order inputs
					updateOrderInputs();
				};
				
				// Update hidden inputs with the current order
				const updateOrderInputs = () => {
					const items = selectedList.querySelectorAll('.flex.items-center.justify-between');
					if (items.length === 0) return;
					
					// Remove any existing order input to avoid duplicates
					const existingOrderInput = form.querySelector('input[name="config_order"]');
					if (existingOrderInput) {
						existingOrderInput.remove();
					}
					
					// Create a new input with the current order
					const orderedIds = Array.from(items).map(item => item.getAttribute('data-id'));
					
					// Create a hidden input to store the order
					const configOrderInput = document.createElement('input');
					configOrderInput.type = 'hidden';
					configOrderInput.name = 'config_order';
					configOrderInput.value = orderedIds.join(',');
					
					// Add the input to the form
					form.appendChild(configOrderInput);
					
					// Update the visible order numbers
					items.forEach((item, index) => {
						const orderNum = index + 1;
						const orderSpan = item.querySelector('span.rounded-full');
						if (orderSpan) {
							orderSpan.textContent = orderNum;
						}
					});
					
					console.log('Updated order input:', configOrderInput.value);
				};
				
				// Initialize the selected list with saved order if available
				updateSelectedItems(true);
				
				// Handle checkbox changes
				configList.addEventListener('change', (e) => {
					if (e.target.matches('input[type="checkbox"]')) {
						updateSelectedItems(false);
					}
				});
				
				// Handle reordering
				selectedList.addEventListener('click', (e) => {
					const listItem = e.target.closest('.flex.items-center.justify-between');
					if (!listItem) return;
					
					if (e.target.closest('.move-up')) {
						const prev = listItem.previousElementSibling;
						if (prev) {
							selectedList.insertBefore(listItem, prev);
							updateOrderInputs();
						}
					} else if (e.target.closest('.move-down')) {
						const next = listItem.nextElementSibling;
						if (next) {
							selectedList.insertBefore(next, listItem);
							updateOrderInputs();
						}
					}
				});
				
				// Ensure the order input is updated before submission
				form.addEventListener('submit', function(e) {
					updateOrderInputs();
					console.log('Form submitted with order:', form.querySelector('input[name="config_order"]')?.value);
				});
			};
			
			// Setup ordering for new job form
			setupJobOrdering('config-list', 'selected-configs', 'new-job-form', null);
			
			// Setup ordering for edit job form
			const editJobForm = document.getElementById('edit-job-form');
			const savedOrderEdit = editJobForm ? editJobForm.getAttribute('data-config-order') : null;
			setupJobOrdering('config-list-edit', 'selected-configs-edit', 'edit-job-form', savedOrderEdit);
		});
	</script>
}

templ scheduleBuilderScript() {
	<script>
		document.addEventListener('DOMContentLoaded', () => {
			// Initialize schedule builder functionality
			const initScheduleBuilder = (formPrefix = '') => {
				const prefixId = formPrefix ? `${formPrefix}-` : '';
				const scheduleTypeSelect = document.getElementById(`${prefixId}schedule-type`);
				const cronInputField = document.getElementById(`${prefixId}schedule`);
				const scheduleBuilderDiv = document.getElementById(`${prefixId}schedule-builder`);
				
				// All schedule sections
				const intervalSection = document.getElementById(`${prefixId}interval-section`);
				const dailySection = document.getElementById(`${prefixId}daily-section`);
				const weeklySection = document.getElementById(`${prefixId}weekly-section`);
				const monthlySection = document.getElementById(`${prefixId}monthly-section`);
				
				if (!scheduleTypeSelect || !cronInputField || !scheduleBuilderDiv) return;
				
				// Hide all sections initially except the selected one
				const hideAllSections = () => {
					if (intervalSection) intervalSection.classList.add('hidden');
					if (dailySection) dailySection.classList.add('hidden');
					if (weeklySection) weeklySection.classList.add('hidden');
					if (monthlySection) monthlySection.classList.add('hidden');
				};
				
				// Show the selected section
				const showSection = (sectionType) => {
					hideAllSections();
					
					switch (sectionType) {
						case 'interval':
							if (intervalSection) intervalSection.classList.remove('hidden');
							break;
						case 'daily':
							if (dailySection) dailySection.classList.remove('hidden');
							break;
						case 'weekly':
							if (weeklySection) weeklySection.classList.remove('hidden');
							break;
						case 'monthly':
							if (monthlySection) monthlySection.classList.remove('hidden');
							break;
						case 'custom':
							// Just leave all sections hidden for custom
							break;
					}
				};
				
				// Convert UI inputs to cron expression
				const updateCronExpression = () => {
					const scheduleType = scheduleTypeSelect.value;
					let cronExpression = '';
					
					switch (scheduleType) {
						case 'interval':
							const intervalValue = document.getElementById(`${prefixId}interval-value`).value || '15';
							const intervalUnit = document.getElementById(`${prefixId}interval-unit`).value || 'minutes';
							
							// Convert interval to cron
							switch (intervalUnit) {
								case 'minutes':
									// Every X minutes
									cronExpression = `*/${intervalValue} * * * *`;
									break;
								case 'hours':
									// Every X hours
									cronExpression = `0 */${intervalValue} * * *`;
									break;
								case 'days':
									// Every X days at midnight
									cronExpression = `0 0 */${intervalValue} * *`;
									break;
							}
							break;
							
						case 'daily':
							const dailyHour = document.getElementById(`${prefixId}daily-hour`).value || '0';
							const dailyMinute = document.getElementById(`${prefixId}daily-minute`).value || '0';
							// At HH:MM every day
							cronExpression = `${dailyMinute} ${dailyHour} * * *`;
							break;
							
						case 'weekly':
							const weeklyHour = document.getElementById(`${prefixId}weekly-hour`).value || '0';
							const weeklyMinute = document.getElementById(`${prefixId}weekly-minute`).value || '0';
							const weekDays = [];
							
							// Check which days are selected
							for (let i = 0; i < 7; i++) {
								const dayCheckbox = document.getElementById(`${prefixId}day-${i}`);
								if (dayCheckbox && dayCheckbox.checked) {
									weekDays.push(i);
								}
							}
							
							// Default to Sunday if no days selected
							if (weekDays.length === 0) weekDays.push(0);
							
							// At HH:MM on specified days of week (0 = Sunday, 6 = Saturday)
							cronExpression = `${weeklyMinute} ${weeklyHour} * * ${weekDays.join(',')}`;
							break;
							
						case 'monthly':
							const monthlyHour = document.getElementById(`${prefixId}monthly-hour`).value || '0';
							const monthlyMinute = document.getElementById(`${prefixId}monthly-minute`).value || '0';
							const monthlyDay = document.getElementById(`${prefixId}monthly-day`).value || '1';
							
							// At HH:MM on day-of-month
							cronExpression = `${monthlyMinute} ${monthlyHour} ${monthlyDay} * *`;
							break;
							
						case 'custom':
							// For custom, we don't modify the existing cron expression
							cronExpression = cronInputField.value;
							break;
					}
					
					// Only update if we calculated a new value
					if (cronExpression && scheduleType !== 'custom') {
						cronInputField.value = cronExpression;
					}
				};
				
				// Try to parse existing cron expression and set UI accordingly
				const parseCronExpression = (cronExp) => {
					if (!cronExp) return;
					
					// Parse the cron expression
					const parts = cronExp.trim().split(/\s+/);
					if (parts.length !== 5) return; // Invalid cron
					
					const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
					
					// Check for interval patterns
					if (minute.startsWith('*/') && hour === '*' && dayOfMonth === '*') {
						// Every X minutes
						const intervalValue = minute.replace('*/', '');
						scheduleTypeSelect.value = 'interval';
						document.getElementById(`${prefixId}interval-value`).value = intervalValue;
						document.getElementById(`${prefixId}interval-unit`).value = 'minutes';
					} 
					else if (minute === '0' && hour.startsWith('*/') && dayOfMonth === '*') {
						// Every X hours
						const intervalValue = hour.replace('*/', '');
						scheduleTypeSelect.value = 'interval';
						document.getElementById(`${prefixId}interval-value`).value = intervalValue;
						document.getElementById(`${prefixId}interval-unit`).value = 'hours';
					}
					else if (minute === '0' && hour === '0' && dayOfMonth.startsWith('*/')) {
						// Every X days
						const intervalValue = dayOfMonth.replace('*/', '');
						scheduleTypeSelect.value = 'interval';
						document.getElementById(`${prefixId}interval-value`).value = intervalValue;
						document.getElementById(`${prefixId}interval-unit`).value = 'days';
					}
					// Check for daily pattern
					else if (dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
						// Daily at specific time
						scheduleTypeSelect.value = 'daily';
						document.getElementById(`${prefixId}daily-hour`).value = hour;
						document.getElementById(`${prefixId}daily-minute`).value = minute;
					}
					// Check for weekly pattern
					else if (dayOfMonth === '*' && month === '*' && dayOfWeek !== '*') {
						// Weekly on specific days
						scheduleTypeSelect.value = 'weekly';
						document.getElementById(`${prefixId}weekly-hour`).value = hour;
						document.getElementById(`${prefixId}weekly-minute`).value = minute;
						
						// Set selected days
						const days = dayOfWeek.split(',');
						days.forEach(day => {
							const dayNum = parseInt(day.trim());
							if (!isNaN(dayNum) && dayNum >= 0 && dayNum <= 6) {
								const checkbox = document.getElementById(`${prefixId}day-${dayNum}`);
								if (checkbox) checkbox.checked = true;
							}
						});
					}
					// Check for monthly pattern
					else if (dayOfMonth !== '*' && !dayOfMonth.includes('/') && month === '*' && dayOfWeek === '*') {
						// Monthly on specific day
						scheduleTypeSelect.value = 'monthly';
						document.getElementById(`${prefixId}monthly-hour`).value = hour;
						document.getElementById(`${prefixId}monthly-minute`).value = minute;
						document.getElementById(`${prefixId}monthly-day`).value = dayOfMonth;
					}
					// Default to custom for anything else
					else {
						scheduleTypeSelect.value = 'custom';
					}
					
					// Show the appropriate section
					showSection(scheduleTypeSelect.value);
				};
				
				// Initial setup
				if (cronInputField.value) {
					parseCronExpression(cronInputField.value);
				} else {
					// Default to 'interval' if no value
					scheduleTypeSelect.value = 'interval';
					showSection('interval');
					updateCronExpression(); // Set initial cron value
				}
				
				// Event listeners
				scheduleTypeSelect.addEventListener('change', () => {
					showSection(scheduleTypeSelect.value);
					
					// If switching to custom, don't modify the existing expression
					if (scheduleTypeSelect.value !== 'custom') {
						updateCronExpression();
					}
				});
				
				// Add listeners to all schedule builder inputs
				const attachListeners = (selector) => {
					const elements = document.querySelectorAll(selector);
					elements.forEach(el => {
						el.addEventListener('change', updateCronExpression);
						el.addEventListener('input', updateCronExpression);
					});
				};
				
				// Attach change listeners to all input fields
				attachListeners(`#${prefixId}interval-section input, #${prefixId}interval-section select`);
				attachListeners(`#${prefixId}daily-section input`);
				attachListeners(`#${prefixId}weekly-section input`);
				attachListeners(`#${prefixId}monthly-section input`);
			};
			
			// Initialize schedule builders
			initScheduleBuilder(); // For new job form
			initScheduleBuilder('edit'); // For edit job form
		});
	</script>
}

templ JobForm(ctx context.Context, data JobFormData) {
	@LayoutWithContext(getJobFormTitle(data.IsNew), ctx) {
		@configSearchScript()
		@scheduleBuilderScript()
		
		<!-- Main Content -->
		<section class="py-8 px-4">
			<div class="mx-auto max-w-3xl">
				<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6 md:p-8">
					<!-- Form Header -->
					<div class="mb-8 text-center">
						<div class="flex justify-center mb-4">
							<span class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-50 dark:bg-blue-900">
								<i class="fas fa-calendar-alt text-blue-600 dark:text-blue-300 text-2xl"></i>
							</span>
						</div>
						<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
							{ getJobTitle(data.IsNew) }
						</h1>
						<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
							Configure your scheduled file transfer job using the form below
						</p>
					</div>

					<!-- Job Form Information -->
					<div class="p-4 mb-6 bg-blue-50 border border-blue-100 rounded-lg dark:bg-blue-900/20 dark:border-blue-900">
						<div class="flex items-center mb-2">
							<i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mr-2"></i>
							<h3 class="text-lg font-medium text-blue-600 dark:text-blue-400">Job Information</h3>
						</div>
						<p class="text-sm text-blue-700 dark:text-blue-300">
							Jobs run on a schedule and can include one or more transfer configurations. Select which configurations to run and in what order.
						</p>
					</div>
					
					<!-- Main Form -->
					if data.IsNew {
						<form id="new-job-form" hx-post="/jobs" hx-target="body" hx-boost="true" class="space-y-6">
							<!-- Job Details Section -->
							<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
								<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
									<i class="fas fa-tag mr-2 text-blue-500 dark:text-blue-400"></i>Job Details
								</h3>
							
								<!-- Job name field -->
								<div class="mb-6">
									<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Job Name
									</label>
									<div class="relative">
										<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
											<i class="fas fa-tag text-gray-500 dark:text-gray-400"></i>
										</div>
										<input 
											type="text" 
											name="name" 
											id="name" 
											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="Daily Production Backup"
										/>
									</div>
									<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										Descriptive name for this job (optional). If not provided, the config name will be used.
									</p>
								</div>
								
								<!-- Schedule field -->
								<div class="mb-6">
									<label for="schedule-type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Schedule Type
									</label>
									<select 
										id="schedule-type" 
										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 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"
									>
										<option value="interval">Run at intervals</option>
										<option value="daily">Run daily</option>
										<option value="weekly">Run weekly</option>
										<option value="monthly">Run monthly</option>
										<option value="custom">Custom (Cron expression)</option>
									</select>
									
									<div id="schedule-builder" class="mt-4">
										<!-- Interval-based scheduling -->
										<div id="interval-section" class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="flex items-center gap-4">
												<div class="w-1/3">
													<label for="interval-value" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Run every</label>
													<input 
														type="number" 
														id="interval-value" 
														class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
														min="1"
														value="15"
													/>
												</div>
												<div class="w-2/3">
													<label for="interval-unit" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Unit</label>
													<select 
														id="interval-unit" 
														class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
													>
														<option value="minutes">Minutes</option>
														<option value="hours">Hours</option>
														<option value="days">Days</option>
													</select>
												</div>
											</div>
										</div>
										
										<!-- Daily scheduling -->
										<div id="daily-section" class="hidden bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="flex items-end gap-4">
												<div class="w-1/2">
													<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Run daily at</label>
													<div class="flex gap-2">
														<div class="w-1/2">
															<input 
																type="number" 
																id="daily-hour" 
																class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																min="0"
																max="23"
																placeholder="HH"
																value="0"
															/>
														</div>
														<div class="flex items-center">:</div>
														<div class="w-1/2">
															<input 
																type="number" 
																id="daily-minute" 
																class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																min="0"
																max="59"
																placeholder="MM"
																value="0"
															/>
														</div>
													</div>
												</div>
												<div class="text-sm text-gray-500 dark:text-gray-400 pb-2.5">
													24-hour format (00:00 - 23:59)
												</div>
											</div>
										</div>
										
										<!-- Weekly scheduling -->
										<div id="weekly-section" class="hidden bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="mb-4">
												<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Run on these days</label>
												<div class="flex flex-wrap gap-2">
													<div class="flex items-center">
														<input type="checkbox" id="day-0" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="day-0" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Sun</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="day-1" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="day-1" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Mon</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="day-2" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="day-2" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Tue</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="day-3" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="day-3" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Wed</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="day-4" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="day-4" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Thu</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="day-5" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="day-5" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Fri</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="day-6" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="day-6" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Sat</label>
													</div>
												</div>
											</div>
											<div>
												<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">At this time</label>
												<div class="flex items-end gap-4">
													<div class="w-1/2">
														<div class="flex gap-2">
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="weekly-hour" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="23"
																	placeholder="HH"
																	value="0"
																/>
															</div>
															<div class="flex items-center">:</div>
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="weekly-minute" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="59"
																	placeholder="MM"
																	value="0"
																/>
															</div>
														</div>
													</div>
													<div class="text-sm text-gray-500 dark:text-gray-400 pb-2.5">
														24-hour format (00:00 - 23:59)
													</div>
												</div>
											</div>
										</div>
										
										<!-- Monthly scheduling -->
										<div id="monthly-section" class="hidden bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="mb-4">
												<label for="monthly-day" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Day of month</label>
												<input 
													type="number" 
													id="monthly-day" 
													class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
													min="1"
													max="31"
													value="1"
												/>
											</div>
											<div>
												<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">At this time</label>
												<div class="flex items-end gap-4">
													<div class="w-1/2">
														<div class="flex gap-2">
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="monthly-hour" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="23"
																	placeholder="HH"
																	value="0"
																/>
															</div>
															<div class="flex items-center">:</div>
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="monthly-minute" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="59"
																	placeholder="MM"
																	value="0"
																/>
															</div>
														</div>
													</div>
													<div class="text-sm text-gray-500 dark:text-gray-400 pb-2.5">
														24-hour format (00:00 - 23:59)
													</div>
												</div>
											</div>
										</div>
									</div>
									
									<!-- Hidden cron input field that will be submitted -->
									<div class="relative mt-4">
										<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
											<i class="fas fa-clock text-gray-500 dark:text-gray-400"></i>
										</div>
										<input 
											type="text" 
											name="schedule" 
											id="schedule" 
											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="*/15 * * * *"
											value="*/15 * * * *"
										/>
									</div>
									<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										The schedule will be converted to a cron expression. <a href="https://crontab.guru/" target="_blank" class="font-medium underline hover:no-underline">Learn more</a>
									</p>
								</div>
								
								<!-- Enabled toggle -->
								<div class="p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
									<div class="flex items-center">
										<label class="relative inline-flex items-center cursor-pointer">
											<input 
												type="checkbox"
												name="enabled"
												value="true"
												id="enabled"
												if data.Job.GetEnabled() {
													checked
												}
												class="sr-only peer"
											/>
											<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-gray-300">Enable this job</span>
										</label>
									</div>
									<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										Disabled jobs won't run automatically but can still be triggered manually.
									</p>
								</div>
							</div>
							
							<!-- Configuration Selection Section -->
							<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
								<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
									<i class="fas fa-cog mr-2 text-blue-500 dark:text-blue-400"></i>Transfer Configurations
								</h3>
								
								<!-- Search field -->
								<div class="mb-4">
									<label for="config-search" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Search Configurations
									</label>
									<div class="relative">
										<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
											<i class="fas fa-search text-gray-500 dark:text-gray-400"></i>
										</div>
										<input 
											type="text" 
											id="config-search"
											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="Search configurations..." 
										/>
									</div>
								</div>
								
								<!-- Configuration list -->
								<div class="mb-4">
									<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Available Configurations
									</label>
									<div class="border border-gray-200 rounded-lg dark:border-gray-700 overflow-hidden">
										<div class="max-h-56 overflow-y-auto" id="config-list">
											if len(data.Configs) > 0 {
												for _, config := range data.Configs {
													<div class="config-item px-4 py-3 border-b last:border-b-0 border-gray-200 dark:border-gray-700 flex items-center" data-name={ config.Name }>
														<input 
															type="checkbox" 
															name="config_ids[]" 
															id={ fmt.Sprintf("config_%d", config.ID) }
															value={ fmt.Sprint(config.ID) }
															class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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={ fmt.Sprintf("config_%d", config.ID) } class="ms-2 text-sm font-medium text-gray-900 dark:text-white cursor-pointer w-full">
															{ config.Name }
														</label>
													</div>
												}
											} else {
												<div class="text-center py-4 text-gray-500 dark:text-gray-400">
													No configurations available. <a href="/configs/new" class="text-blue-600 dark:text-blue-500 hover:underline">Create one</a>
												</div>
											}
										</div>
									</div>
								</div>
								
								<!-- Selected configurations order list -->
								<div>
									<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										<i class="fas fa-sort-amount-down mr-1"></i> Execution Order
									</label>
									<div id="selected-configs" class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 min-h-16 bg-gray-50 dark:bg-gray-800">
										<!-- Items will be populated by JavaScript -->
									</div>
									<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										Use the arrows to change the order in which configurations will execute.
									</p>
								</div>
							</div>
							
							<!-- Form actions -->
							<div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
								<a href="/jobs" class="text-white bg-gray-500 hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
									<i class="fas fa-arrow-left mr-2"></i>Cancel
								</a>
								<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
									<i class="fas fa-plus mr-2"></i>Create Job
								</button>
							</div>
						</form>
					} else {
						<form id="edit-job-form" hx-post={ fmt.Sprintf("/jobs/%d", data.Job.ID) } hx-target="body" hx-boost="true" data-config-order={ data.Job.ConfigIDs } class="space-y-6">
							<!-- Job Details Section -->
							<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
								<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
									<i class="fas fa-tag mr-2 text-blue-500 dark:text-blue-400"></i>Job Details
								</h3>
							
								<!-- Job name field -->
								<div class="mb-6">
									<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Job Name
									</label>
									<div class="relative">
										<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
											<i class="fas fa-tag text-gray-500 dark:text-gray-400"></i>
										</div>
										<input 
											type="text" 
											name="name" 
											id="name" 
											value={ data.Job.Name }
											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="Daily Production Backup"
										/>
									</div>
									<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										Descriptive name for this job (optional). If not provided, the config name will be used.
									</p>
								</div>
								
								<!-- Schedule field -->
								<div class="mb-6">
									<label for="edit-schedule-type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Schedule Type
									</label>
									<select 
										id="edit-schedule-type" 
										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 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"
									>
										<option value="interval">Run at intervals</option>
										<option value="daily">Run daily</option>
										<option value="weekly">Run weekly</option>
										<option value="monthly">Run monthly</option>
										<option value="custom">Custom (Cron expression)</option>
									</select>
									
									<div id="edit-schedule-builder" class="mt-4">
										<!-- Interval-based scheduling -->
										<div id="edit-interval-section" class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="flex items-center gap-4">
												<div class="w-1/3">
													<label for="edit-interval-value" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Run every</label>
													<input 
														type="number" 
														id="edit-interval-value" 
														class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
														min="1"
														value="15"
													/>
												</div>
												<div class="w-2/3">
													<label for="edit-interval-unit" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Unit</label>
													<select 
														id="edit-interval-unit" 
														class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
													>
														<option value="minutes">Minutes</option>
														<option value="hours">Hours</option>
														<option value="days">Days</option>
													</select>
												</div>
											</div>
										</div>
										
										<!-- Daily scheduling -->
										<div id="edit-daily-section" class="hidden bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="flex items-end gap-4">
												<div class="w-1/2">
													<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Run daily at</label>
													<div class="flex gap-2">
														<div class="w-1/2">
															<input 
																type="number" 
																id="edit-daily-hour" 
																class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																min="0"
																max="23"
																placeholder="HH"
																value="0"
															/>
														</div>
														<div class="flex items-center">:</div>
														<div class="w-1/2">
															<input 
																type="number" 
																id="edit-daily-minute" 
																class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																min="0"
																max="59"
																placeholder="MM"
																value="0"
															/>
														</div>
													</div>
												</div>
												<div class="text-sm text-gray-500 dark:text-gray-400 pb-2.5">
													24-hour format (00:00 - 23:59)
												</div>
											</div>
										</div>
										
										<!-- Weekly scheduling -->
										<div id="edit-weekly-section" class="hidden bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="mb-4">
												<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Run on these days</label>
												<div class="flex flex-wrap gap-2">
													<div class="flex items-center">
														<input type="checkbox" id="edit-day-0" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="edit-day-0" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Sun</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="edit-day-1" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="edit-day-1" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Mon</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="edit-day-2" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="edit-day-2" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Tue</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="edit-day-3" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="edit-day-3" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Wed</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="edit-day-4" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="edit-day-4" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Thu</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="edit-day-5" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="edit-day-5" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Fri</label>
													</div>
													<div class="flex items-center">
														<input type="checkbox" id="edit-day-6" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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="edit-day-6" class="ms-2 text-sm font-medium text-gray-900 dark:text-white">Sat</label>
													</div>
												</div>
											</div>
											<div>
												<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">At this time</label>
												<div class="flex items-end gap-4">
													<div class="w-1/2">
														<div class="flex gap-2">
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="edit-weekly-hour" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="23"
																	placeholder="HH"
																	value="0"
																/>
															</div>
															<div class="flex items-center">:</div>
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="edit-weekly-minute" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="59"
																	placeholder="MM"
																	value="0"
																/>
															</div>
														</div>
													</div>
													<div class="text-sm text-gray-500 dark:text-gray-400 pb-2.5">
														24-hour format (00:00 - 23:59)
													</div>
												</div>
											</div>
										</div>
										
										<!-- Monthly scheduling -->
										<div id="edit-monthly-section" class="hidden bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
											<div class="mb-4">
												<label for="edit-monthly-day" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Day of month</label>
												<input 
													type="number" 
													id="edit-monthly-day" 
													class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
													min="1"
													max="31"
													value="1"
												/>
											</div>
											<div>
												<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">At this time</label>
												<div class="flex items-end gap-4">
													<div class="w-1/2">
														<div class="flex gap-2">
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="edit-monthly-hour" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="23"
																	placeholder="HH"
																	value="0"
																/>
															</div>
															<div class="flex items-center">:</div>
															<div class="w-1/2">
																<input 
																	type="number" 
																	id="edit-monthly-minute" 
																	class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
																	min="0"
																	max="59"
																	placeholder="MM"
																	value="0"
																/>
															</div>
														</div>
													</div>
													<div class="text-sm text-gray-500 dark:text-gray-400 pb-2.5">
														24-hour format (00:00 - 23:59)
													</div>
												</div>
											</div>
										</div>
									</div>
									
									<!-- Hidden cron input field that will be submitted -->
									<div class="relative mt-4">
										<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
											<i class="fas fa-clock text-gray-500 dark:text-gray-400"></i>
										</div>
										<input 
											type="text" 
											name="schedule" 
											id="edit-schedule" 
											value={ data.Job.Schedule }
											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="*/15 * * * *"
										/>
									</div>
									<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										The schedule will be converted to a cron expression. <a href="https://crontab.guru/" target="_blank" class="font-medium underline hover:no-underline">Learn more</a>
									</p>
								</div>
								
								<!-- Enabled toggle -->
								<div class="p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
									<div class="flex items-center">
										<label class="relative inline-flex items-center cursor-pointer">
											<input 
												type="checkbox"
												name="enabled"
												value="true"
												id="enabled"
												if data.Job.GetEnabled() {
													checked
												}
												class="sr-only peer"
											/>
											<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-gray-300">Enable this job</span>
										</label>
									</div>
									<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										Disabled jobs won't run automatically but can still be triggered manually.
									</p>
								</div>
							</div>
							
							<!-- Configuration Selection Section -->
							<div class="p-5 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
								<h3 class="mb-4 text-xl font-bold text-gray-900 dark:text-white flex items-center">
									<i class="fas fa-cog mr-2 text-blue-500 dark:text-blue-400"></i>Transfer Configurations
								</h3>
								
								<!-- Search field -->
								<div class="mb-4">
									<label for="config-search-edit" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Search Configurations
									</label>
									<div class="relative">
										<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
											<i class="fas fa-search text-gray-500 dark:text-gray-400"></i>
										</div>
										<input 
											type="text" 
											id="config-search-edit"
											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="Search configurations..." 
										/>
									</div>
								</div>
								
								<!-- Configuration list -->
								<div class="mb-4">
									<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Available Configurations
									</label>
									<div class="border border-gray-200 rounded-lg dark:border-gray-700 overflow-hidden">
										<div class="max-h-56 overflow-y-auto" id="config-list-edit">
											if len(data.Configs) > 0 {
												for _, config := range data.Configs {
													<div class="config-item px-4 py-3 border-b last:border-b-0 border-gray-200 dark:border-gray-700 flex items-center" data-name={ config.Name }>
														<input 
															type="checkbox" 
															name="config_ids[]" 
															id={ fmt.Sprintf("config_edit_%d", config.ID) }
															value={ fmt.Sprint(config.ID) }
															if configSelected(data.Job, config.ID) {
																checked
															}
															class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded 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={ fmt.Sprintf("config_edit_%d", config.ID) } class="ms-2 text-sm font-medium text-gray-900 dark:text-white cursor-pointer w-full">
															{ config.Name }
														</label>
													</div>
												}
											} else {
												<div class="text-center py-4 text-gray-500 dark:text-gray-400">
													No configurations available. <a href="/configs/new" class="text-blue-600 dark:text-blue-500 hover:underline">Create one</a>
												</div>
											}
										</div>
									</div>
								</div>
								
								<!-- Selected configurations order list -->
								<div>
									<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										<i class="fas fa-sort-amount-down mr-1"></i> Execution Order
									</label>
									<div id="selected-configs-edit" class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 min-h-16 bg-gray-50 dark:bg-gray-800">
										<!-- Items will be populated by JavaScript -->
									</div>
									<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										Use the arrows to change the order in which configurations will execute.
									</p>
								</div>
							</div>
							
							<!-- Form actions -->
							<div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
								<a href="/jobs" class="text-white bg-gray-500 hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
									<i class="fas fa-arrow-left mr-2"></i>Cancel
								</a>
								<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
									<i class="fas fa-save mr-2"></i>Save Changes
								</button>
							</div>
						</form>
					}
				</div>
				
				<!-- Help Card -->
				<div class="mt-4 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
					<div class="flex">
						<div class="flex-shrink-0">
							<i class="fas fa-lightbulb text-yellow-400 text-xl"></i>
						</div>
						<div class="ml-4">
							<h5 class="text-sm font-medium text-gray-900 dark:text-white">Scheduling Tips</h5>
							<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
								Choose from simple interval, daily, weekly, or monthly schedules. For advanced scheduling needs, select "Custom" and use cron expression format. Jobs can run multiple configurations in sequence, useful for multi-step transfer workflows.
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>
	}
}