{% extends "admin_base.html" %}
{% import "macros/loading_spinner.html" as spinner %}
{% import "macros/workspace_ui.html" as ui %}

{% block page_title %}XLSX Export/Import{% endblock %}

{% block admin_content %}
<main class="blocks-data-transfer-page blocks-workspace mx-auto w-full max-w-7xl space-y-6 px-4 py-5 text-foreground sm:px-6 sm:py-8" data-plugin="xlsx-export-import">
    <header class="max-w-4xl">
        <p class="text-sm font-semibold text-primary">Data portability</p>
        <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl"><i class="fas fa-file-excel mr-2" aria-hidden="true"></i>XLSX export and import</h1>
        <p class="mt-2 text-sm leading-6 text-muted">Move plugin table data between Blocks instances. Export one workbook per plugin, or import a workbook or ZIP bundle.</p>
    </header>
    {{ ui::notice() }}

    <aside class="rounded-xl border border-warning/30 bg-warning/5 p-4 text-sm leading-6" role="note">
        <p class="font-semibold">Import replaces matching tables in the selected tenant.</p>
        <p class="mt-1 text-muted">Check the destination tenant and keep a current backup before importing. You will be asked to confirm before a file picker opens.</p>
    </aside>

    <section class="space-y-4" aria-label="Select plugin data to export or import">
        <div class="flex flex-col gap-3 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-5">
            <div class="flex flex-wrap gap-2" aria-label="Plugin selection">
                <button type="button" id="select-all" class="blocks-button blocks-button-secondary blocks-button-sm"><i class="fas fa-check-square mr-2" aria-hidden="true"></i>Select all</button>
                <button type="button" id="clear-all" class="blocks-button blocks-button-secondary blocks-button-sm"><i class="far fa-square mr-2" 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 mr-2" aria-hidden="true"></i>Invert selection</button>
            </div>
            <div class="flex flex-wrap gap-2">
                <button type="button" id="export-selected" class="blocks-button blocks-button-primary min-h-11"><i class="fas fa-file-export mr-2" aria-hidden="true"></i>Export selected</button>
                <button type="button" id="import-bundle" class="blocks-button blocks-button-secondary min-h-11"><i class="fas fa-file-import mr-2" aria-hidden="true"></i>Import ZIP bundle</button>
            </div>
        </div>

        {{ ui::table_open(label="Active plugin data tables") }}
        <table class="blocks-data-transfer-table blocks-admin-table blocks-responsive-table w-full">
            <thead><tr>
                <th scope="col" class="w-12"><input type="checkbox" id="master-checkbox" aria-label="Select all plugins"></th>
                <th scope="col">Plugin</th>
                <th scope="col">Status</th>
                <th scope="col">Data tables</th>
                <th scope="col" class="text-right">Actions</th>
            </tr></thead>
            <tbody id="plugins-body">{{ spinner::table_skeleton(colspan=5, lines=3, label="Loading active plugins…") }}</tbody>
        </table>
        {{ ui::table_close() }}
    </section>
</main>

<dialog id="progress-modal" class="blocks-data-transfer-dialog" aria-labelledby="modal-title">
    <section class="blocks-data-transfer-dialog-panel mx-auto flex w-[min(42rem,calc(100vw-2rem))] max-h-[90dvh] flex-col overflow-hidden rounded-2xl border border-divider bg-surface text-foreground shadow-2xl">
        <header class="flex items-start justify-between gap-4 border-b border-divider p-4 sm:p-5">
            <div><p class="text-sm font-semibold text-primary">Data operation</p><h2 id="modal-title" class="mt-1 text-lg font-semibold">Processing…</h2></div>
            <button type="button" id="close-modal-x" class="blocks-button blocks-button-secondary min-h-10 min-w-10 px-3" aria-label="Close operation details">&times;</button>
        </header>
        <div class="min-h-0 space-y-4 overflow-y-auto p-4 sm:p-5">
            <div class="h-3 overflow-hidden rounded-full bg-canvas">
                <div id="progress-bar" class="blocks-data-transfer-progress h-full w-0 rounded-full bg-primary" role="progressbar" aria-label="Operation progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
            </div>
            <p id="status-text" class="text-sm text-muted" role="status" aria-live="polite">Starting operation…</p>
            <div id="log-view" class="blocks-data-transfer-log max-h-72 space-y-1 overflow-y-auto rounded-xl border border-divider bg-canvas p-3 text-sm" aria-label="Operation log"></div>
        </div>
        <footer class="flex justify-end border-t border-divider p-4 sm:p-5">
            <button type="button" id="close-modal-btn" class="blocks-button blocks-button-secondary" hidden>Close</button>
        </footer>
    </section>
</dialog>
{% endblock %}

{% block scripts %}
<script src="/static/js/admin_data_manager.js"></script>
<script src="/static/js/blocks-export-import-wizard.js"></script>
<script src="/plugins/xlsx-export-import/assets/js/xlsx-export-import.js"></script>
{% endblock %}