{% from "_custom_select.html" import custom_select %}
{# templates/admin_modals/backups_modal.html #}
<div id="backups-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="backups-modal-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-2xl h-auto max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">

        <!-- Header -->
        <div class="p-8 pb-4 flex-shrink-0 flex items-center justify-between bg-white/[0.02] border-b border-white/5">
            <div class="flex items-center">
                <div class="p-2.5 bg-emerald-500/10 rounded-xl border border-emerald-500/20 mr-4 shadow-sm">
                    <i data-lucide="archive" class="h-6 w-6 text-emerald-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">Backups</h3>
                    <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Automatic & Manual Backups</p>
                </div>
            </div>
            <button type="button"
                class="close-modal-btn p-3 bg-white/[0.03] hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <!-- Scrollable Body -->
        <div class="flex-1 overflow-y-auto px-8 py-4 space-y-6 custom-scrollbar">
            {# Automatic backups config #}
            <div class="p-6 bg-white/[0.03] rounded-2xl border border-white/5 space-y-4">
                <h3 class="text-sm font-semibold text-white">Automatic Backups</h3>

                <div class="flex items-center justify-between">
                    <span class="text-sm text-zinc-400">Enable automatic backups</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" data-setting-key="backup_enabled" class="sr-only peer setting-toggle" {% if settings.get('backup_enabled')=='1' %}checked{% endif %}>
                        <div class="w-11 h-6 bg-zinc-800 rounded-full peer peer-focus:ring-2 peer-focus:ring-emerald-500/30 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border-zinc-400 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500 peer-checked:after:bg-white"></div>
                    </label>
                </div>

                <div>
                    <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Backup interval</label>
                    {% set bi = settings.get('backup_interval_hours') or '24' %}
                    {% set bi_labels = {"1": "Every hour", "6": "Every 6 hours", "12": "Every 12 hours", "24": "Every 24 hours"} %}
                    {{ custom_select(id="backup-interval-select", data_setting_key="backup_interval_hours", options=[{"value": "1", "label": "Every hour"}, {"value": "6", "label": "Every 6 hours"}, {"value": "12", "label": "Every 12 hours"}, {"value": "24", "label": "Every 24 hours"}], selected_value=bi, selected_label=bi_labels.get(bi, "Every 24 hours"), mode="form", class="setting-select mt-1 w-full") }}
                </div>

                <div>
                    <label class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Backups to retain</label>
                    <input type="number" id="backup-retention-input" data-setting-key="backup_retention_count" class="setting-number-input mt-1 w-full bg-white/[0.05] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white" value="{{ settings.get('backup_retention_count') or 5 }}" min="1" max="50">
                </div>

                <div class="space-y-2 pt-2">
                    <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Include in backup</p>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" data-setting-key="backup_include_db" class="rounded border-white/30 bg-white/5 text-emerald-500 setting-toggle" {% if settings.get('backup_include_db', '1')=='1' %}checked{% endif %}>
                        <span class="text-sm text-zinc-400">Database (git.db / PostgreSQL)</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" data-setting-key="backup_include_storage" class="rounded border-white/30 bg-white/5 text-emerald-500 setting-toggle" {% if settings.get('backup_include_storage', '1')=='1' %}checked{% endif %}>
                        <span class="text-sm text-zinc-400">Repository storage</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" data-setting-key="backup_include_pfp" class="rounded border-white/30 bg-white/5 text-emerald-500 setting-toggle" {% if settings.get('backup_include_pfp', '1')=='1' %}checked{% endif %}>
                        <span class="text-sm text-zinc-400">Profile pictures</span>
                    </label>
                </div>
            </div>

            {# Backup now #}
            <div class="flex items-center justify-between p-6 bg-white/[0.03] rounded-2xl border border-white/5">
                <div>
                    <h3 class="text-sm font-semibold text-white">Create Backup Now</h3>
                    <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Create a backup immediately using current settings.</p>
                </div>
                <button id="backup-now-btn" type="button"
                    class="glass-button no-hover-lift px-6 py-3 rounded-xl text-[10px] font-black uppercase text-emerald-500 hover:bg-emerald-500/10 flex items-center">
                    <i data-lucide="save" class="h-4 w-4 mr-2"></i> Backup Now
                </button>
            </div>

            {# Backup list #}
            <div class="p-6 bg-white/[0.03] rounded-2xl border border-white/5">
                <h3 class="text-sm font-semibold text-white mb-4">Available Backups</h3>
                <div id="backups-list-container" class="space-y-2 max-h-48 overflow-y-auto custom-scrollbar">
                    <p id="backups-list-empty" class="text-sm text-zinc-500">Loading...</p>
                    <template id="backup-row-tpl">
                        <div class="backup-row flex items-center justify-between p-3 bg-white/[0.02] rounded-xl border border-white/5" data-filename="">
                            <div class="flex-1 min-w-0">
                                <p class="backup-filename text-sm font-mono text-white truncate"></p>
                                <p class="backup-meta text-[10px] text-zinc-500"></p>
                            </div>
                            <div class="flex items-center gap-2 flex-shrink-0 ml-2">
                                <a class="backup-download-btn glass-button no-hover-lift px-3 py-1.5 rounded-lg text-[10px] font-black uppercase text-emerald-500 hover:bg-emerald-500/10" href="#" title="Download">
                                    <i data-lucide="download" class="h-3.5 w-3.5 inline"></i>
                                </a>
                                <button type="button" class="backup-restore-btn glass-button no-hover-lift px-3 py-1.5 rounded-lg text-[10px] font-black uppercase text-amber-500 hover:bg-amber-500/10">
                                    <i data-lucide="rotate-ccw" class="h-3.5 w-3.5 inline"></i> Restore
                                </button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="p-8 pt-4 flex-shrink-0 flex justify-end border-t border-white/5">
            <button type="button"
                class="close-modal-btn glass-button no-hover-lift px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white">Close</button>
        </div>
    </div>
</div>