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 = '';
					let hasError = false;
					
					switch (scheduleType) {
						case 'interval':
							const intervalValueEl = document.getElementById(`${prefixId}interval-value`);
							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();
					}
					
					// Also validate the schedule builder when type changes
					if (window.validateScheduleFields) {
						window.validateScheduleFields(prefixId);
					}
				});
				
				// Add listeners to all schedule builder inputs
				const attachListeners = (selector) => {
					const elements = document.querySelectorAll(selector);
					elements.forEach(el => {
						el.addEventListener('change', () => {
							updateCronExpression();
							
							// Also validate this field when value changes
							if (window.validateScheduleFields) {
								window.validateScheduleFields(prefixId);
							}
						});
						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 formValidationScript() {
	<script>
		document.addEventListener('DOMContentLoaded', () => {
			// Global function to validate schedule fields that can be called from the schedule builder script
			window.validateScheduleFields = (prefixId) => {
				const prefix = prefixId || '';
				const formId = prefix ? 'edit-job-form' : 'new-job-form';
				const form = document.getElementById(formId);
				
				if (!form) return;
				
				// Find if we have a validation function on the form
				const validationFunction = form._validateScheduleBuilder;
				if (typeof validationFunction === 'function') {
					validationFunction();
				}
			};
			
			// Form validation functions
			const initFormValidation = (formId, submitBtnId) => {
				const form = document.getElementById(formId);
				const submitBtn = document.getElementById(submitBtnId);
				
				if (!form || !submitBtn) return;
				
				// Keep track of form errors
				const formErrors = {};
				const errorContainer = document.getElementById(formId === 'new-job-form' ? 'form-errors' : 'edit-form-errors');
				const errorList = document.getElementById(formId === 'new-job-form' ? 'error-list' : 'edit-error-list');
				
				// Update the form level error container
				const updateFormErrors = () => {
					if (!errorContainer || !errorList) return;
					
					// Clear the current list
					errorList.innerHTML = '';
					
					// Get all errors
					const errors = Object.values(formErrors);
					
					if (errors.length > 0) {
						// Show the error container
						errorContainer.classList.remove('hidden');
						
						// Add each error to the list
						errors.forEach(error => {
							const li = document.createElement('li');
							li.textContent = error;
							errorList.appendChild(li);
						});
					} else {
						// Hide the error container if no errors
						errorContainer.classList.add('hidden');
					}
				};
				
				// Add error message element below a field
				const addErrorMessage = (input, message) => {
					// Remove any existing error message
					removeErrorMessage(input);
					
					// Store the error for form level display
					formErrors[input.id] = message;
					updateFormErrors();
					
					// Add error class to input
					input.classList.add('border-red-500', 'dark:border-red-500');
					input.classList.add('focus:ring-red-500', 'focus:border-red-500', 'dark:focus:ring-red-600', 'dark:focus:border-red-600');
					
					// Create error message
					const errorDiv = document.createElement('p');
					errorDiv.className = 'mt-2 text-sm text-red-600 dark:text-red-500';
					errorDiv.innerHTML = `<span class="font-medium"><i class="fas fa-exclamation-circle mr-1"></i>${message}</span>`;
					errorDiv.setAttribute('data-error-for', input.id);
					errorDiv.id = `error-${input.id}`;
					
					// Add aria attributes for accessibility
					input.setAttribute('aria-invalid', 'true');
					input.setAttribute('aria-describedby', `error-${input.id}`);
					
					// Insert after input or its parent container as appropriate
					const container = input.closest('.relative') || input;
					container.parentNode.insertBefore(errorDiv, container.nextSibling);
					
					return errorDiv;
				};
				
				// Remove error message element
				const removeErrorMessage = (input) => {
					// Remove from form errors
					if (formErrors[input.id]) {
						delete formErrors[input.id];
						updateFormErrors();
					}
					
					input.classList.remove('border-red-500', 'dark:border-red-500');
					input.classList.remove('focus:ring-red-500', 'focus:border-red-500', 'dark:focus:ring-red-600', 'dark:focus:border-red-600');
					input.removeAttribute('aria-invalid');
					input.removeAttribute('aria-describedby');
					
					const errorDiv = document.querySelector(`[data-error-for="${input.id}"]`);
					if (errorDiv) {
						errorDiv.remove();
					}
				};
				
				// Validate job name field (optional but has max length constraints)
				const validateJobName = (input) => {
					const value = input.value.trim();
					
					if (value && value.length > 100) {
						addErrorMessage(input, 'Job name must be less than 100 characters');
						return false;
					}
					
					removeErrorMessage(input);
					return true;
				};
				
				// Validate schedule field
				const validateSchedule = (input) => {
					// Cron format: minute hour day-of-month month day-of-week
					// Basic validation for cron expression format
					const value = input.value.trim();
					
					if (!value) {
						addErrorMessage(input, 'Schedule is required');
						return false;
					}
					
					const cronParts = value.split(/\s+/);
					if (cronParts.length !== 5) {
						addErrorMessage(input, 'Invalid cron expression format');
						return false;
					}
					
					removeErrorMessage(input);
					return true;
				};
				
				// Validate config selection
				const validateConfigSelection = (formEl) => {
					const checkedConfigs = formEl.querySelectorAll('input[name="config_ids[]"]:checked');
					const container = formEl.querySelector('#selected-configs') || formEl.querySelector('#selected-configs-edit');
					
					if (checkedConfigs.length === 0) {
						const errorDiv = document.createElement('p');
						errorDiv.className = 'mt-2 text-sm text-red-600 dark:text-red-500';
						errorDiv.innerHTML = '<span class="font-medium"><i class="fas fa-exclamation-circle mr-1"></i>At least one configuration must be selected</span>';
						errorDiv.id = 'config-selection-error';
						
						// Add to form errors
						formErrors['config_selection'] = 'At least one configuration must be selected';
						updateFormErrors();
						
						// Remove any existing error message
						const existingError = document.getElementById('config-selection-error');
						if (existingError) {
							existingError.remove();
						}
						
						if (container) {
							container.classList.add('border-red-500', 'dark:border-red-500');
							container.parentNode.insertBefore(errorDiv, container.nextSibling);
						}
						
						return false;
					} else {
						// Remove from form errors
						if (formErrors['config_selection']) {
							delete formErrors['config_selection'];
							updateFormErrors();
						}
						
						const existingError = document.getElementById('config-selection-error');
						if (existingError) {
							existingError.remove();
						}
						
						if (container) {
							container.classList.remove('border-red-500', 'dark:border-red-500');
						}
						
						return true;
					}
				};
				
				// Validate schedule builder fields based on selected type
				const validateScheduleBuilder = () => {
					const scheduleTypeSelect = document.getElementById(`${prefix}schedule-type`);
					
					if (!scheduleTypeSelect) return true;
					
					const scheduleType = scheduleTypeSelect.value;
					let isValid = true;
					
					// Clear existing schedule builder errors
					form.querySelectorAll('.schedule-builder-error').forEach(el => el.remove());
					
					// Helper to add error message
					const addBuilderError = (element, message) => {
						// Add error style
						element.classList.add('border-red-500', 'dark:border-red-500');
						
						// Add to form errors list
						formErrors[`${prefix}schedule-builder-${element.id}`] = message;
						
						// Create error message
						const errorDiv = document.createElement('p');
						errorDiv.className = 'mt-1 text-sm text-red-600 dark:text-red-500 schedule-builder-error';
						errorDiv.innerHTML = `<span class="font-medium"><i class="fas fa-exclamation-circle mr-1"></i>${message}</span>`;
						
						// Add after element
						element.parentNode.insertBefore(errorDiv, element.nextSibling);
						
						isValid = false;
					};
					
					switch (scheduleType) {
						case 'interval':
							const intervalValueEl = document.getElementById(`${prefix}interval-value`);
							if (intervalValueEl) {
								const value = intervalValueEl.value.trim();
								if (!value || isNaN(value) || parseInt(value) < 1) {
									addBuilderError(intervalValueEl, 'Please enter a valid number greater than 0');
								} else {
									intervalValueEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							break;
							
						case 'daily':
							const dailyHourEl = document.getElementById(`${prefix}daily-hour`);
							const dailyMinuteEl = document.getElementById(`${prefix}daily-minute`);
							
							if (dailyHourEl) {
								const hour = dailyHourEl.value.trim();
								if (!hour || isNaN(hour) || parseInt(hour) < 0 || parseInt(hour) > 23) {
									addBuilderError(dailyHourEl, 'Hour must be between 0-23');
								} else {
									dailyHourEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							
							if (dailyMinuteEl) {
								const minute = dailyMinuteEl.value.trim();
								if (!minute || isNaN(minute) || parseInt(minute) < 0 || parseInt(minute) > 59) {
									addBuilderError(dailyMinuteEl, 'Minute must be between 0-59');
								} else {
									dailyMinuteEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							break;
							
						case 'weekly':
							const weeklyHourEl = document.getElementById(`${prefix}weekly-hour`);
							const weeklyMinuteEl = document.getElementById(`${prefix}weekly-minute`);
							
							if (weeklyHourEl) {
								const hour = weeklyHourEl.value.trim();
								if (!hour || isNaN(hour) || parseInt(hour) < 0 || parseInt(hour) > 23) {
									addBuilderError(weeklyHourEl, 'Hour must be between 0-23');
								} else {
									weeklyHourEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							
							if (weeklyMinuteEl) {
								const minute = weeklyMinuteEl.value.trim();
								if (!minute || isNaN(minute) || parseInt(minute) < 0 || parseInt(minute) > 59) {
									addBuilderError(weeklyMinuteEl, 'Minute must be between 0-59');
								} else {
									weeklyMinuteEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							
							// Check if at least one day is selected
							let daySelected = false;
							for (let i = 0; i < 7; i++) {
								const dayCheckbox = document.getElementById(`${prefix}day-${i}`);
								if (dayCheckbox && dayCheckbox.checked) {
									daySelected = true;
									break;
								}
							}
							
							if (!daySelected) {
								const daysContainer = form.querySelector(`#${prefix}weekly-section .flex.flex-wrap.gap-2`);
								if (daysContainer) {
									daysContainer.classList.add('border', 'border-red-500', 'rounded-md', 'p-1');
									
									// Add to form errors
									formErrors[`${prefix}weekly-days`] = 'Please select at least one day of the week';
									
									// Add error message
									const errorDiv = document.createElement('p');
									errorDiv.className = 'mt-1 text-sm text-red-600 dark:text-red-500 schedule-builder-error';
									errorDiv.innerHTML = '<span class="font-medium"><i class="fas fa-exclamation-circle mr-1"></i>Please select at least one day</span>';
									daysContainer.parentNode.insertBefore(errorDiv, daysContainer.nextSibling);
									
									isValid = false;
								}
							} else {
								const daysContainer = form.querySelector(`#${prefix}weekly-section .flex.flex-wrap.gap-2`);
								if (daysContainer) {
									daysContainer.classList.remove('border', 'border-red-500', 'rounded-md', 'p-1');
								}
							}
							break;
							
						case 'monthly':
							const monthlyHourEl = document.getElementById(`${prefix}monthly-hour`);
							const monthlyMinuteEl = document.getElementById(`${prefix}monthly-minute`);
							const monthlyDayEl = document.getElementById(`${prefix}monthly-day`);
							
							if (monthlyHourEl) {
								const hour = monthlyHourEl.value.trim();
								if (!hour || isNaN(hour) || parseInt(hour) < 0 || parseInt(hour) > 23) {
									addBuilderError(monthlyHourEl, 'Hour must be between 0-23');
								} else {
									monthlyHourEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							
							if (monthlyMinuteEl) {
								const minute = monthlyMinuteEl.value.trim();
								if (!minute || isNaN(minute) || parseInt(minute) < 0 || parseInt(minute) > 59) {
									addBuilderError(monthlyMinuteEl, 'Minute must be between 0-59');
								} else {
									monthlyMinuteEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							
							if (monthlyDayEl) {
								const day = monthlyDayEl.value.trim();
								if (!day || isNaN(day) || parseInt(day) < 1 || parseInt(day) > 31) {
									addBuilderError(monthlyDayEl, 'Day must be between 1-31');
								} else {
									monthlyDayEl.classList.remove('border-red-500', 'dark:border-red-500');
								}
							}
							break;
							
						case 'custom':
							// No validation required for custom option
							break;
					}
					
					// Update form errors
					updateFormErrors();
					
					return isValid;
				};
				
				// Run validation on all fields
				const validateForm = () => {
					// Clear all existing form errors
					Object.keys(formErrors).forEach(key => delete formErrors[key]);
					
					let isValid = true;
					
					// Get form fields based on form ID
					const prefix = formId === 'new-job-form' ? '' : 'edit-';
					const nameInput = document.getElementById(`${prefix}name`);
					const scheduleInput = document.getElementById(`${prefix}schedule`);
					
					// Validate job name (if present)
					if (nameInput) {
						isValid = validateJobName(nameInput) && isValid;
					}
					
					// Validate schedule builder fields
					isValid = validateScheduleBuilder() && isValid;
					
					// Validate schedule
					if (scheduleInput) {
						isValid = validateSchedule(scheduleInput) && isValid;
					}
					
					// Validate config selection
					isValid = validateConfigSelection(form) && isValid;
					
					// Update form errors
					updateFormErrors();
					
					return isValid;
				};
				
				// Handle form submission validation
				form.addEventListener('submit', (e) => {
					const isValid = validateForm();
					
					// Prevent form submission if validation fails
					if (!isValid) {
						e.preventDefault();
						
						// Scroll to the error container first
						if (errorContainer && !errorContainer.classList.contains('hidden')) {
							errorContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
						} else {
							// Or scroll to the first field error
							const firstError = document.querySelector('.text-red-600');
							if (firstError) {
								firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
							}
						}
					}
				});
				
				// Add input event listeners to validate fields as they are completed
				const prefix = formId === 'new-job-form' ? '' : 'edit-';
				
				// Job name validation
				const nameInput = document.getElementById(`${prefix}name`);
				if (nameInput) {
					nameInput.addEventListener('blur', () => {
						validateJobName(nameInput);
					});
					
					nameInput.addEventListener('input', () => {
						if (nameInput.value.length > 100) {
							validateJobName(nameInput);
						} else if (nameInput.hasAttribute('aria-invalid')) {
							validateJobName(nameInput);
						}
					});
				}
				
				// Schedule validation
				const scheduleInput = document.getElementById(`${prefix}schedule`);
				if (scheduleInput) {
					scheduleInput.addEventListener('blur', () => {
						validateSchedule(scheduleInput);
					});
					
					scheduleInput.addEventListener('change', () => {
						validateSchedule(scheduleInput);
					});
				}
				
				// Add validation to config selection checkboxes
				const configCheckboxes = form.querySelectorAll('input[name="config_ids[]"]');
				configCheckboxes.forEach(checkbox => {
					checkbox.addEventListener('change', () => {
						validateConfigSelection(form);
					});
				});
				
				// Add a validate all button for testing
				if (submitBtn && form.classList.contains('debug-mode')) {
					const validateBtn = document.createElement('button');
					validateBtn.type = 'button';
					validateBtn.textContent = 'Validate Form';
					validateBtn.className = 'ml-2 text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center';
					validateBtn.addEventListener('click', validateForm);
					submitBtn.parentNode.insertBefore(validateBtn, submitBtn.nextSibling);
				}
				
				// Add the validation function to the form object for global access
				form._validateScheduleBuilder = validateScheduleBuilder;
			};
			
			// Initialize form validation for both forms
			initFormValidation('new-job-form', 'new-job-submit');
			initFormValidation('edit-job-form', 'edit-job-submit');
		});
	</script>
}

templ JobForm(ctx context.Context, data JobFormData) {
	@LayoutWithContext(getJobFormTitle(data.IsNew), ctx) {
		@configSearchScript()
		@scheduleBuilderScript()
		@formValidationScript()
		
		<!-- 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">
							<!-- Form level errors -->
							<div id="form-errors" class="hidden p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
								<div class="flex items-center">
									<i class="fas fa-circle-exclamation mr-2"></i>
									<span class="font-medium">Please fix the following errors:</span>
								</div>
								<ul class="mt-1.5 ml-4 list-disc list-inside" id="error-list">
								</ul>
							</div>
							
							<!-- 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"
											maxlength="100"
										/>
									</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 <span class="text-red-500">*</span>
									</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
											aria-required="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="*/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" id="new-job-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">
							<!-- Form level errors -->
							<div id="edit-form-errors" class="hidden p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
								<div class="flex items-center">
									<i class="fas fa-circle-exclamation mr-2"></i>
									<span class="font-medium">Please fix the following errors:</span>
								</div>
								<ul class="mt-1.5 ml-4 list-disc list-inside" id="edit-error-list">
								</ul>
							</div>
							
							<!-- 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="edit-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="edit-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"
											maxlength="100"
										/>
									</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 <span class="text-red-500">*</span>
									</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
											aria-required="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="*/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" id="edit-job-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>
	}
}