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 JobForm(ctx context.Context, data JobFormData) {
	@LayoutWithContext(getJobFormTitle(data.IsNew), ctx) {
		@configSearchScript()
		
		<!-- 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" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Schedule (Cron Expression)
									</label>
									<div class="relative">
										<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 * * * *"
										/>
									</div>
									<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
										<i class="fas fa-info-circle mr-1"></i>
										Use standard cron expression format. Example: */15 * * * * (every 15 minutes)
									</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="schedule" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
										Schedule (Cron Expression)
									</label>
									<div class="relative">
										<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" 
											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>
										Use standard cron expression format. Example: */15 * * * * (every 15 minutes)
									</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">
								Need help with cron expressions? Try <a href="https://crontab.guru/" target="_blank" class="font-medium underline hover:no-underline">crontab.guru</a> for a visual editor. Jobs can run multiple configurations in sequence, useful for multi-step transfer workflows.
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>
	}
}