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

{% block page_title %}Google Sheets Export/Import{% endblock %}

{% block extra_head %}{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-screen-2xl space-y-5 px-4 py-6 sm:px-6" data-plugin="google-sheets-export-import">
    <header class="text-center">
        <h1 class="text-2xl font-bold sm:text-3xl"><i class="fab fa-google" aria-hidden="true"></i> Google Sheets Export/Import</h1>
        <p class="mx-auto mt-2 max-w-3xl text-sm text-muted">Sync plugin table data with a shared Google Spreadsheet (tabs named <code>plugin__table</code>).</p>
    </header>

    <div id="gsheets-config-banner" class="blocks-workspace-notice" data-workspace-notice role="status" aria-live="polite" tabindex="-1" hidden></div>

    <div class="flex flex-col gap-4 rounded-2xl border border-divider bg-surface p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
        <div class="flex flex-wrap gap-2">
            <button type="button" id="select-all" class="blocks-button blocks-button-sm blocks-button-secondary"><i class="fas fa-check-square" aria-hidden="true"></i> Select All</button>
            <button type="button" id="clear-all" class="blocks-button blocks-button-sm blocks-button-secondary"><i class="fas fa-square" aria-hidden="true"></i> Clear All</button>
            <button type="button" id="inverse-selection" class="blocks-button blocks-button-sm blocks-button-secondary"><i class="fas fa-exchange-alt" aria-hidden="true"></i> Inverse</button>
        </div>
        <div class="flex flex-wrap gap-2">
            <button type="button" id="test-connection" class="blocks-button blocks-button-secondary"><i class="fas fa-plug" aria-hidden="true"></i> Test connection</button>
            <button type="button" id="export-selected" class="blocks-button blocks-button-primary"><i class="fas fa-cloud-upload-alt" aria-hidden="true"></i> Export Selected</button>
            <button type="button" id="import-selected" class="blocks-button blocks-button-secondary"><i class="fas fa-cloud-download-alt" aria-hidden="true"></i> Import from Sheet</button>
        </div>
    </div>

    <div class="min-w-0 overflow-x-auto rounded-2xl border border-divider bg-surface shadow-sm">
    <table class="w-full blocks-admin-table responsive-table">
        <thead>
            <tr>
                <th width="40"><input type="checkbox" id="master-checkbox" aria-label="Select all"></th>
                <th>Plugin Name</th>
                <th>Status</th>
                <th>Data Tables</th>
                <th class="text-right">Actions</th>
            </tr>
        </thead>
        <tbody id="plugins-body">
            {{ spinner::table_skeleton(colspan=5, lines=3, label="Loading plugins…") }}
        </tbody>
    </table>
    </div>
</div>

{{ modal::modal(id="progress-modal", title='<span id="modal-title">Processing...</span>', body_html='<div class="max-h-96 overflow-y-auto"><div class="mb-4 h-2 overflow-hidden rounded-full bg-canvas"><div id="progress-bar" class="h-full w-0 rounded-full bg-brand transition-[width] duration-300"></div></div><p id="status-text" class="text-sm text-muted" role="status" aria-live="polite">Starting operation...</p><div id="log-view" class="mt-3 space-y-2 break-words"></div></div>', footer_html='<div class="flex justify-end border-t border-divider pt-4"><button type="button" id="close-modal-btn" class="blocks-button blocks-button-secondary hidden">Close</button></div>', modal_class="", close_attrs='id="close-modal-x"') }}
{% 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/google-sheets-export-import/assets/js/google-sheets-export-import.js"></script>
{% endblock %}