package components

import (
	"context"
	"fmt"
)

type NotificationFormData struct {
	NotificationService *struct {
		ID                    uint
		Name                  string
		Description           string
		Type                  string
		IsEnabled             bool
		EventTriggers         []string
		RetryPolicy           string
		WebhookURL            string
		Method                string
		Headers               string
		PayloadTemplate       string
		SecretKey             string
		PushbulletAPIKey      string
		PushbulletDeviceID    string
		PushbulletTitleTemplate string
		PushbulletBodyTemplate  string
		NtfyServer            string
		NtfyTopic             string
		NtfyPriority          string
		NtfyUsername          string
		NtfyPassword          string
		NtfyTitleTemplate     string
		NtfyMessageTemplate   string
		GotifyURL             string
		GotifyToken           string
		GotifyPriority        string
		GotifyTitleTemplate   string
		GotifyMessageTemplate string
		PushoverAPIToken      string
		PushoverUserKey       string
		PushoverDevice        string
		PushoverPriority      string
		PushoverSound         string
		PushoverTitleTemplate string
		PushoverMessageTemplate string
	}
	IsNew          bool
	SuccessMessage string
	ErrorMessage   string
}

// Helper function to check if a string is in a slice
func contains(slice []string, str string) bool {
	for _, s := range slice {
		if s == str {
			return true
		}
	}
	return false
}

// Helper function to convert bool to string for HTML attributes
func boolToString(b bool) string {
	if b {
		return "true"
	}
	return ""
}

func getNotificationFormTitle(isNew bool) string {
	if isNew {
		return "Add Notification Service"
	}
	return "Edit Notification Service"
}

templ NotificationForm(ctx context.Context, data NotificationFormData) {
	@LayoutWithContext(getNotificationFormTitle(data.IsNew), ctx) {
		<!-- Status and Error Messages -->
		<div id="toast-container" class="fixed top-5 right-5 z-50 flex flex-col gap-2"></div>
		
		<script>
			// Notification system
			function showToast(message, type) {
				const toastContainer = document.getElementById('toast-container');
				
				// Create toast element
				const toast = document.createElement('div');
				toast.id = 'toast-' + type + '-' + Date.now();
				toast.className = 'flex items-center w-full max-w-xs p-4 mb-4 rounded-lg shadow text-gray-500 bg-white dark:text-gray-400 dark:bg-gray-800 transform translate-y-16 opacity-0 transition-all duration-300 ease-out';
				toast.role = 'alert';
				
				// Set toast content based on type
				let iconClass, bgColorClass, textColorClass;
				
				if (type === 'success') {
					iconClass = 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200';
					bgColorClass = 'text-green-500 dark:text-green-200';
					textColorClass = 'text-green-500 dark:text-green-200';
				} else if (type === 'error') {
					iconClass = 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200';
					bgColorClass = 'text-red-500 dark:text-red-200';
					textColorClass = 'text-red-500 dark:text-red-200';
				} else {
					iconClass = 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200';
					bgColorClass = 'text-blue-500 dark:text-blue-200';
					textColorClass = 'text-blue-500 dark:text-blue-200';
				}
				
				// Set inner HTML with appropriate icon and message
				toast.innerHTML = `
					<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg ${iconClass}">
						${type === 'success' 
							? '<i class="fas fa-check"></i>' 
							: type === 'error' 
							? '<i class="fas fa-exclamation-circle"></i>'
							: '<i class="fas fa-info-circle"></i>'}
					</div>
					<div class="ml-3 text-sm font-normal">${message}</div>
					<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#${toast.id}" aria-label="Close">
						<span class="sr-only">Close</span>
						<i class="fas fa-times"></i>
					</button>
				`;
				
				// Add toast to container
				toastContainer.appendChild(toast);
				
				// Trigger animation after a small delay to ensure the DOM has updated
				setTimeout(() => {
					toast.classList.remove('translate-y-16', 'opacity-0');
					toast.classList.add('translate-y-0', 'opacity-100');
				}, 10);
				
				// Add event listener to close button
				const closeButton = toast.querySelector('button[data-dismiss-target]');
				closeButton.addEventListener('click', function() {
					// Animate out before removing
					toast.classList.add('opacity-0', 'translate-y-4');
					setTimeout(() => {
						toast.remove();
					}, 300);
				});
				
				// Auto-remove toast after 5 seconds
				setTimeout(() => {
					toast.classList.add('opacity-0', 'translate-y-4');
					setTimeout(() => {
						toast.remove();
					}, 300);
				}, 5000);
			}
			
			// Toggle notification fields based on selection
			document.addEventListener('DOMContentLoaded', function() {
				const typeSelector = document.getElementById('notification_type');
				const allFields = document.querySelectorAll('.notification-fields');
				const commonFields = document.querySelectorAll('.common-fields');
				
				typeSelector.addEventListener('change', function() {
					// Hide all fields first
					allFields.forEach(field => field.classList.add('hidden'));
					
					// Show/hide common fields based on selection
					const selectedType = this.value;
					if (selectedType) {
						// Show common fields (name, description)
						commonFields.forEach(field => field.classList.remove('hidden'));
						
						// Show the selected type's specific fields
						const fieldsToShow = document.getElementById(`${selectedType}_fields`);
						if (fieldsToShow) {
							fieldsToShow.classList.remove('hidden');
						}
					} else {
						// Hide common fields if no type selected
						commonFields.forEach(field => field.classList.add('hidden'));
					}
				});
				
				// Initialize form if editing
				if (document.getElementById('notification_type').value) {
					// Trigger the change event to show the appropriate fields
					document.getElementById('notification_type').dispatchEvent(new Event('change'));
				}
			});
		</script>
		
		<div id="notification-form-container" style="min-height: 100vh; background-color: rgb(249, 250, 251);" class="notifications-page bg-gray-50 dark:bg-gray-900">
			<div class="pb-8 w-full max-w-4xl mx-auto">
				<!-- Success Message (hidden, used for HTMX responses) -->
				if data.SuccessMessage != "" {
					<div class="hidden success-message">{ data.SuccessMessage }</div>
				}
				<!-- Error Message (hidden, used for HTMX responses) -->
				if data.ErrorMessage != "" {
					<div class="hidden error-message">{ data.ErrorMessage }</div>
				}
				
				<div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
					<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center">
						<i class="fas fa-bell w-6 h-6 mr-2 text-blue-500 dark:text-blue-400"></i>
						{ getNotificationFormTitle(data.IsNew) }
					</h1>
					<a href="/admin/settings/notifications" class="flex items-center justify-center text-gray-700 bg-gray-100 hover:bg-gray-200 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg px-5 py-2.5 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 focus:outline-none dark:focus:ring-gray-700">
						<i class="fas fa-arrow-left w-4 h-4 mr-2"></i>
						Back to Notification Services
					</a>
				</div>
				
				<!-- Add Notification Service Form -->
				<div class="mb-6 p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 dark:bg-gray-800">
					<form id="notification-form" 
						if data.IsNew {
							hx-post="/admin/settings/notifications"
						} else {
							hx-put={ fmt.Sprintf("/admin/settings/notifications/%d", data.NotificationService.ID) }
						}
						hx-target="body">
						<div class="mb-6">
							<label for="notification_type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Notification Type</label>
							<select id="notification_type" name="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="">Select a type</option>
								if data.NotificationService != nil && data.NotificationService.Type == "webhook" {
									<option value="webhook" selected="selected">Webhook</option>
								} else {
									<option value="webhook">Webhook</option>
								}
								if data.NotificationService != nil && data.NotificationService.Type == "pushbullet" {
									<option value="pushbullet" selected="selected">Pushbullet</option>
								} else {
									<option value="pushbullet">Pushbullet</option>
								}
								if data.NotificationService != nil && data.NotificationService.Type == "ntfy" {
									<option value="ntfy" selected="selected">Ntfy</option>
								} else {
									<option value="ntfy">Ntfy</option>
								}
								if data.NotificationService != nil && data.NotificationService.Type == "gotify" {
									<option value="gotify" selected="selected">Gotify</option>
								} else {
									<option value="gotify">Gotify</option>
								}
								if data.NotificationService != nil && data.NotificationService.Type == "pushover" {
									<option value="pushover" selected="selected">Pushover</option>
								} else {
									<option value="pushover">Pushover</option>
								}
								<option value="email" disabled>Email (Coming Soon)</option>
							</select>
						</div>
						<div class="mb-6 hidden common-fields">
							<label for="notification_name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
							if data.NotificationService.Name != "" {
								<input type="text" id="notification_name" name="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 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="My Notification Service" required value={ data.NotificationService.Name }/>
							} else {
								<input type="text" id="notification_name" name="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 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="My Notification Service" required value=""/>
							}
						</div>
						<div class="mb-6 hidden common-fields">
							<label for="notification_description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
							if data.NotificationService.Description != "" {
								<textarea id="notification_description" name="description" rows="3" 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" placeholder="Description for this notification service">{ data.NotificationService.Description }</textarea>
							} else {
								<textarea id="notification_description" name="description" rows="3" 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" placeholder="Description for this notification service"></textarea>
							}
						</div>
						
						<!-- Dynamic fields based on notification type -->
						<div id="email_fields" class="hidden notification-fields">
							<div class="mb-6">
								<label for="smtp_host" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">SMTP Host</label>
								<input type="text" id="smtp_host" name="smtp_host" 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" placeholder="smtp.example.com"/>
							</div>
							<div class="mb-6">
								<label for="smtp_port" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">SMTP Port</label>
								<input type="number" id="smtp_port" name="smtp_port" 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" placeholder="587"/>
							</div>
							<div class="mb-6">
								<label for="smtp_username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">SMTP Username</label>
								<input type="text" id="smtp_username" name="smtp_username" 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" placeholder="user@example.com"/>
							</div>
							<div class="mb-6">
								<label for="smtp_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">SMTP Password</label>
								<input type="password" id="smtp_password" name="smtp_password" 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"/>
							</div>
							<div class="mb-6">
								<label for="from_email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">From Email</label>
								<input type="email" id="from_email" name="from_email" 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" placeholder="notifications@example.com"/>
							</div>
						</div>
						<div id="webhook_fields" class="hidden notification-fields">
							<div class="mb-6">
								<label for="webhook_url" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Webhook URL</label>
								if data.NotificationService.WebhookURL != "" {
									<input type="url" id="webhook_url" name="webhook_url" 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" placeholder="https://api.example.com/webhook" value={ data.NotificationService.WebhookURL }/>
								} else {
									<input type="url" id="webhook_url" name="webhook_url" 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" placeholder="https://api.example.com/webhook" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="method" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">HTTP Method</label>
								<select id="method" name="method" 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">
									if data.NotificationService.Method != "" {
										if data.NotificationService.Method == "POST" {
											<option value="POST" selected="selected">POST</option>
										} else {
											<option value="POST">POST</option>
										}
										if data.NotificationService.Method == "PUT" {
											<option value="PUT" selected="selected">PUT</option>
										} else {
											<option value="PUT">PUT</option>
										}
									} else {
										<option value="POST">POST</option>
										<option value="PUT">PUT</option>
									}
								</select>
							</div>
							<div class="mb-6">
								<label for="headers" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Headers (JSON)</label>
								if data.NotificationService.Headers != "" {
									<textarea id="headers" name="headers" rows="3" 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" placeholder='{"Content-Type": "application/json", "Authorization": "Bearer token"}'>{ data.NotificationService.Headers }</textarea>
								} else {
									<textarea id="headers" name="headers" rows="3" 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" placeholder='{"Content-Type": "application/json", "Authorization": "Bearer token"}'></textarea>
								}
							</div>
							<div class="mb-6">
								<label for="payload_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Payload Template (JSON)</label>
								<textarea
									id="payload_template"
									name="payload_template"
									rows="5"
									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"
									placeholder='{
		"event": "{{job.event}}",
		"job": {
				"id": "{{job.id}}",
				"name": "{{job.name}}",
				"status": "{{job.status}}",
				"message": "{{job.message}}",
				"started_at": "{{job.started_at}}",
				"completed_at": "{{job.completed_at}}",
				"duration_seconds": {{job.duration_seconds}},
				"config_id": "{{job.config_id}}",
				"config_name": "{{job.config_name}}",
				"transfer_bytes": {{job.transfer_bytes}},
				"file_count": {{job.file_count}}
		},
		"instance": {
				"id": "{{instance.id}}",
				"name": "{{instance.name}}",
				"version": "{{instance.version}}",
				"environment": "{{instance.environment}}"
		},
		"timestamp": "{{timestamp}}",
		"notification_id": "{{notification.id}}"
}'
								> 
								if data.NotificationService.PayloadTemplate != "" { 
									data.NotificationService.PayloadTemplate 
								} </textarea>
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Use placeholders for dynamic values. Available variables: job.*, instance.*, timestamp, notification.*</p>
							</div>
							<div class="mb-6">
								<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Event Triggers</label>
								<div class="space-y-2">
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_start")) }/>
										}
										<label for="trigger_job_start" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Start</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_complete")) }/>
										}
										<label for="trigger_job_complete" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Complete</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_error")) }/>
										}
										<label for="trigger_job_error" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Error</label>
									</div>
								</div>
							</div>
							<div class="mb-6">
								<label for="secret_key" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Secret Key (for signature verification)</label>
								if data.NotificationService.SecretKey != "" {
									<input type="text" id="secret_key" name="secret_key" 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" placeholder="Optional signature verification key" value={ data.NotificationService.SecretKey }/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">If provided, all webhooks will include an X-GoMFT-Signature header</p>
							</div>
							<div class="mb-6">
								<label for="retry_policy" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Retry Policy</label>
								<select id="retry_policy" name="retry_policy" 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">
										if data.NotificationService.RetryPolicy != "" {
										if data.NotificationService.RetryPolicy == "none" {
											<option value="none" selected="selected">No retries</option>
										} else {
											<option value="none">No retries</option>
										}
										if data.NotificationService.RetryPolicy == "simple" {
											<option value="simple" selected="selected">Simple (3 retries)</option>
										} else {
											<option value="simple">Simple (3 retries)</option>
										}
										if data.NotificationService.RetryPolicy == "exponential" {
											<option value="exponential" selected="selected">Exponential backoff</option>
										} else {
											<option value="exponential">Exponential backoff</option>
										}
									} else {
										<option value="none">No retries</option>
										<option value="simple">Simple (3 retries)</option>
										<option value="exponential">Exponential backoff</option>
									}
								</select>
							</div>
							<!-- Test notification button -->
							<div class="mb-6 p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
								<div class="flex items-center justify-between mb-2">
									<h4 class="text-base font-medium text-gray-900 dark:text-white">Test Configuration</h4>
									<button
										type="button"
										id="test-webhook-btn"
										hx-post="/admin/settings/notifications/test"
										hx-trigger="click"
										hx-target="#test-notification-result"
										hx-swap="outerHTML"
										class="px-3 py-2 text-xs font-medium text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
									>
										<i class="fas fa-paper-plane mr-1"></i>
										Send Test Notification
									</button>
								</div>
								<p class="text-sm text-gray-500 dark:text-gray-400">
									Send a test notification to verify your configuration works correctly before saving.
								</p>
								<div id="test-notification-result" class="mt-3 hidden">
									<!-- Result will be shown here -->
								</div>
							</div>
						</div>
						
						<!-- Pushbullet Fields -->
						<div id="pushbullet_fields" class="hidden notification-fields">
							<div class="mb-6">
								<label for="pushbullet_api_key" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">API Key</label>
								if data.NotificationService.PushbulletAPIKey != "" {
									<input type="text" id="pushbullet_api_key" name="pushbullet_api_key" 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" placeholder="o.XyzAbCdEfGhIjKlMnOpQrSt" value={ data.NotificationService.PushbulletAPIKey }/>
								} else {
									<input type="text" id="pushbullet_api_key" name="pushbullet_api_key" 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" placeholder="o.XyzAbCdEfGhIjKlMnOpQrSt" value=""/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get your API key from <a href="https://www.pushbullet.com/#settings/account" target="_blank" class="text-blue-500 hover:underline">Pushbullet Account Settings</a></p>
							</div>
							<div class="mb-6">
								<label for="pushbullet_device_iden" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Device Identifier (Optional)</label>
								if data.NotificationService.PushbulletDeviceID != "" {
									<input type="text" id="pushbullet_device_iden" name="pushbullet_device_iden" 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" placeholder="Leave empty to send to all devices" value={ data.NotificationService.PushbulletDeviceID }/>
								} else {
									<input type="text" id="pushbullet_device_iden" name="pushbullet_device_iden" 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" placeholder="Leave empty to send to all devices" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="pushbullet_title_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Notification Title Template</label>
								if data.NotificationService.PushbulletTitleTemplate != "" {
									<input type="text" id="pushbullet_title_template" name="pushbullet_title_template" 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" value={ data.NotificationService.PushbulletTitleTemplate }/>
								} else {
									<input type="text" id="pushbullet_title_template" name="pushbullet_title_template" 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" placeholder="{{job.name}} {{job.status}}" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="pushbullet_body_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Message Body Template</label>
								<textarea
									id="pushbullet_body_template"
									name="pushbullet_body_template"
									rows="4"
									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"
									placeholder="Job '{{job.name}}' {{job.status}} at {{job.completed_at}}. {{job.file_count}} files transferred ({{job.transfer_bytes}} bytes)."
								>
								if data.NotificationService.PushbulletBodyTemplate != "" { 
									data.NotificationService.PushbulletBodyTemplate 
								} </textarea>
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Use placeholders for dynamic values. Available variables: job.*, instance.*, timestamp, notification.*</p>
							</div>
							<div class="mb-6">
								<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Event Triggers</label>
								<div class="space-y-2">
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="pb_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_start")) }/>
										} else {
											<input id="pb_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="pb_trigger_job_start" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Start</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="pb_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_complete")) }/>
										} else {
											<input id="pb_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="pb_trigger_job_complete" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Complete</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="pb_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_error")) }/>
										} else {
											<input id="pb_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="pb_trigger_job_error" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Error</label>
									</div>
								</div>
							</div>
							<!-- Test notification button for Pushbullet -->
							<div class="mb-6 p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
								<div class="flex items-center justify-between mb-2">
									<h4 class="text-base font-medium text-gray-900 dark:text-white">Test Configuration</h4>
									<button
										type="button"
										id="test-pushbullet-btn"
										hx-post="/admin/settings/notifications/test"
										hx-trigger="click"
										hx-target="#test-notification-result"
										hx-swap="outerHTML"
										class="px-3 py-2 text-xs font-medium text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
									>
										<i class="fas fa-paper-plane mr-1"></i>
										Send Test Notification
									</button>
								</div>
								<p class="text-sm text-gray-500 dark:text-gray-400">
									Send a test notification to verify your Pushbullet configuration works correctly before saving.
								</p>
								<div id="test-notification-result" class="mt-3 hidden">
									<!-- Result will be shown here -->
								</div>
							</div>
						</div>

						<!-- Ntfy Fields -->
						<div id="ntfy_fields" class="hidden notification-fields">
							<div class="mb-6">
								<label for="ntfy_server" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Ntfy Server</label>
								if data.NotificationService.NtfyServer != "" {
									<input type="url" id="ntfy_server" name="ntfy_server" 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" placeholder="https://ntfy.sh" value={ data.NotificationService.NtfyServer }/>
								} else {
									<input type="url" id="ntfy_server" name="ntfy_server" 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" placeholder="https://ntfy.sh" value="https://ntfy.sh"/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">The Ntfy server URL (default: ntfy.sh)</p>
							</div>
							<div class="mb-6">
								<label for="ntfy_topic" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Topic</label>
								if data.NotificationService.NtfyTopic != "" {
									<input type="text" id="ntfy_topic" name="ntfy_topic" 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" placeholder="your-unique-topic" value={ data.NotificationService.NtfyTopic }/>
								} else {
									<input type="text" id="ntfy_topic" name="ntfy_topic" 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" placeholder="your-unique-topic" value="gomft"/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Choose a unique, unguessable topic name</p>
								</div>
							<div class="mb-6">
								<label for="ntfy_priority" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Default Priority</label>
								<select id="ntfy_priority" name="ntfy_priority" 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="1">Low (1)</option>
									if data.NotificationService.NtfyPriority == "3" {
										<option value="3" selected="selected">Default (3)</option>
									} else {
										<option value="3">Default (3)</option>
									}
									<option value="4">High (4)</option>
									<option value="5">Urgent (5)</option>
								</select>
							</div>
							<div class="mb-6">
								<label for="ntfy_username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Username (Optional)</label>
								if data.NotificationService.NtfyUsername != "" {
									<input type="text" id="ntfy_username" name="ntfy_username" 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" placeholder="Username for protected topics" value={ data.NotificationService.NtfyUsername }/>
								} else {
									<input type="text" id="ntfy_username" name="ntfy_username" 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" placeholder="Username for protected topics" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="ntfy_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password (Optional)</label>
								if data.NotificationService.NtfyPassword != "" {
									<input type="password" id="ntfy_password" name="ntfy_password" 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" placeholder="Password for protected topics" value={ data.NotificationService.NtfyPassword }/>
								} else {
									<input type="password" id="ntfy_password" name="ntfy_password" 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" placeholder="Password for protected topics" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="ntfy_title_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Notification Title Template</label>
								if data.NotificationService.NtfyTitleTemplate != "" {
									<input type="text" id="ntfy_title_template" name="ntfy_title_template" 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" value={ data.NotificationService.NtfyTitleTemplate }/>
								} else {
									<input type="text" id="ntfy_title_template" name="ntfy_title_template" 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" placeholder="{{job.name}} {{job.status}}" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="ntfy_message_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Message Body Template</label>
								<textarea
									id="ntfy_message_template"
									name="ntfy_message_template"
									rows="4"
									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"
									placeholder="Job '{{job.name}}' {{job.status}} at {{job.completed_at}}. {{job.file_count}} files transferred ({{job.transfer_bytes}} bytes)."
								>
								if data.NotificationService.NtfyMessageTemplate != "" { 
									data.NotificationService.NtfyMessageTemplate 
								} </textarea>
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Use placeholders for dynamic values. Available variables: job.*, instance.*, timestamp, notification.*</p>
							</div>
							<div class="mb-6">
								<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Event Triggers</label>
								<div class="space-y-2">
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="ntfy_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_start")) }/>
										} else {
											<input id="ntfy_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="ntfy_trigger_job_start" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Start</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="ntfy_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_complete")) }/>
										} else {
											<input id="ntfy_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="ntfy_trigger_job_complete" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Complete</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="ntfy_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_error")) }/>
										} else {
											<input id="ntfy_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="ntfy_trigger_job_error" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Error</label>
									</div>
								</div>
							</div>
							<!-- Test notification button for Ntfy -->
							<div class="mb-6 p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
								<div class="flex items-center justify-between mb-2">
									<h4 class="text-base font-medium text-gray-900 dark:text-white">Test Configuration</h4>
									<button
										type="button"
										id="test-ntfy-btn"
										hx-post="/admin/settings/notifications/test"
										hx-trigger="click"
										hx-target="#test-notification-result"
										hx-swap="outerHTML"
										class="px-3 py-2 text-xs font-medium text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
									>
										<i class="fas fa-paper-plane mr-1"></i>
										Send Test Notification
									</button>
								</div>
								<p class="text-sm text-gray-500 dark:text-gray-400">
									Send a test notification to verify your Ntfy configuration works correctly before saving.
								</p>
								<div id="test-notification-result" class="mt-3 hidden">
									<!-- Result will be shown here -->
								</div>
							</div>
						</div>
						
						<!-- Gotify Fields -->
						<div id="gotify_fields" class="hidden notification-fields">
							<div class="mb-6">
								<label for="gotify_url" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Gotify Server URL</label>
								if data.NotificationService.GotifyURL != "" {
									<input type="url" id="gotify_url" name="gotify_url" 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" placeholder="https://gotify.example.com" value={ data.NotificationService.GotifyURL }/>
								} else {
									<input type="url" id="gotify_url" name="gotify_url" 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" placeholder="https://gotify.example.com" value=""/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">URL of your Gotify server</p>
							</div>
							<div class="mb-6">
								<label for="gotify_token" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Application Token</label>
								if data.NotificationService.GotifyToken != "" {
									<input type="text" id="gotify_token" name="gotify_token" 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" placeholder="A-M-XiEQj.zX5d" value={ data.NotificationService.GotifyToken }/>
								} else {
									<input type="text" id="gotify_token" name="gotify_token" 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" placeholder="A-M-XiEQj.zX5d" value=""/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Find this in your Gotify application settings</p>
							</div>
							<div class="mb-6">
								<label for="gotify_priority" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Default Priority</label>
								<select id="gotify_priority" name="gotify_priority" 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="0">Low (0)</option>
									if data.NotificationService.GotifyPriority != "" && data.NotificationService.GotifyPriority == "5" {
										<option value="5" selected="selected">Normal (5)</option>
									} else {
										<option value="5">Normal (5)</option>
									}
									<option value="8">High (8)</option>
								</select>
							</div>
							<div class="mb-6">
								<label for="gotify_title_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Message Title Template</label>
								if data.NotificationService.GotifyTitleTemplate != "" {
									<input type="text" id="gotify_title_template" name="gotify_title_template" 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" value={ data.NotificationService.GotifyTitleTemplate }/>
								} else {
									<input type="text" id="gotify_title_template" name="gotify_title_template" 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" placeholder="{{job.name}} {{job.status}}" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="gotify_message_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Message Body Template</label>
								<textarea
									id="gotify_message_template"
									name="gotify_message_template"
									rows="4"
									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"
									placeholder="Job '{{job.name}}' {{job.status}} at {{job.completed_at}}. {{job.file_count}} files transferred ({{job.transfer_bytes}} bytes)."
								>
								if data.NotificationService.GotifyMessageTemplate != "" { 
									data.NotificationService.GotifyMessageTemplate 
								}</textarea>
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Use placeholders for dynamic values. Available variables: job.*, instance.*, timestamp, notification.*</p>
							</div>
							<div class="mb-6">
								<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Event Triggers</label>
								<div class="space-y-2">
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="gotify_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_start")) }/>
										} else {
											<input id="gotify_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="gotify_trigger_job_start" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Start</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="gotify_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_complete")) }/>
										} else {
											<input id="gotify_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="gotify_trigger_job_complete" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Complete</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="gotify_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_error")) }/>
										} else {
											<input id="gotify_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="gotify_trigger_job_error" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Error</label>
									</div>
								</div>
							</div>
							<!-- Test notification button for Gotify -->
							<div class="mb-6 p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
								<div class="flex items-center justify-between mb-2">
									<h4 class="text-base font-medium text-gray-900 dark:text-white">Test Configuration</h4>
									<button
										type="button"
										id="test-gotify-btn"
										hx-post="/admin/settings/notifications/test"
										hx-trigger="click"
										hx-target="#test-notification-result"
										hx-swap="outerHTML"
										class="px-3 py-2 text-xs font-medium text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
									>
										<i class="fas fa-paper-plane mr-1"></i>
										Send Test Notification
									</button>
								</div>
								<p class="text-sm text-gray-500 dark:text-gray-400">
									Send a test notification to verify your Gotify configuration works correctly before saving.
								</p>
								<div id="test-notification-result" class="mt-3 hidden">
									<!-- Result will be shown here -->
								</div>
							</div>
						</div>
						
						<!-- Pushover Fields -->
						<div id="pushover_fields" class="hidden notification-fields">
							<div class="mb-6">
								<label for="pushover_app_token" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">API Token/Key</label>
								if data.NotificationService.PushoverAPIToken != "" {
									<input type="text" id="pushover_app_token" name="pushover_app_token" 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" placeholder="azGDORePK8gMaC0QOYAMyEEuzJnyUi" value={ data.NotificationService.PushoverAPIToken }/>
								} else {
									<input type="text" id="pushover_app_token" name="pushover_app_token" 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" placeholder="azGDORePK8gMaC0QOYAMyEEuzJnyUi" value=""/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your application's API token/key from <a href="https://pushover.net/apps" target="_blank" class="text-blue-500 hover:underline">Pushover Dashboard</a></p>
							</div>
							<div class="mb-6">
								<label for="pushover_user_key" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">User Key</label>
								if data.NotificationService.PushoverUserKey != "" {
									<input type="text" id="pushover_user_key" name="pushover_user_key" 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" placeholder="uQiRzpo4DXghDmr9QzzfQu27cmVRsG" value={ data.NotificationService.PushoverUserKey }/>
								} else {
									<input type="text" id="pushover_user_key" name="pushover_user_key" 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" placeholder="uQiRzpo4DXghDmr9QzzfQu27cmVRsG" value=""/>
								}
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your user key from <a href="https://pushover.net/" target="_blank" class="text-blue-500 hover:underline">Pushover Dashboard</a></p>
							</div>
							<div class="mb-6">
								<label for="pushover_device" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Device Name (Optional)</label>
								if data.NotificationService.PushoverDevice != "" {
									<input type="text" id="pushover_device" name="pushover_device" 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" placeholder="Leave empty to send to all devices" value={ data.NotificationService.PushoverDevice }/>
								} else {
									<input type="text" id="pushover_device" name="pushover_device" 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" placeholder="Leave empty to send to all devices" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="pushover_priority" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Default Priority</label>
								<select id="pushover_priority" name="pushover_priority" 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="-2">Lowest (-2)</option>
									<option value="-1">Low (-1)</option>
									if data.NotificationService.PushoverPriority != "" && data.NotificationService.PushoverPriority == "0" {
										<option value="0" selected="selected">Normal (0)</option>
									} else {
										<option value="0">Normal (0)</option>
									}
									<option value="1">High (1)</option>
									<option value="2">Emergency (2)</option>
								</select>
							</div>
							<div class="mb-6">
								<label for="pushover_sound" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Sound</label>
								<select id="pushover_sound" name="pushover_sound" 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="pushover">Pushover (default)</option>
									<option value="bike">Bike</option>
									<option value="bugle">Bugle</option>
									<option value="cashregister">Cash Register</option>
									<option value="classical">Classical</option>
									<option value="cosmic">Cosmic</option>
									<option value="falling">Falling</option>
									<option value="gamelan">Gamelan</option>
									<option value="incoming">Incoming</option>
									<option value="intermission">Intermission</option>
									<option value="magic">Magic</option>
									<option value="mechanical">Mechanical</option>
									<option value="pianobar">Piano Bar</option>
									<option value="siren">Siren</option>
									<option value="spacealarm">Space Alarm</option>
									<option value="tugboat">Tug Boat</option>
									<option value="alien">Alien Alarm (long)</option>
									<option value="climb">Climb (long)</option>
									<option value="persistent">Persistent (long)</option>
									<option value="echo">Echo (long)</option>
									<option value="updown">Up Down (long)</option>
									<option value="vibrate">Vibrate Only</option>
									<option value="none">None (silent)</option>
								</select>
							</div>
							<div class="mb-6">
								<label for="pushover_title_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Message Title Template</label>
								if data.NotificationService.PushoverTitleTemplate != "" {
									<input type="text" id="pushover_title_template" name="pushover_title_template" 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" value={ data.NotificationService.PushoverTitleTemplate }/>
								} else {
									<input type="text" id="pushover_title_template" name="pushover_title_template" 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" placeholder="'{{job.name}}' {{job.status}}" value=""/>
								}
							</div>
							<div class="mb-6">
								<label for="pushover_message_template" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Message Body Template</label>
								<textarea
									id="pushover_message_template"
									name="pushover_message_template"
									rows="4"
									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"
									placeholder="Job '{{job.name}}' {{job.status}} at {{job.completed_at}}. {{job.file_count}} files transferred ({{job.transfer_bytes}} bytes)."
								>
								if data.NotificationService.PushoverMessageTemplate != "" { 
									data.NotificationService.PushoverMessageTemplate 
								} </textarea>
								<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Use placeholders for dynamic values. Available variables: job.*, instance.*, timestamp, notification.*</p>
							</div>
							<div class="mb-6">
								<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Event Triggers</label>
								<div class="space-y-2">
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="pushover_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_start")) }/>
										} else {
											<input id="pushover_trigger_job_start" name="trigger_job_start" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="pushover_trigger_job_start" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Start</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="pushover_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_complete")) }/>
										} else {
											<input id="pushover_trigger_job_complete" name="trigger_job_complete" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="pushover_trigger_job_complete" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Complete</label>
									</div>
									<div class="flex items-center">
										if data.NotificationService.EventTriggers != nil {
											<input id="pushover_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(contains(data.NotificationService.EventTriggers, "job_error")) }/>
										} else {
											<input id="pushover_trigger_job_error" name="trigger_job_error" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
										}
										<label for="pushover_trigger_job_error" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Job Error</label>
									</div>
								</div>
							</div>
							<!-- Test notification button for Pushover -->
							<div class="mb-6 p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
								<div class="flex items-center justify-between mb-2">
									<h4 class="text-base font-medium text-gray-900 dark:text-white">Test Configuration</h4>
									<button
										type="button"
										id="test-pushover-btn"
										hx-post="/admin/settings/notifications/test"
										hx-trigger="click"
										hx-target="#test-notification-result"
										hx-swap="outerHTML"
										class="px-3 py-2 text-xs font-medium text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
									>
										<i class="fas fa-paper-plane mr-1"></i>
										Send Test Notification
									</button>
								</div>
								<p class="text-sm text-gray-500 dark:text-gray-400">
									Send a test notification to verify your Pushover configuration works correctly before saving.
								</p>
								<div id="test-notification-result" class="mt-3 hidden">
									<!-- Result will be shown here -->
								</div>
							</div>
						</div>
						
						<div class="flex items-start mb-6 hidden common-fields">
							<div class="flex items-center h-5">
								if data.NotificationService.IsEnabled != false {
									<input id="is_enabled" name="is_enabled" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked={ boolToString(data.NotificationService.IsEnabled) }/>
								} else {
									<input id="is_enabled" name="is_enabled" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" checked="true"/>
								}
							</div>
							<div class="ml-3 text-sm">
								<label for="is_enabled" class="font-medium text-gray-900 dark:text-white">Enable this notification service</label>
							</div>
						</div>
						<div class="hidden common-fields">
							<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none 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">
								if data.IsNew {
									Add Service
								} else {
									Save Changes
								}
							</button>
						</div>
					</form>
				</div>
				
				<!-- Help Notice -->
				<div class="mt-8 p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
					<div class="flex">
						<div class="flex-shrink-0">
							<i class="fas fa-info-circle text-blue-400 dark:text-blue-400"></i>
						</div>
						<div class="ml-3">
							<p class="text-sm text-blue-700 dark:text-blue-400">
								Configure your notification service to receive alerts for job events. Different notification types have different configuration options.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script>
			// Set dark background color if in dark mode
			if (document.documentElement.classList.contains('dark')) {
				document.getElementById('notification-form-container').style.backgroundColor = '#111827';
			}
			
			// Add event listener for theme changes
			document.addEventListener('DOMContentLoaded', function() {
				const themeToggle = document.getElementById('theme-toggle');
				if (themeToggle) {
					themeToggle.addEventListener('click', function() {
						setTimeout(function() {
							const isDark = document.documentElement.classList.contains('dark');
							document.getElementById('notification-form-container').style.backgroundColor = isDark ? '#111827' : 'rgb(249, 250, 251)';
						}, 50);
					});
				}
			});
		</script>
	}
}