{% extends "admin_base.html" %}

{% block page_title %}Data Portability{% endblock %}

{% block extra_head %}{% endblock %}

{% block admin_content %}
<main class="blocks-data-transfer-page mx-auto max-w-7xl px-4 pb-10 pt-5 sm:px-6" data-plugin="data-export-import" data-confirm-import="Import data for {plugin}? Matching tables in the current tenant will be cleared and replaced. Continue only if this is the intended tenant and you have a current backup.">
    <header class="mb-6 border-b border-divider pb-4">
        <h1 class="m-0 flex items-center gap-3 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            <span class="inline-flex size-11 items-center justify-center rounded-xl bg-brand/10 text-brand" aria-hidden="true"><i class="fas fa-file-export"></i></span>
            Data portability
        </h1>
        <p class="mb-0 mt-2 max-w-3xl text-sm text-muted">Move selected plugin data between Blocks instances. Importing a matching table replaces its current rows.</p>
    </header>

    <section class="mb-5 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-label="Export and import actions">
        <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
            <div>
                <h2 class="m-0 text-base font-semibold text-foreground">Choose plugin data</h2>
                <p class="mb-0 mt-1 text-sm text-muted">Select one or more active plugins, then export or import their data.</p>
            </div>
            <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end">
                <div class="flex flex-wrap gap-2" aria-label="Selection controls">
                    <button type="button" id="select-all" class="blocks-button blocks-button-secondary blocks-button-sm">Select all</button>
                    <button type="button" id="clear-all" class="blocks-button blocks-button-secondary blocks-button-sm">Clear</button>
                    <button type="button" id="inverse-selection" class="blocks-button blocks-button-secondary blocks-button-sm">Invert</button>
                </div>
                <div class="flex flex-wrap gap-2">
                    <button type="button" id="export-selected" class="blocks-button blocks-button-primary"><i class="fas fa-download" aria-hidden="true"></i> Export selected</button>
                    <button type="button" id="import-bundle" class="blocks-button blocks-button-secondary"><i class="fas fa-upload" aria-hidden="true"></i> Import bundle</button>
                </div>
            </div>
        </div>
    </section>

    <aside class="mb-5 flex gap-3 rounded-xl border border-warning/30 bg-warning/5 p-4 text-sm text-foreground" role="note">
        <i class="fas fa-triangle-exclamation mt-0.5 text-warning" aria-hidden="true"></i>
        <p class="m-0"><strong>Before importing:</strong> confirm you are in the intended tenant and have an up-to-date backup. Data is imported into the currently selected tenant.</p>
    </aside>

    <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="portabilityListTitle">
        <div class="border-b border-divider px-4 py-3 sm:px-5">
            <h2 id="portabilityListTitle" class="m-0 text-sm font-semibold text-foreground">Available plugin data</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="blocks-data-transfer-table w-full min-w-[44rem] text-left text-sm" aria-describedby="portabilityListTitle">
                <thead class="bg-canvas text-xs uppercase tracking-wide text-muted">
                    <tr>
                        <th scope="col" class="w-12 px-4 py-3"><input type="checkbox" id="master-checkbox" class="blocks-checkbox" aria-label="Select all plugins"></th>
                        <th scope="col" class="px-4 py-3">Plugin</th>
                        <th scope="col" class="px-4 py-3">Status</th>
                        <th scope="col" class="px-4 py-3">Tables</th>
                        <th scope="col" class="px-4 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody id="plugins-body" aria-live="polite" class="divide-y divide-divider">
                    <tr><td colspan="5" class="px-4 py-10 text-center text-muted">Loading active plugin data…</td></tr>
                </tbody>
            </table>
        </div>
    </section>
</main>

<dialog id="progress-modal" class="blocks-data-transfer-dialog" aria-labelledby="modal-title" aria-describedby="status-text">
    <section class="blocks-data-transfer-dialog-panel flex max-h-[90dvh] w-full flex-col overflow-hidden rounded-2xl border border-divider bg-surface text-foreground shadow-2xl">
        <header class="flex shrink-0 items-center justify-between gap-4 border-b border-divider px-4 py-3 sm:px-5">
            <h2 id="modal-title" class="m-0 text-lg font-semibold">Processing data</h2>
            <button type="button" id="close-modal-x" class="blocks-icon-button" aria-label="Close progress">&times;</button>
        </header>
        <div class="min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
            <div class="mb-4 h-2 overflow-hidden rounded-full bg-canvas" role="progressbar" aria-label="Operation progress" aria-valuemin="0" aria-valuemax="100">
                <div id="progress-bar" class="blocks-data-transfer-progress h-full w-0 rounded-full bg-brand transition-[width] duration-300"></div>
            </div>
            <p id="status-text" class="m-0 text-sm text-muted" role="status" aria-live="polite">Starting operation…</p>
            <div id="log-view" class="blocks-data-transfer-log mt-4 max-h-64 overflow-y-auto rounded-xl border border-divider bg-canvas p-3 text-sm" aria-label="Operation details"></div>
        </div>
        <footer class="flex justify-end border-t border-divider p-4 sm:px-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/data-export-import/assets/js/portability.js"></script>
<script src="/plugins/data-export-import/assets/js/export-import.js"></script>
{% endblock %}