{{define "config-backups-list"}}
{{if .ConfigBackups}}
<div class="space-y-3">
    {{range .ConfigBackups}}
    <div class="bg-gray-700 rounded-lg p-4 flex items-center justify-between">
        <div>
            <h4 class="font-semibold text-white">{{.Filename}}</h4>
            <p class="text-gray-500 text-xs mt-1">Created: {{.CreatedDate}}</p>
            <p class="text-gray-400 text-sm mt-1">Path: {{.FilePath}}</p>
        </div>
        <div class="flex gap-2">
            <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
                    data-modal="restore-config"
                    data-modal-params='backup_path={{.FilePath}}'>
                <i class="bx bx-history"></i>
                Restore
            </button>
            <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
                    data-modal="delete-backup"
                    data-modal-params='backup_path={{.FilePath}}'>
                <i class="bx bx-trash"></i>
                Delete
            </button>
        </div>
    </div>
    {{end}}
</div>
{{else}}
<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>
{{end}}
{{end}}