{% extends "admin_base.html" %}

{% block page_title %}Tenant Transfer{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/tenant-transfer/assets/css/transfer.ui.css">
{% endblock %}

{% block admin_content %}
<div class="tt-container">
    <div class="header-section text-center">
        <h1><i class="fas fa-exchange-alt"></i> Tenant Transfer</h1>
        <p class="subtitle">Root-only selective transfer: pick source &amp; destination, select data visually, preview, then merge.</p>
    </div>

    <div id="tt-root-error" class="tt-error" role="alert" tabindex="-1" hidden></div>

    <!-- Step 1: tenants -->
    <div class="tt-card">
        <h3><span class="tt-step">1</span> Tenants</h3>
        <div class="tt-tenant-row">
            <div class="tt-field">
                <label for="tt-src">Source tenant</label>
                <select id="tt-src" class="blocks-input"></select>
            </div>
            <button id="tt-swap" class="blocks-button blocks-button-secondary" title="Swap source and destination">
                <i class="fas fa-exchange-alt"></i>
            </button>
            <div class="tt-field">
                <label for="tt-dest">Destination tenant</label>
                <select id="tt-dest" class="blocks-input"></select>
            </div>
            <button id="tt-load" class="blocks-button blocks-button-primary">
                <i class="fas fa-sync"></i> Load data
            </button>
        </div>
    </div>

    <!-- Step 2: selection -->
    <div class="tt-layout">
        <div class="tt-main">
            <div class="tt-card">
                <h3><span class="tt-step">2</span> Select data <span id="tt-src-label" class="tt-muted"></span></h3>
                <div id="tt-resources"></div>
            </div>
            <div class="tt-card">
                <h3><span class="tt-step">2b</span> Generic tables <span class="tt-muted">(any plugin, merged by unique key)</span></h3>
                <div id="tt-generic" class="tt-muted">Load a source tenant first.</div>
            </div>
        </div>
        <div class="tt-side">
            <div class="tt-card tt-basket" id="tt-basket">
                <h3><i class="fas fa-shopping-basket"></i> Basket <span id="tt-basket-count" class="tt-badge">0</span></h3>
                <div id="tt-basket-hint" class="tt-muted">Drag products / categories here, or tick checkboxes.</div>
                <div id="tt-basket-items"></div>
                <div id="tt-basket-summary" class="tt-summary"></div>
            </div>
        </div>
    </div>

    <!-- Step 3: preview + transfer -->
    <div class="tt-card">
        <h3><span class="tt-step">3</span> Preview &amp; transfer</h3>
        <div class="tt-actions">
            <button id="tt-preview" class="blocks-button blocks-button-secondary"><i class="fas fa-eye"></i> Preview</button>
            <button id="tt-transfer" class="blocks-button blocks-button-primary" disabled><i class="fas fa-paper-plane"></i> Transfer</button>
        </div>
        <div id="tt-preview-out"></div>
        <div id="tt-result-out"></div>
    </div>

    <div class="tt-card">
        <h3>Audit log</h3>
        <div class="blocks-responsive-table"><table class="blocks-admin-table responsive-table">
                <thead><tr><th>Run</th><th>Source → Dest</th><th>Status</th><th>By</th><th>At</th></tr></thead>
                <tbody id="tt-runs-body"><tr><td colspan="5" class="text-center">Loading…</td></tr></tbody>
            </table></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/tenant-transfer/assets/js/transfer.js"></script>
{% endblock %}