{{define "config-backup-items"}}
{{range .ConfigBackups}}
<article class="bg-gray-700 rounded-lg p-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <div class="min-w-0">
        <h3 class="font-semibold text-white break-words">{{.Filename}}</h3>
        <p class="text-gray-400 text-xs mt-1">Created: {{.CreatedDate}}</p>
        <details class="mt-1 text-sm text-gray-400">
            <summary class="inline-flex min-h-11 cursor-pointer items-center gap-1 rounded pr-2 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-purple-500">
                <i class="bx bx-folder-open" aria-hidden="true"></i>
                View full path
            </summary>
            <p class="rounded bg-gray-800 p-2 font-mono text-xs break-all">{{.FilePath}}</p>
        </details>
    </div>
    <div class="flex flex-col gap-2 sm:flex-row sm:shrink-0">
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center justify-center gap-2"
                data-modal="restore-config"
                data-modal-params='backup_path={{.FilePath}}'>
            <i class="bx bx-history" aria-hidden="true"></i>
            Restore
        </button>
        <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center justify-center gap-2"
                data-modal="delete-backup"
                data-modal-params='backup_path={{.FilePath}}'>
            <i class="bx bx-trash" aria-hidden="true"></i>
            Delete
        </button>
    </div>
</article>
{{end}}
{{end}}

{{define "config-backups-load-more"}}
<div id="backup-list-more" class="flex flex-col items-center gap-3 pt-1">
    <p id="backup-results-summary" class="text-sm text-gray-400" aria-live="polite">
        Showing {{.VisibleEnd}} of {{.Total}} backups
    </p>
    {{if .HasMore}}
    <button type="button"
            class="bg-gray-700 hover:bg-gray-600 text-white px-5 py-2 rounded-lg transition flex items-center justify-center gap-2"
            hx-get="/api/config/backups/list?offset={{.NextOffset}}&amp;q={{urlquery .Query}}&amp;append=1"
            hx-target="#backup-list-more"
            hx-swap="outerHTML"
            hx-indicator="#backup-load-more-spinner">
        <i id="backup-load-more-spinner" class="bx bx-loader-lines htmx-indicator bx-spin" aria-hidden="true"></i>
        Load more
    </button>
    {{end}}
</div>
{{end}}

{{define "config-backups-more"}}
{{template "config-backup-items" .}}
{{template "config-backups-load-more" .}}
{{end}}

{{define "config-backups-list"}}
<div class="space-y-4">
    {{if gt .AllTotal 0}}
    <div>
        <label for="backup-search" class="block text-sm font-medium text-gray-300 mb-2">Search backups</label>
        <div class="relative">
            <i class="bx bx-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true"></i>
            <input id="backup-search"
                   type="search"
                   name="q"
                   value="{{.Query}}"
                   placeholder="Search by filename, date, or path"
                   class="w-full bg-gray-700 text-white rounded-lg pl-10 pr-12 py-2 focus:outline-hidden focus:ring-2 focus:ring-purple-500"
                   hx-get="/api/config/backups/list"
                   hx-trigger="input changed delay:300ms, search"
                   hx-target="#backup-list-container"
                   hx-swap="innerHTML"
                   hx-indicator="#backup-search-spinner"
                   aria-describedby="backup-results-summary">
            <i id="backup-search-spinner" class="bx bx-loader-lines bx-spin htmx-indicator absolute right-3 top-1/2 -translate-y-1/2 text-purple-400" aria-hidden="true"></i>
        </div>
    </div>
    {{end}}

    {{if eq .AllTotal 0}}
    <div id="no-backups" class="text-center py-8">
        <p class="text-gray-400">No configuration backups found</p>
        <p class="text-gray-500 text-sm mt-2">Backups are created automatically when you reset config</p>
    </div>
    {{else if eq .Total 0}}
    <div class="text-center py-8">
        <p class="text-gray-400">No backups match “{{.Query}}”</p>
        <p id="backup-results-summary" class="text-gray-500 text-sm mt-2" aria-live="polite">Try a filename, date, or folder name</p>
    </div>
    {{else}}
    <div id="backup-items" class="space-y-3">
        {{template "config-backup-items" .}}
    </div>
    {{template "config-backups-load-more" .}}
    {{end}}
</div>
{{end}}