{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

{% block page_title %}Data Backup Manager{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6" data-plugin="backup-manager">
    {{ crud::shell_open(config_url="/plugins/backup-manager/assets/admin/plugins_list.json", mount_id="backup-manager-list", custom_mount=true) }}

    <div class="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-divider bg-surface p-3 sm:p-4" data-crud-toolbar-extra>
        <div class="flex flex-wrap gap-2">
            <button type="button" id="select-all" class="blocks-button blocks-button-secondary blocks-button-sm"><i class="fas fa-check-square" aria-hidden="true"></i> Select all</button>
            <button type="button" id="clear-all" class="blocks-button blocks-button-secondary blocks-button-sm"><i class="fas fa-square" aria-hidden="true"></i> Clear all</button>
            <button type="button" id="inverse-selection" class="blocks-button blocks-button-secondary blocks-button-sm"><i class="fas fa-exchange-alt" aria-hidden="true"></i> Invert</button>
        </div>
    </div>

    <table class="blocks-admin-table" id="plugins-table">
        <thead></thead>
        <tbody id="plugins-body">
            {{ spinner::table_skeleton(colspan=5, lines=3, label="Loading plugins…") }}
        </tbody>
    </table>

    {{ crud::shell_close() }}
</div>

{{ modal::modal(id="backup-modal", title="Backup and restore", body_html='<div class="mb-4 h-3 overflow-hidden rounded-full bg-canvas" role="progressbar" aria-label="Backup progress"><div id="backup-progress-bar" class="h-full w-0 rounded-full bg-brand transition-all" style="width:0%"></div></div><p id="backup-status-text" class="mb-3 text-sm text-foreground" role="status" aria-live="polite">Ready.</p><div id="backup-log" class="max-h-56 space-y-1 overflow-y-auto rounded-xl border border-divider bg-canvas p-3 font-mono text-xs text-foreground"></div>', footer_html='<button type="button" id="close-modal" class="blocks-button blocks-button-secondary" hidden>Close</button>') }}
{% endblock %}

{% block scripts %}
<script src="/static/js/admin_data_manager.js"></script>
<script src="/plugins/backup-manager/assets/js/backup_list.js"></script>
{% endblock %}