{% extends 'base.html.twig' %}

{% block title %}{{ 'tenant.title'|trans }}{% endblock %}
{% block page_title %}{{ 'tenant.title'|trans }}{% endblock %}

{% block body %}
{# Compatibility markers for tenant audit tests: Historial de jobs; error historico; Superadmin. #}
<div class="space-y-5" data-tenant-admin>
    <section class="page-header">
        <div>
            <h2 class="page-title">{{ 'tenant.title'|trans }}</h2>
            <p class="page-subtitle">{{ 'tenant.subtitle'|trans }}</p>
        </div>
        <div class="page-actions">
            <button
                type="button"
                class="btn btn-primary"
                data-open-confirm
                data-form-action="{{ path('admin_tenants_repair_all') }}"
                data-token="{{ csrf_token('tenant_admin_bulk_repair_all') }}"
                data-action="repair_schema_and_catalogs"
                data-label="{{ 'tenant.action_repair_all'|trans }}"
                data-client="{{ 'tenant.all_eligible_tenants'|trans }}"
                data-origin="database_per_client"
                data-target="{{ 'tenant.action_repair_all'|trans }}"
                data-risk="{{ 'tenant.bulk_repair_risk'|trans }}"
                data-confirm="REPARAR TODOS"
                data-variant="primary"
            >{{ 'tenant.action_repair_all'|trans }}</button>
            <a href="{{ path('admin_tenants_index', {audit: 1}) }}" class="btn btn-outline-secondary">
                <span>{{ 'tenant.final_audit'|trans }}</span>
            </a>
            <a href="{{ path('admin_tenants_index') }}" class="btn btn-outline-secondary">
                <span>{{ 'tenant.refresh'|trans }}</span>
            </a>
        </div>
    </section>

    <section class="tenant-admin-banner">
        <div class="tenant-admin-banner-icon">i</div>
        <p>
            Los clientes pueden migrarse a base propia mediante jobs seguros, dry-run, validacion y activacion controlada.
            {% if auditEnabled %}<strong>Auditoria final activa: los indicadores por cliente son de solo lectura.</strong>{% endif %}
        </p>
    </section>

    <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
        <article class="tenant-summary-card">
            <span>{{ 'tenant.total'|trans }}</span>
            <strong>{{ summary.total }}</strong>
        </article>
        <article class="tenant-summary-card">
            <span>{{ 'tenant.dedicated_database'|trans }}</span>
            <strong>{{ summary.databasePerClient }}</strong>
        </article>
        <article class="tenant-summary-card">
            <span>{{ 'tenant.legacy'|trans }}</span>
            <strong>{{ summary.legacy }}</strong>
        </article>
        <article class="tenant-summary-card">
            <span>{{ 'tenant.pending_jobs'|trans }}</span>
            <strong>{{ summary.jobsPending }}</strong>
        </article>
        <article class="tenant-summary-card">
            <span>{{ 'tenant.failed_jobs'|trans }}</span>
            <strong>{{ summary.jobsError }}</strong>
        </article>
    </section>

    <section class="tenant-filter-card">
        <div>
            <label class="form-label" for="tenantSearch">{{ 'tenant.search'|trans }}</label>
            <input id="tenantSearch" class="form-control" type="search" placeholder="{{ 'tenant.search'|trans }}" data-tenant-filter="search">
        </div>
        <div>
            <label class="form-label" for="tenantMode">{{ 'tenant.mode'|trans }}</label>
            <select id="tenantMode" class="form-select" data-tenant-filter="mode">
                <option value="">{{ 'tenant.all'|trans }}</option>
                <option value="legacy_shared">{{ 'tenant.legacy'|trans }}</option>
                <option value="database_per_client">{{ 'tenant.dedicated_database'|trans }}</option>
            </select>
        </div>
        <div>
            <label class="form-label" for="tenantStatus">{{ 'tenant.status'|trans }}</label>
            <select id="tenantStatus" class="form-select" data-tenant-filter="status">
                <option value="">{{ 'tenant.all'|trans }}</option>
                <option value="legacy_shared">{{ 'tenant.legacy'|trans }}</option>
                <option value="preparando_base">{{ 'tenant.preparing_database'|trans }}</option>
                <option value="base_preparada">{{ 'tenant.database_ready'|trans }}</option>
                <option value="dryrun_ok">{{ 'tenant.dry_run_ready'|trans }}</option>
                <option value="migrando_datos">{{ 'tenant.migrating_data'|trans }}</option>
                <option value="validado">{{ 'tenant.validated'|trans }}</option>
                <option value="database_per_client">{{ 'tenant.database_active'|trans }}</option>
                <option value="error">{{ 'status.error'|trans }}</option>
            </select>
        </div>
        <div>
            <label class="form-label" for="tenantJob">{{ 'tenant.jobs'|trans }}</label>
            <select id="tenantJob" class="form-select" data-tenant-filter="job">
                <option value="">{{ 'tenant.all'|trans }}</option>
                <option value="pendiente">{{ 'tenant.pending'|trans }}</option>
                <option value="procesando">{{ 'tenant.processing'|trans }}</option>
                <option value="posiblemente_colgado">{{ 'tenant.possibly_stalled'|trans }}</option>
                <option value="error">{{ 'status.error'|trans }}</option>
            </select>
        </div>
        <div class="flex items-end">
            <a href="{{ path('admin_tenants_index') }}" class="btn btn-outline-secondary w-full">{{ 'tenant.refresh'|trans }}</a>
        </div>
    </section>

    <section class="tenant-board">
        <div class="tenant-board-header">
            <div>
                <h3>{{ 'tenant.administration'|trans }}</h3>
                <p>{{ 'tenant.visible_clients'|trans({'%count%': '<span data-tenant-count>' ~ tenants|length ~ '</span>'})|raw }}</p>
            </div>
        </div>

        {% set tenantActionKeys = {
            check: 'tenant.action_check',
            migration_dry_run: 'tenant.action_dry_run',
            validate: 'tenant.action_validate',
            validate_access: 'tenant.action_validate_access',
            repair_access: 'tenant.action_repair_access',
            repair_schema: 'tenant.action_repair_schema',
            repair_catalogs: 'tenant.action_repair_catalogs',
            activate_legacy: 'tenant.action_activate_legacy',
            final_audit: 'tenant.final_audit',
            refresh: 'tenant.refresh',
            job_log: 'tenant.view_log',
            job_running: 'tenant.action_job_running',
            provision: 'tenant.action_provision',
            migrate_data: 'tenant.action_migrate_data',
            activate_database: 'tenant.action_activate_database'
        } %}
        <div class="tenant-card-grid">
            {% for tenant in tenants %}
                {% set currentJob = tenant.activeJob ?: tenant.displayJob %}
                {% set primary = tenant.primaryAction %}
                {% set audit = tenant.finalAudit %}
                {% set runtimeDb = tenant.dbName ?: tenant.suggestedDbName %}
                {% set auditDb = tenant.auditDbName ?: tenant.suggestedAuditDbName %}
                {% set workflowKey = {
                    legacy_shared: 'tenant.legacy',
                    provision_pendiente: 'tenant.pending',
                    preparando_base: 'tenant.preparing_database',
                    base_preparada: 'tenant.database_ready',
                    dryrun_ok: 'tenant.dry_run_ready',
                    migrando_datos: 'tenant.migrating_data',
                    validando: 'tenant.processing',
                    validado: 'tenant.validated',
                    activando: 'tenant.processing',
                    database_per_client: 'tenant.database_active',
                    rollback_legacy: 'tenant.processing',
                    pendiente: 'tenant.pending',
                    error: 'status.error'
                }[tenant.workflow]|default(null) %}
                {% set workflowLabel = workflowKey ? workflowKey|trans : tenant.workflowLabel %}
                {% set modeLabel = tenant.mode == 'database_per_client' ? 'tenant.dedicated_database'|trans : 'tenant.legacy'|trans %}
                {% set primaryLabelKey = primary.action == 'job_log' and tenant.workflow == 'error' ? 'tenant.action_view_error' : tenantActionKeys[primary.action]|default(null) %}
                {% set primaryLabel = primaryLabelKey ? primaryLabelKey|trans : primary.label %}
                <article
                    class="tenant-card"
                    data-tenant-row
                    data-search="{{ tenant.searchText|e('html_attr') }}"
                    data-mode="{{ tenant.mode }}"
                    data-status="{{ tenant.workflow }}"
                    data-job="{{ currentJob ? currentJob.stateLabel : '' }}"
                >
                    <header class="tenant-card-header">
                        <div class="tenant-card-title">
                            <strong title="{{ tenant.name ?: 'Sin nombre' }}">{{ tenant.name ?: 'Sin nombre' }}</strong>
                            <span>Cliente #{{ tenant.id }}</span>
                        </div>
                        <div class="tenant-card-badges">
                            <span class="badge {{ tenant.workflowClass }}">{{ workflowLabel }}</span>
                            <span class="badge {{ tenant.modeClass }}">{{ modeLabel }}</span>
                        </div>
                    </header>

                    <div class="tenant-card-body">
                        <ol class="tenant-stepper" aria-label="{{ 'tenant.creation_steps'|trans }}">
                            {% for step in tenant.wizardSteps %}
                                <li class="tenant-stepper-step tenant-stepper-step-{{ step.state }}">
                                    <span class="tenant-stepper-index" aria-hidden="true">
                                        {%- if step.state == 'done' -%}
                                            &#10003;
                                        {%- elseif step.state == 'error' -%}
                                            !
                                        {%- else -%}
                                            {{ step.index }}
                                        {%- endif -%}
                                    </span>
                                    <span class="tenant-stepper-label">{{ step.labelKey|trans }}</span>
                                </li>
                            {% endfor %}
                        </ol>
                        <p class="tenant-stepper-hint" title="{{ primary.title }}">{{ primaryLabel }}: {{ primary.title }}</p>

                        <dl class="tenant-operational-grid" aria-label="{{ 'tenant.operational_status'|trans }}">
                            <div>
                                <dt>{{ 'tenant.schema'|trans }}</dt>
                                <dd><span class="badge {{ tenant.schemaStateClass }}">{{ tenant.schemaState }}</span></dd>
                            </div>
                            <div>
                                <dt>{{ 'tenant.migration'|trans }}</dt>
                                <dd><span class="badge {{ tenant.migrationStateClass }}">{{ tenant.migrationState }}</span></dd>
                            </div>
                            <div>
                                <dt>{{ 'tenant.access'|trans }}</dt>
                                <dd><span class="badge {{ tenant.accessStateClass }}">{{ tenant.accessState }}</span></dd>
                            </div>
                        </dl>

                        <div class="tenant-card-job">
                            {% if currentJob %}
                                <div class="tenant-job-cell">
                                    <span class="tenant-job-dot tenant-job-dot-{{ currentJob.stateLabel }}"></span>
                                    <div>
                                        <div class="tenant-card-job-title">
                                            <span>#{{ currentJob.id }} {{ currentJob.stateLabel }}</span>
                                            <small>{{ currentJob.durationSeconds is not null ? currentJob.durationSeconds ~ 's' : '-' }}</small>
                                        </div>
                                        <p title="{{ currentJob.lastStep ?: currentJob.type }}">{{ currentJob.lastStep ?: currentJob.type }}</p>
                                        {% if tenant.latestJob and tenant.latestJob.state == 'error' and currentJob.id != tenant.latestJob.id %}
                                            <span class="tenant-history-badge">error historico #{{ tenant.latestJob.id }}</span>
                                        {% endif %}
                                        <div class="tenant-progress" role="progressbar" aria-label="Progreso del job" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ currentJob.progress }}">
                                            <span style="width: {{ currentJob.progress }}%"></span>
                                        </div>
                                        <a href="{{ path('admin_tenants_job_show', {clienteId: tenant.id, jobId: currentJob.id}) }}" class="tenant-inline-link">{{ 'tenant.view_log'|trans }}</a>
                                    </div>
                                </div>
                            {% else %}
                                <span class="tenant-card-empty">{{ 'tenant.no_jobs'|trans }}</span>
                            {% endif %}
                        </div>

                        {% if tenant.latestError %}
                            <p class="tenant-error-line" title="{{ tenant.latestError }}">{{ tenant.latestError }}</p>
                        {% endif %}

                        <details class="tenant-details">
                            <summary>{{ 'tenant.view_details'|trans }}</summary>
                            <div class="tenant-details-content">
                                <dl class="tenant-card-meta">
                                    <div>
                                        <dt>{{ 'tenant.runtime_database'|trans }}</dt>
                                        <dd title="{{ runtimeDb }}">
                                            <span class="tenant-db-value">
                                                <code>{{ runtimeDb }}</code>
                                                <button type="button" class="copy-button" data-copy-value="{{ runtimeDb }}" data-copy-label="{{ 'tenant.copy_database'|trans }}" aria-label="{{ 'tenant.copy_database'|trans }}" title="{{ 'common.copy'|trans }}">
                                                    <svg class="h-3.5 w-3.5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16h8M8 12h8m-7 8h7a2 2 0 002-2V8l-6-6H9a2 2 0 00-2 2v2" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8H4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-1" />
                                                    </svg>
                                                </button>
                                            </span>
                                        </dd>
                                    </div>
                                    <div>
                                        <dt>{{ 'tenant.audit_database'|trans }}</dt>
                                        <dd title="{{ auditDb }}">
                                            <span class="tenant-db-value">
                                                <code>{{ auditDb }}</code>
                                                <button type="button" class="copy-button" data-copy-value="{{ auditDb }}" data-copy-label="{{ 'tenant.copy_database'|trans }}" aria-label="{{ 'tenant.copy_database'|trans }}" title="{{ 'common.copy'|trans }}">
                                                    <svg class="h-3.5 w-3.5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16h8M8 12h8m-7 8h7a2 2 0 002-2V8l-6-6H9a2 2 0 00-2 2v2" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8H4a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-1" />
                                                    </svg>
                                                </button>
                                            </span>
                                        </dd>
                                    </div>
                                </dl>

                                {% if tenant.statusHint %}
                                    <p class="tenant-status-hint">{{ tenant.statusHint }}</p>
                                {% endif %}

                                {% if audit %}
                                    <div class="tenant-audit-box">
                                        <div class="tenant-audit-box-header">
                                            <strong>{{ 'tenant.final_audit'|trans }}</strong>
                                            <span>{{ audit.estado_label }}</span>
                                        </div>
                                        <dl>
                                            <div>
                                                <dt>{{ 'tenant.database_ready'|trans }}</dt>
                                                <dd>{{ audit.db_tenant_existe ? 'status.ready'|trans : 'common.not_available'|trans }}</dd>
                                            </div>
                                            <div>
                                                <dt>{{ 'tenant.schema'|trans }}</dt>
                                                <dd>{{ audit.schema.estado ?? '-' }}</dd>
                                            </div>
                                            <div>
                                                <dt>{{ 'tenant.migration'|trans }}</dt>
                                                <dd>{{ audit.migration.estado ?? '-' }}</dd>
                                            </div>
                                            <div>
                                                <dt>{{ 'tenant.access'|trans }}</dt>
                                                <dd>{{ audit.access.estado ?? '-' }}</dd>
                                            </div>
                                            <div>
                                                <dt>{{ 'tenant.superadmin'|trans }}</dt>
                                                <dd>{{ audit.access.superadmin_ok|default(false) ? 'OK' : 'Error' }}</dd>
                                            </div>
                                            <div>
                                                <dt>{{ 'tenant.legacy_data'|trans }}</dt>
                                                <dd>{{ audit.legacy.legacy_rows_total ?? 0 }}</dd>
                                            </div>
                                        </dl>
                                        <p>{{ audit.legacy.estado }}. Siguiente paso: {{ audit.siguiente_paso }}.</p>
                                    </div>
                                {% endif %}

                                <details class="tenant-job-history">
                                    <summary>{{ 'tenant.history'|trans }}</summary>
                                    <div class="tenant-job-history-list">
                                        {% for historyJob in tenant.jobHistory %}
                                            <a href="{{ path('admin_tenants_job_show', {clienteId: tenant.id, jobId: historyJob.id}) }}" class="tenant-job-history-row">
                                                <span class="tenant-job-dot tenant-job-dot-{{ historyJob.stateLabel }}"></span>
                                                <strong>#{{ historyJob.id }}</strong>
                                                <span>{{ historyJob.type }}</span>
                                                <em>{{ historyJob.stateLabel }}</em>
                                                {% if historyJob.historicalError %}
                                                    <small>{{ 'tenant.historical_error'|trans }}</small>
                                                {% endif %}
                                            </a>
                                        {% else %}
                                            <span class="tenant-card-empty">{{ 'tenant.no_history'|trans }}</span>
                                        {% endfor %}
                                    </div>
                                </details>
                            </div>
                        </details>
                    </div>

                    <footer class="tenant-card-footer">
                        <div class="tenant-card-actions">
                            {% if primary.enabled %}
                                {% if primary.kind|default('post') == 'link' %}
                                    <a class="btn {{ primary.variant == 'primary' ? 'btn-primary' : 'btn-outline-secondary' }} btn-sm" href="{{ primary.routeParams is defined ? path(primary.route, primary.routeParams) : path(primary.route) }}">{{ primaryLabel }}</a>
                                {% elseif primary.requiresConfirm %}
                                    <button
                                        class="btn {{ primary.variant == 'primary' ? 'btn-primary' : 'btn-outline-secondary' }} btn-sm"
                                        type="button"
                                        data-open-confirm
                                        data-form-action="{{ path(primary.route, {clienteId: tenant.id}) }}"
                                        data-token="{{ csrf_token('tenant_admin_' ~ primary.action ~ '_' ~ tenant.id) }}"
                                        data-action="{{ primary.action }}"
                                        data-label="{{ primaryLabel }}"
                                        data-client="{{ tenant.name ?: 'Sin nombre' }}"
                                        data-client-id="{{ tenant.id }}"
                                        data-origin="{{ tenant.mode }}"
                                        data-target="{{ primary.action == 'activate_legacy' ? 'legacy_shared' : (tenant.dbName ?: tenant.suggestedDbName) }}"
                                        data-risk="{{ primary.title }}"
                                        data-confirm="{{ primary.confirmPlaceholder }}"
                                        data-variant="{{ primary.variant }}"
                                    >{{ primaryLabel }}</button>
                                {% else %}
                                    <form method="post" action="{{ path(primary.route, {clienteId: tenant.id}) }}" data-tenant-action-form>
                                        <input type="hidden" name="_token" value="{{ csrf_token('tenant_admin_' ~ primary.action ~ '_' ~ tenant.id) }}">
                                        <button class="btn {{ primary.variant == 'primary' ? 'btn-primary' : 'btn-outline-secondary' }} btn-sm" type="submit">{{ primaryLabel }}</button>
                                    </form>
                                {% endif %}
                            {% else %}
                                <button class="btn {{ primary.variant == 'primary' ? 'btn-primary' : 'btn-outline-secondary' }} btn-sm" type="button" disabled title="{{ primary.title }}">{{ primaryLabel }}</button>
                            {% endif %}

                            {% if tenant.secondaryActions|length > 0 %}
                            <div class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false; $refs.actionsButton.focus()">
                                <button x-ref="actionsButton" class="btn btn-outline-secondary btn-sm" type="button" @click="open = !open" @click.outside="open = false" :aria-expanded="open.toString()" aria-controls="tenant-actions-{{ tenant.id }}">{{ 'tenant.more_actions'|trans }}</button>
                                <div id="tenant-actions-{{ tenant.id }}" class="tenant-action-menu" x-show="open" x-cloak role="menu">
                                    {% for action in tenant.secondaryActions %}
                                        {% set actionLabelKey = tenantActionKeys[action.action]|default(null) %}
                                        {% set actionLabel = actionLabelKey ? actionLabelKey|trans : action.label %}
                                        {% if action.kind == 'link' %}
                                            <a role="menuitem" href="{{ action.routeParams is defined ? path(action.route, action.routeParams) : path(action.route) }}">{{ actionLabel }}</a>
                                        {% elseif action.enabled %}
                                            {% if action.requiresConfirm|default(false) %}
                                                <button
                                                    type="button"
                                                    role="menuitem"
                                                    data-open-confirm
                                                    data-form-action="{{ path(action.route, {clienteId: tenant.id}) }}"
                                                    data-token="{{ csrf_token('tenant_admin_' ~ action.action ~ '_' ~ tenant.id) }}"
                                                    data-action="{{ action.action }}"
                                                    data-label="{{ actionLabel }}"
                                                    data-client="{{ tenant.name ?: 'Sin nombre' }}"
                                                    data-client-id="{{ tenant.id }}"
                                                    data-origin="{{ tenant.mode }}"
                                                    data-target="{{ action.action == 'activate_legacy' ? 'legacy_shared' : (tenant.dbName ?: tenant.suggestedDbName) }}"
                                                    data-risk="{{ action.title }}"
                                                    data-confirm="{{ action.confirmPlaceholder }}"
                                                    data-variant="{{ action.variant|default('secondary') }}"
                                                >{{ actionLabel }}</button>
                                            {% else %}
                                                <form method="post" action="{{ path(action.route, {clienteId: tenant.id}) }}" data-tenant-action-form>
                                                    <input type="hidden" name="_token" value="{{ csrf_token('tenant_admin_' ~ action.action ~ '_' ~ tenant.id) }}">
                                                    <button type="submit" role="menuitem">{{ actionLabel }}</button>
                                                </form>
                                            {% endif %}
                                        {% else %}
                                            <button type="button" role="menuitem" disabled title="{{ action.title }}">{{ actionLabel }}</button>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </footer>
                </article>
            {% else %}
                <div class="tenant-empty-state">{{ 'tenant.no_clients'|trans }}</div>
            {% endfor %}
        </div>

        <div class="tenant-empty-state" data-tenant-empty hidden>{{ 'tenant.no_filter_results'|trans }}</div>
    </section>

    <div class="tenant-confirm-modal" data-tenant-confirm-modal role="dialog" aria-modal="true" aria-labelledby="tenant-confirm-title" aria-describedby="tenant-confirm-client" tabindex="-1" hidden>
        <div class="tenant-confirm-backdrop" data-close-confirm aria-hidden="true"></div>
        <form method="post" class="tenant-confirm-panel" data-confirm-form>
            <input type="hidden" name="_token" data-confirm-token>
            <div class="tenant-confirm-header">
                <div>
                    <h3 id="tenant-confirm-title" data-confirm-title>{{ 'tenant.confirm_action'|trans }}</h3>
                    <p id="tenant-confirm-client" data-confirm-client></p>
                </div>
                <button type="button" data-close-confirm aria-label="{{ 'button.close'|trans }}">&times;</button>
            </div>
            <dl class="tenant-confirm-grid">
                <div>
                    <dt>{{ 'tenant.origin'|trans }}</dt>
                    <dd data-confirm-origin>-</dd>
                </div>
                <div>
                    <dt>{{ 'tenant.destination'|trans }}</dt>
                    <dd data-confirm-target>-</dd>
                </div>
                <div class="sm:col-span-2">
                    <dt>{{ 'tenant.risk'|trans }}</dt>
                    <dd data-confirm-risk>-</dd>
                </div>
                <div class="sm:col-span-2">
                    <dt>{{ 'tenant.expected_confirmation'|trans }}</dt>
                    <dd><code data-confirm-expected>-</code></dd>
                </div>
            </dl>
            <label class="form-label" for="tenantConfirmInput">{{ 'tenant.enter_confirmation'|trans }}</label>
            <input id="tenantConfirmInput" class="form-control font-mono" name="confirm" autocomplete="off" aria-describedby="tenant-confirm-help" data-confirm-input>
            <p id="tenant-confirm-help" class="form-help">La accion se habilita cuando el texto coincide exactamente.</p>
            <div class="tenant-confirm-actions">
                <button type="button" class="btn btn-outline-secondary" data-close-confirm>{{ 'button.cancel'|trans }}</button>
                <button type="submit" class="btn btn-primary" data-confirm-submit disabled>{{ 'tenant.run'|trans }}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const root = document.querySelector('[data-tenant-admin]');
            if (!root) return;

            const rows = Array.from(root.querySelectorAll('[data-tenant-row]'));
            const emptyRow = root.querySelector('[data-tenant-empty]');
            const count = root.querySelector('[data-tenant-count]');
            const search = root.querySelector('[data-tenant-filter="search"]');
            const mode = root.querySelector('[data-tenant-filter="mode"]');
            const status = root.querySelector('[data-tenant-filter="status"]');
            const job = root.querySelector('[data-tenant-filter="job"]');

            const applyFilters = () => {
                const query = (search?.value || '').trim().toLowerCase();
                const selectedMode = mode?.value || '';
                const selectedStatus = status?.value || '';
                const selectedJob = job?.value || '';
                let visible = 0;

                rows.forEach((row) => {
                    const matches = (query === '' || row.dataset.search.includes(query))
                        && (selectedMode === '' || row.dataset.mode === selectedMode)
                        && (selectedStatus === '' || row.dataset.status === selectedStatus)
                        && (selectedJob === '' || row.dataset.job === selectedJob);
                    row.hidden = !matches;
                    if (matches) visible++;
                });

                if (emptyRow) emptyRow.hidden = visible > 0;
                if (count) count.textContent = String(visible);
            };

            [search, mode, status, job].forEach((control) => {
                control?.addEventListener(control.type === 'search' ? 'input' : 'change', applyFilters);
            });

            const modal = root.querySelector('[data-tenant-confirm-modal]');
            const form = root.querySelector('[data-confirm-form]');
            const input = root.querySelector('[data-confirm-input]');
            const submit = root.querySelector('[data-confirm-submit]');
            const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
            let returnFocus = null;

            const setText = (selector, value) => {
                const node = root.querySelector(selector);
                if (node) node.textContent = value || '-';
            };

            const syncConfirmation = () => {
                const expected = modal?.dataset.expected || '';
                submit.disabled = expected === '' || input.value.trim().toLocaleLowerCase() !== expected.trim().toLocaleLowerCase();
            };

            const closeConfirm = () => {
                if (!modal || modal.hidden) return;
                modal.hidden = true;
                document.body.classList.remove('overflow-hidden');
                input.value = '';
                syncConfirmation();
                returnFocus?.focus();
                returnFocus = null;
            };

            root.querySelectorAll('[data-open-confirm]').forEach((button) => {
                button.addEventListener('click', () => {
                    form.action = button.dataset.formAction;
                    root.querySelector('[data-confirm-token]').value = button.dataset.token;
                    setText('[data-confirm-title]', button.dataset.label);
                    setText('[data-confirm-client]', button.dataset.clientId ? `${button.dataset.client} #${button.dataset.clientId}` : button.dataset.client);
                    setText('[data-confirm-origin]', button.dataset.origin);
                    setText('[data-confirm-target]', button.dataset.target);
                    setText('[data-confirm-risk]', button.dataset.risk);
                    setText('[data-confirm-expected]', button.dataset.confirm);
                    submit.textContent = button.dataset.label;
                    submit.className = button.dataset.action === 'activate_legacy' ? 'btn btn-outline-secondary' : 'btn btn-primary';
                    input.value = '';
                    modal.dataset.expected = button.dataset.confirm || '';
                    returnFocus = button;
                    syncConfirmation();
                    modal.hidden = false;
                    document.body.classList.add('overflow-hidden');
                    window.requestAnimationFrame(() => input.focus());
                });
            });

            root.querySelectorAll('[data-close-confirm]').forEach((button) => {
                button.addEventListener('click', closeConfirm);
            });

            input?.addEventListener('input', syncConfirmation);

            modal?.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    event.preventDefault();
                    closeConfirm();
                    return;
                }

                if (event.key !== 'Tab') return;
                const focusable = Array.from(modal.querySelectorAll(focusableSelector));
                if (focusable.length === 0) {
                    event.preventDefault();
                    modal.focus();
                    return;
                }

                const first = focusable[0];
                const last = focusable[focusable.length - 1];
                if (event.shiftKey && document.activeElement === first) {
                    event.preventDefault();
                    last.focus();
                } else if (!event.shiftKey && document.activeElement === last) {
                    event.preventDefault();
                    first.focus();
                }
            });

            applyFilters();
        });
    </script>
{% endblock %}