GoMFT/components/admin_tools.templ

package components

import (
	"context"
	"fmt"
	"time"
)

type BackupFile struct {
	Name    string
	Size    string
	ModTime time.Time
}

type LogFile struct {
	Name    string
	Size    string
	ModTime time.Time
	Path    string
}

type AdminToolsData struct {
	JobHistoryCount    int
	DatabaseSize       string
	LastBackupTime     *time.Time
	BackupCount        int
	SystemUptime       string
	ActiveJobs         int
	TotalConfigs       int
	TotalJobs          int
	TotalUsers         int
	DatabasePath       string
	BackupPath         string
	MaintenanceMessage string
	BackupFiles        []BackupFile
	LogFiles           []LogFile
	LogContent         string
	CurrentLogFile     string
}

// Dialog component for confirmation dialogs
templ Dialog(id string, title string, message string, confirmClass string, confirmText string, formId string, targetAction string) {
	<div id={ id } class="hidden fixed inset-0 bg-secondary-900/50 dark:bg-secondary-900/80 backdrop-blur-sm z-50 flex items-center justify-center">
		<div class="bg-white dark:bg-secondary-800 rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden">
			<div class="px-6 pt-5 pb-3 text-center">
				<div class="flex justify-center mb-2">
					<i class="fas fa-exclamation-triangle text-yellow-400 text-3xl"></i>
				</div>
				<h3 class="text-xl font-medium text-secondary-900 dark:text-secondary-100">
					{ title }
				</h3>
			</div>
			<div class="px-6 py-4 text-center">
				<p class="text-secondary-700 dark:text-secondary-300">
					{ message }
				</p>
			</div>
			<div class="px-6 py-4 flex justify-end space-x-3">
				<button type="button" class="btn-secondary" onclick={ hideDialog(id) }>
					Cancel
				</button>
				if formId != "" {
					<button 
						type="button" 
						class={ confirmClass }
						onclick={ submitFormAndHideDialog(formId, id) }>
						{ confirmText }
					</button>
				} else {
					<button 
						type="button" 
						class={ confirmClass }
						hx-target={ targetAction }
						onclick={ hideDialog(id) }>
						{ confirmText }
					</button>
				}
			</div>
		</div>
	</div>
}

script hideDialog(id string) {
	document.getElementById(id).classList.add("hidden");
}

script submitFormAndHideDialog(formId string, dialogId string) {
	document.getElementById(formId).submit();
	document.getElementById(dialogId).classList.add("hidden");
}

script showDialog(id string) {
	document.getElementById(id).classList.remove("hidden");
}

// Backup dialog component specifically for restore and delete actions
templ BackupActionDialog(id string, title string, message string, confirmClass string, confirmText string, action string, backupName string) {
	<div id={ id } class="hidden fixed inset-0 bg-secondary-900/50 dark:bg-secondary-900/80 backdrop-blur-sm z-50 flex items-center justify-center">
		<div class="bg-white dark:bg-secondary-800 rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden">
			<div class="px-6 pt-5 pb-3 text-center">
				<div class="flex justify-center mb-2">
					<i class="fas fa-exclamation-triangle text-yellow-400 text-5xl"></i>
				</div>
				<h3 class="text-xl font-medium text-secondary-900 dark:text-secondary-100">
					{ title }
				</h3>
			</div>
			<div class="px-6 py-4 text-center">
				<p class="text-secondary-700 dark:text-secondary-300">
					{ message }
				</p>
			</div>
			<div class="px-6 py-4 flex justify-center space-x-3">
				<button type="button" class="btn-secondary" onclick={ hideDialog(id) }>
					Cancel
				</button>
				if action == "restore" {
					<button 
						type="button" 
						class="btn-warning"
						hx-post={ fmt.Sprintf("/admin/restore-database/%s", backupName) }
						hx-swap="none"
						onclick={ hideDialog(id) }>
						{ confirmText }
					</button>
				} else if action == "delete" {
					<button 
						type="button" 
						class="btn-danger"
						hx-delete={ fmt.Sprintf("/admin/delete-backup/%s", backupName) }
						hx-target="closest tr"
						hx-swap="delete"
						onclick={ hideDialog(id) }>
						{ confirmText }
					</button>
				}
			</div>
		</div>
	</div>
}

templ AdminTools(ctx context.Context, data AdminToolsData) {
	@LayoutWithContext("Admin Tools", ctx) {
		<style>
			/* Custom scrollbar styles - more aggressive */
			.log-scrollbar {
				scrollbar-width: thin !important; /* Firefox */
				scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1) !important; /* Firefox */
				overflow: auto !important;
			}
			
			.dark .log-scrollbar {
				scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.1) !important; /* Firefox */
			}
			
			.log-scrollbar::-webkit-scrollbar {
				width: 10px !important;
				height: 10px !important;
				display: block !important;
			}
			
			.log-scrollbar::-webkit-scrollbar-track {
				background: rgba(0,0,0,0.1) !important;
				border-radius: 4px !important;
			}
			
			.log-scrollbar::-webkit-scrollbar-thumb {
				background: rgba(0,0,0,0.3) !important;
				border-radius: 4px !important;
				border: 2px solid transparent !important;
				background-clip: content-box !important;
			}
			
			.log-scrollbar::-webkit-scrollbar-thumb:hover {
				background: rgba(0,0,0,0.5) !important;
				border: 2px solid transparent !important;
				background-clip: content-box !important;
			}
			
			.dark .log-scrollbar::-webkit-scrollbar-track {
				background: rgba(255,255,255,0.1) !important;
			}
			
			.dark .log-scrollbar::-webkit-scrollbar-thumb {
				background: rgba(255,255,255,0.3) !important;
				border: 2px solid transparent !important;
				background-clip: content-box !important;
			}
			
			.dark .log-scrollbar::-webkit-scrollbar-thumb:hover {
				background: rgba(255,255,255,0.5) !important;
				border: 2px solid transparent !important;
				background-clip: content-box !important;
			}
			
			/* Force scrollbar to appear */
			.force-scroll {
				overflow-y: scroll !important;
				min-height: 100px !important;
			}
		</style>
		<div class="py-6">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="flex items-center justify-between mb-8">
					<h1 class="text-3xl font-bold text-secondary-900 dark:text-secondary-100">
						<i class="fas fa-tools mr-2 text-primary-600 dark:text-primary-400"></i>
						Admin Tools
					</h1>
					<div class="text-sm text-secondary-500 dark:text-secondary-400">
						<span id="current-date" class="font-medium"></span>
						<script>
							document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
						</script>
					</div>
				</div>

				if data.MaintenanceMessage != "" {
					<div class="mb-6 bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 p-4 rounded">
						<div class="flex">
							<div class="flex-shrink-0">
								<i class="fas fa-exclamation-triangle text-yellow-400"></i>
							</div>
							<div class="ml-3">
								<p class="text-sm text-yellow-700 dark:text-yellow-300">
									{ data.MaintenanceMessage }
								</p>
							</div>
						</div>
					</div>
				}

				<!-- System Overview -->
				<div class="mb-8">
					<h2 class="text-xl font-semibold text-secondary-900 dark:text-secondary-100 mb-4">
						<i class="fas fa-chart-line mr-2 text-primary-500"></i>
						System Overview
					</h2>
					<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
						<div class="card overflow-hidden">
							<div class="p-5">
								<div class="flex items-center">
									<div class="flex-shrink-0">
										<i class="fas fa-database text-blue-500 text-2xl"></i>
									</div>
									<div class="ml-5 w-0 flex-1">
										<dl>
											<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400 truncate">
												Database Size
											</dt>
											<dd>
												<div class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
													{ data.DatabaseSize }
												</div>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
						
						<div class="card overflow-hidden">
							<div class="p-5">
								<div class="flex items-center">
									<div class="flex-shrink-0">
										<i class="fas fa-history text-green-500 text-2xl"></i>
									</div>
									<div class="ml-5 w-0 flex-1">
										<dl>
											<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400 truncate">
												Job History Records
											</dt>
											<dd>
												<div class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
													{ fmt.Sprint(data.JobHistoryCount) }
												</div>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
						
						<div class="card overflow-hidden">
							<div class="p-5">
								<div class="flex items-center">
									<div class="flex-shrink-0">
										<i class="fas fa-clock text-purple-500 text-2xl"></i>
									</div>
									<div class="ml-5 w-0 flex-1">
										<dl>
											<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400 truncate">
												System Uptime
											</dt>
											<dd>
												<div class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
													{ data.SystemUptime }
												</div>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
						
						<div class="card overflow-hidden">
							<div class="p-5">
								<div class="flex items-center">
									<div class="flex-shrink-0">
										<i class="fas fa-tasks text-orange-500 text-2xl"></i>
									</div>
									<div class="ml-5 w-0 flex-1">
										<dl>
											<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400 truncate">
												Active Jobs
											</dt>
											<dd>
												<div class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
													{ fmt.Sprint(data.ActiveJobs) }
												</div>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- Admin Tools Cards -->
				<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
					<!-- Backup & Restore -->
					<div class="card">
						<div class="card-header">
							<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
								<i class="fas fa-save mr-2 text-primary-500"></i>
								Backup & Restore
							</h3>
						</div>
						
						<div class="card-body space-y-4">
							<div class="flex items-center justify-between text-sm text-secondary-500 dark:text-secondary-400 mb-2">
							if data.LastBackupTime != nil {
								<span>Last backup: { data.LastBackupTime.Format("Jan 02, 2006 15:04:05") }</span>
							} else {
								<span>Last backup: Never</span>
							}
							</div>
							
							
							<button id="backup-form" 
								hx-post="/admin/backup-database" 
								hx-swap="none" 
								hx-indicator="#backup-indicator" 
								hx-on::after-request="htmx.trigger('#refresh-backups-trigger', 'click')"
								class="btn-primary w-full flex items-center justify-center">
								<i class="fas fa-database mr-2"></i>
								<span>Backup Database</span>
								<div id="backup-indicator" class="htmx-indicator ml-2">
									<i class="fas fa-circle-notch fa-spin"></i>
								</div>
							</button>
							
							<!-- Hidden refresh trigger -->
							<button id="refresh-backups-trigger" 
								class="hidden"
								hx-get="/admin/refresh-backups" 
								hx-target="#backups-container"></button>
							
							<form id="export-configs-form" action="/admin/export-configs" method="GET">
								<button type="submit" class="btn-secondary w-full flex items-center justify-center">
									<i class="fas fa-file-export mr-2"></i>
									<span>Export All Configurations</span>
									<div id="export-configs-indicator" class="htmx-indicator ml-2">
										<i class="fas fa-circle-notch fa-spin"></i>
									</div>
								</button>
							</form>
							
							<form id="export-jobs-form" action="/admin/export-jobs" method="GET">
								<button type="submit" class="btn-secondary w-full flex items-center justify-center">
									<i class="fas fa-file-export mr-2"></i>
									<span>Export All Jobs</span>
									<div id="export-jobs-indicator" class="htmx-indicator ml-2">
										<i class="fas fa-circle-notch fa-spin"></i>
									</div>
								</button>
							</form>
							
							<div class="border-t border-secondary-200 dark:border-secondary-700 pt-4 mt-4">
								<h4 class="text-sm font-medium text-secondary-900 dark:text-secondary-100 mb-2">Restore Database</h4>
								<form id="restore-form" hx-post="/admin/restore-database" hx-encoding="multipart/form-data" hx-swap="none" hx-indicator="#restore-indicator">
									<div class="flex items-center space-x-2">
										<div class="flex-grow">
											<label class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
												Select Backup File
											</label>
											<input type="file" name="backup_file" class="block w-full text-sm text-secondary-500 dark:text-secondary-400
												file:mr-4 file:py-2 file:px-4
												file:rounded-md file:border-0
												file:text-sm file:font-medium
												file:bg-primary-50 file:text-primary-700
												dark:file:bg-primary-900 dark:file:text-primary-300
												hover:file:bg-primary-100 dark:hover:file:bg-primary-800
												focus:outline-none" required />
										</div>
										<button type="submit" class="btn-warning flex-shrink-0 flex items-center justify-center h-10">
											<div class="flex items-center justify-center">
												<i class="fas fa-upload mr-1"></i>
												<span>Restore</span>
												<div id="restore-indicator" class="htmx-indicator ml-2">
													<i class="fas fa-circle-notch fa-spin"></i>
												</div>
											</div>
										</button>
									</div>
									<p class="text-xs text-red-600 dark:text-red-400 mt-2">
										<i class="fas fa-exclamation-triangle mr-1"></i>
										Warning: This will replace your current database. Make sure to backup first!
									</p>
								</form>
							</div>
						</div>
					</div>
					
					<!-- Maintenance Tools -->
					<div class="card">
						<div class="card-header">
							<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
								<i class="fas fa-wrench mr-2 text-primary-500"></i>
								Maintenance Tools
							</h3>
						</div>
						<div class="card-body space-y-4">
							<!-- Clear Job History Button and Dialog -->
							@Dialog("clear-job-dialog", "Clear Job History", "Are you sure you want to clear all job history? This cannot be undone.", "btn-danger", "Clear History", "purge-form", "")
							<form id="purge-form" hx-post="/admin/clear-job-history" hx-swap="none" hx-indicator="#clear-history-indicator">
								<button type="button" class="btn-danger w-full flex items-center justify-center" onclick={ showDialog("clear-job-dialog") }>
									<i class="fas fa-trash-alt mr-2"></i>
									<span>Clear Job History</span>
									<div id="clear-history-indicator" class="htmx-indicator ml-2">
										<i class="fas fa-circle-notch fa-spin"></i>
									</div>
								</button>
							</form>
							
							<div class="border-t border-secondary-200 dark:border-secondary-700 pt-4 mt-4">
								<form id="vacuum-form" hx-post="/admin/vacuum-database" hx-swap="none" hx-indicator="#vacuum-indicator">
									<button type="submit" class="btn-secondary w-full flex items-center justify-center">
										<i class="fas fa-compress-alt mr-2"></i>
										<span>Optimize Database</span>
										<div id="vacuum-indicator" class="htmx-indicator ml-2">
											<i class="fas fa-circle-notch fa-spin"></i>
										</div>
									</button>
									<p class="text-xs text-secondary-500 dark:text-secondary-400 mt-2">
										Runs VACUUM to optimize the database and reclaim unused space.
									</p>
								</form>
							</div>

						</div>
					</div>
				</div>
				
				<!-- Available Backups -->
				<div id="backups-container" class="mt-8">
					@BackupsList(data)
				</div>
				
				<!-- System Information -->
				<div class="mt-8">
					<div class="card">
						<div class="card-header">
							<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
								<i class="fas fa-info-circle mr-2 text-primary-500"></i>
								System Information
							</h3>
						</div>
						<div class="card-body">
							<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
								<div class="sm:col-span-1">
									<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400">Database Path</dt>
									<dd class="mt-1 text-sm text-secondary-900 dark:text-secondary-100 font-mono bg-secondary-50 dark:bg-secondary-900 p-2 rounded overflow-auto">
										{ data.DatabasePath }
									</dd>
								</div>
								
								<div class="sm:col-span-1">
									<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400">Backup Directory</dt>
									<dd class="mt-1 text-sm text-secondary-900 dark:text-secondary-100 font-mono bg-secondary-50 dark:bg-secondary-900 p-2 rounded overflow-auto">
										{ data.BackupPath }
									</dd>
								</div>
								
								<div class="sm:col-span-1">
									<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400">Total Users</dt>
									<dd class="mt-1 text-sm text-secondary-900 dark:text-secondary-100">
										{ fmt.Sprint(data.TotalUsers) }
									</dd>
								</div>
								
								<div class="sm:col-span-1">
									<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400">Total Configurations</dt>
									<dd class="mt-1 text-sm text-secondary-900 dark:text-secondary-100">
										{ fmt.Sprint(data.TotalConfigs) }
									</dd>
								</div>
								
								<div class="sm:col-span-1">
									<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400">Total Jobs</dt>
									<dd class="mt-1 text-sm text-secondary-900 dark:text-secondary-100">
										{ fmt.Sprint(data.TotalJobs) }
									</dd>
								</div>
							</dl>
						</div>
					</div>
				</div>
				
				<!-- Log Viewer -->
				<div id="logs-container" class="mt-8">
					@AdminLogViewer(data)
				</div>

				<!-- Webhook Documentation -->
				<div class="mt-8">
					<div class="card">
						<div class="card-header">
							<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
								<i class="fas fa-bell mr-2 text-primary-500"></i>
								Webhook Notifications
							</h3>
						</div>
						<div class="card-body">
							<p class="text-secondary-600 dark:text-secondary-400 mb-4">
								GoMFT can send webhook notifications when jobs run. You can configure webhooks 
								for individual jobs in the job edit form. Below is the format of the webhook payload:
							</p>
							
							<div class="bg-secondary-50 dark:bg-secondary-900 p-4 rounded-lg overflow-auto font-mono text-sm">
<pre>&#123;
  "event_type": "job_execution",
  "job_id": 123,
  "job_name": "Daily Backup",
  "config_id": 456,
  "config_name": "Backup Config",
  "status": "completed",
  "start_time": "2023-06-18T15:30:45Z",
  "end_time": "2023-06-18T15:35:12Z",
  "duration_seconds": 267,
  "history_id": 789,
  "bytes_transferred": 1048576,
  "files_transferred": 5,
  "source": &#123;
    "type": "local",
    "path": "/path/to/source"
  &#125;,
  "destination": &#123;
    "type": "s3",
    "path": "bucket/path"
  &#125;
&#125;</pre>
							</div>
							
							<h4 class="text-lg font-medium text-secondary-900 dark:text-secondary-100 mt-6 mb-2">Authentication</h4>
							<p class="text-secondary-600 dark:text-secondary-400 mb-4">
								When configuring a webhook, you can optionally provide a secret key. This will be used to sign
								the webhook payload with HMAC-SHA256. The signature is provided in the <code>X-Hub-Signature-256</code> header.
							</p>
							
							<h4 class="text-lg font-medium text-secondary-900 dark:text-secondary-100 mt-6 mb-2">HTTP Request Details</h4>
							<div class="overflow-x-auto">
								<table class="min-w-full">
									<thead>
										<tr>
											<th class="text-left text-sm font-medium text-secondary-500 dark:text-secondary-400 pb-2">Property</th>
											<th class="text-left text-sm font-medium text-secondary-500 dark:text-secondary-400 pb-2">Value</th>
										</tr>
									</thead>
									<tbody class="divide-y divide-secondary-200 dark:divide-secondary-700">
										<tr>
											<td class="py-2 text-sm text-secondary-900 dark:text-secondary-100 font-medium">Method</td>
											<td class="py-2 text-sm text-secondary-600 dark:text-secondary-400">POST</td>
										</tr>
										<tr>
											<td class="py-2 text-sm text-secondary-900 dark:text-secondary-100 font-medium">Content-Type</td>
											<td class="py-2 text-sm text-secondary-600 dark:text-secondary-400">application/json</td>
										</tr>
										<tr>
											<td class="py-2 text-sm text-secondary-900 dark:text-secondary-100 font-medium">User-Agent</td>
											<td class="py-2 text-sm text-secondary-600 dark:text-secondary-400">GoMFT-Webhook/1.0</td>
										</tr>
										<tr>
											<td class="py-2 text-sm text-secondary-900 dark:text-secondary-100 font-medium">X-Hub-Signature-256</td>
											<td class="py-2 text-sm text-secondary-600 dark:text-secondary-400">HMAC SHA256 signature (if secret configured)</td>
										</tr>
										<tr>
											<td class="py-2 text-sm text-secondary-900 dark:text-secondary-100 font-medium">Custom Headers</td>
											<td class="py-2 text-sm text-secondary-600 dark:text-secondary-400">Any additional headers specified in the job configuration</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	}
}

// BackupsList is a separate component for the backups list that can be refreshed via HTMX
templ BackupsList(data AdminToolsData) {
	if len(data.BackupFiles) > 0 {
		<div class="card">
			<div class="card-header flex justify-between items-center">
				<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
					<i class="fas fa-history mr-2 text-primary-500"></i>
					Available Backups
				</h3>
				<button 
					hx-get="/admin/refresh-backups" 
					hx-target="#backups-container" 
					hx-indicator="#refresh-backups-indicator"
					class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
					title="Refresh backups list">
					<i class="fas fa-sync-alt"></i>
					<span id="refresh-backups-indicator" class="htmx-indicator ml-1">
						<i class="fas fa-circle-notch fa-spin"></i>
					</span>
				</button>
			</div>
			<div class="card-body">
				<div class="bg-secondary-50 dark:bg-secondary-900 rounded-lg overflow-hidden">
					<div class="overflow-x-auto">
						<table class="min-w-full divide-y divide-secondary-200 dark:divide-secondary-700">
							<thead>
								<tr class="bg-secondary-100 dark:bg-secondary-800">
									<th class="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-400">Name</th>
									<th class="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-400">Size</th>
									<th class="px-4 py-2 text-left text-xs font-medium text-secondary-500 dark:text-secondary-400">Date</th>
									<th class="px-4 py-2 text-right text-xs font-medium text-secondary-500 dark:text-secondary-400">Action</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-secondary-200 dark:divide-secondary-700">
								for _, backup := range data.BackupFiles {
									<tr class="hover:bg-secondary-100 dark:hover:bg-secondary-800 transition-colors">
										<td class="px-4 py-2 text-sm text-secondary-900 dark:text-secondary-100">{ backup.Name }</td>
										<td class="px-4 py-2 text-sm text-secondary-500 dark:text-secondary-400">{ backup.Size }</td>
										<td class="px-4 py-2 text-sm text-secondary-500 dark:text-secondary-400">{ backup.ModTime.Format("Jan 02, 2006 15:04:05") }</td>
										<td class="px-4 py-2 text-right">
											<a href={ templ.SafeURL(fmt.Sprintf("/admin/download-backup/%s", backup.Name)) } 
												class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 mr-2"
												title="Download backup">
												<i class="fas fa-download"></i>
											</a>
											
											<!-- Restore Dialog -->
											@BackupActionDialog(
												fmt.Sprintf("restore-dialog-%s", backup.Name),
												"RESTORE BACKUP",
												fmt.Sprintf("Are you sure you want to restore the backup '%s'? This will replace your current database.", backup.Name),
												"btn-warning",
												"Restore",
												"restore",
												backup.Name,
											)
											<button
												type="button"
												class="text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300 mr-2"
												title="Restore this backup"
												onclick={ showDialog(fmt.Sprintf("restore-dialog-%s", backup.Name)) }>
												<i class="fas fa-upload"></i>
											</button>
											
											<!-- Delete Dialog -->
											@BackupActionDialog(
												fmt.Sprintf("delete-dialog-%s", backup.Name),
												"DELETE BACKUP",
												fmt.Sprintf("Are you sure you want to delete the backup '%s'? This cannot be undone.", backup.Name),
												"btn-danger",
												"Delete",
												"delete",
												backup.Name,
											)
											<button
												type="button"
												class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
												title="Delete backup"
												onclick={ showDialog(fmt.Sprintf("delete-dialog-%s", backup.Name)) }>
												<i class="fas fa-trash-alt"></i>
											</button>
										</td>
									</tr>
								}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	} else {
		<div class="card">
			<div class="card-header flex justify-between items-center">
				<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
					<i class="fas fa-history mr-2 text-primary-500"></i>
					Available Backups
				</h3>
				<button 
					hx-get="/admin/refresh-backups" 
					hx-target="#backups-container" 
					hx-indicator="#refresh-backups-indicator"
					class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
					title="Refresh backups list">
					<i class="fas fa-sync-alt"></i>
					<span id="refresh-backups-indicator" class="htmx-indicator ml-1">
						<i class="fas fa-circle-notch fa-spin"></i>
					</span>
				</button>
			</div>
			<div class="card-body">
				<div class="text-center py-6">
					<div class="mx-auto w-12 h-12 rounded-full bg-secondary-100 dark:bg-secondary-800 flex items-center justify-center mb-4">
						<i class="fas fa-folder-open text-secondary-400 dark:text-secondary-500"></i>
					</div>
					<h3 class="text-sm font-medium text-secondary-900 dark:text-secondary-100">No Backups Available</h3>
					<p class="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
						Create a backup using the "Backup Database" button.
					</p>
				</div>
			</div>
		</div>
	}
}

// Add this new template after other admin tool templates
templ AdminLogViewer(data AdminToolsData) {
	<div class="bg-white dark:bg-secondary-800 rounded-lg shadow-md p-6 mb-6">
		<h3 class="text-xl font-semibold mb-4 text-secondary-900 dark:text-secondary-100 flex items-center">
			<i class="fas fa-file-alt mr-2"></i> Log Files
		</h3>

		<div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-4">
			<div class="lg:col-span-1 border-r border-secondary-200 dark:border-secondary-700 pr-4">
				<h4 class="text-lg font-medium mb-2 text-secondary-900 dark:text-secondary-100">Available Logs</h4>
				<div class="space-y-2 max-h-96 overflow-y-auto pr-2 log-scrollbar">
					if len(data.LogFiles) == 0 {
						<div class="text-secondary-600 dark:text-secondary-400 italic">
							No log files found
						</div>
					} else {
						<div class="flex flex-col space-y-1">
							for _, logFile := range data.LogFiles {
								<button
									class={
										"text-left px-3 py-2 rounded transition-colors flex justify-between items-center",
										templ.KV("bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400", logFile.Name == data.CurrentLogFile),
										templ.KV("hover:bg-secondary-50 dark:hover:bg-secondary-700/50 text-secondary-700 dark:text-secondary-300", logFile.Name != data.CurrentLogFile)
									}
									hx-get={ fmt.Sprintf("/admin/logs/view/%s", logFile.Name) }
									hx-target="#log-content"
									hx-indicator="#log-loading"
								>
									<span class="flex items-center">
										<i class="fas fa-file-alt mr-2"></i>
										{ logFile.Name }
									</span>
									<span class="text-xs text-secondary-500 dark:text-secondary-400">{ logFile.Size }</span>
								</button>
							}
						</div>
					}
				</div>
				<div class="mt-4 flex justify-between">
					<button 
						class="btn-secondary btn-sm"
						hx-get="/admin/logs/refresh"
						hx-target="#logs-container"
						hx-indicator="#refresh-logs-indicator"
					>
						<span id="refresh-logs-indicator" class="htmx-indicator">
							<i class="fas fa-spinner fa-spin"></i>
						</span>
						<i class="fas fa-sync-alt mr-1"></i> Refresh
					</button>
				</div>
			</div>

			<div class="lg:col-span-3 pl-0 lg:pl-4">
				<div class="flex justify-between items-center mb-2">
					<h4 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
						if data.CurrentLogFile != "" {
							Log: { data.CurrentLogFile }
						} else {
							Select a log file
						}
					</h4>
					if data.CurrentLogFile != "" {
						<div class="flex space-x-2">
							<button 
								class="btn-secondary btn-sm"
								hx-get={ fmt.Sprintf("/admin/logs/download/%s", data.CurrentLogFile) }
							>
								<i class="fas fa-download mr-1"></i> Download
							</button>
						</div>
					}
				</div>

				@AdminLogContent(data)
			</div>
		</div>
	</div>
}

// AdminLogContent template for log view
templ AdminLogContent(data AdminToolsData) {
	<div id="log-content" class="relative">
		<div id="log-loading" class="htmx-indicator absolute inset-0 bg-white/75 dark:bg-secondary-800/75 flex items-center justify-center">
			<i class="fas fa-spinner fa-spin text-primary-600 text-2xl"></i>
		</div>
		if data.CurrentLogFile == "" {
			<div class="border border-secondary-200 dark:border-secondary-700 rounded p-4 text-secondary-600 dark:text-secondary-400 bg-secondary-50 dark:bg-secondary-900/30 text-center h-96 flex items-center justify-center">
				<div>
					<i class="fas fa-file-alt text-4xl mb-2"></i>
					<p>Select a log file to view its contents</p>
				</div>
			</div>
		} else {
			<!-- Fixed height log content container with guaranteed scrollbars -->
			<div class="log-content-container" style="height: 400px; border: 1px solid #ccc; border-radius: 0.375rem; position: relative;">
				<!-- Standard scrollable div -->
				<div id="log-content-text" class="p-4 h-full overflow-y-scroll bg-secondary-50 dark:bg-secondary-900/30 text-secondary-800 dark:text-secondary-200 text-sm font-mono whitespace-pre-wrap" style="scrollbar-width: thin;">
					{ data.LogContent }
				</div>
				
				<!-- Custom scrollbar -->
				<div class="custom-scrollbar dark:bg-white dark:bg-opacity-10" style="position: absolute; right: 0; top: 0; width: 12px; height: 100%; background-color: rgba(0,0,0,0.05); border-radius: 0 0.375rem 0.375rem 0;">
					<div class="scrollbar-thumb dark:bg-opacity-30 dark:bg-white" style="position: absolute; right: 0; width: 12px; background-color: rgba(0,0,0,0.3); border-radius: 6px; cursor: pointer; min-height: 40px;"></div>
				</div>
			</div>
			
			<script>
				// Custom scrollbar implementation
				(function() {
					const content = document.getElementById('log-content-text');
					const scrollThumb = document.querySelector('.scrollbar-thumb');
					
					// Initial position
					updateScrollThumb();
					
					// Update scrollbar position when content is scrolled
					content.addEventListener('scroll', updateScrollThumb);
					
					function updateScrollThumb() {
						const scrollPercentage = content.scrollTop / (content.scrollHeight - content.clientHeight);
						const thumbHeight = Math.max(40, (content.clientHeight / content.scrollHeight) * content.clientHeight);
						const thumbTop = scrollPercentage * (content.clientHeight - thumbHeight);
						
						scrollThumb.style.height = thumbHeight + 'px';
						scrollThumb.style.top = thumbTop + 'px';
					}
					
					// Dragging the scrollbar
					let isDragging = false;
					let startY, startTop;
					
					scrollThumb.addEventListener('mousedown', function(e) {
						isDragging = true;
						startY = e.clientY;
						startTop = parseInt(scrollThumb.style.top) || 0;
						document.body.style.userSelect = 'none'; // Prevent text selection during drag
					});
					
					document.addEventListener('mousemove', function(e) {
						if (!isDragging) return;
						
						const deltaY = e.clientY - startY;
						const newTop = Math.max(0, Math.min(content.clientHeight - scrollThumb.offsetHeight, startTop + deltaY));
						scrollThumb.style.top = newTop + 'px';
						
						// Update scroll position
						const scrollPercentage = newTop / (content.clientHeight - scrollThumb.offsetHeight);
						content.scrollTop = scrollPercentage * (content.scrollHeight - content.clientHeight);
					});
					
					document.addEventListener('mouseup', function() {
						isDragging = false;
						document.body.style.userSelect = '';
					});
					
					// Auto-scroll to bottom
					content.scrollTop = content.scrollHeight;
				})();
			</script>
		}
	</div>
}