{% extends "admin_base.html" %}

{% block page_title %}Ops Script{% endblock %}

{% block admin_content %}
<div class="mx-auto flex w-full max-w-screen-2xl flex-col gap-4 p-4 text-foreground sm:p-6" data-plugin="core-tenants"
     data-bound-tenant="{{ bound_tenant | default(value='') }}">
    <div class="flex flex-col justify-between gap-4 rounded-2xl border border-divider bg-surface p-4 sm:flex-row sm:items-center sm:p-6">
        <div class="min-w-0">
            <p class="m-0 text-sm text-muted">Run platform automation scripts against the ops action catalog.</p>
            {% if bound_tenant %}
            <p class="mb-0 mt-2 text-sm text-muted">Bound tenant: <code class="rounded bg-canvas px-1.5 py-1">$tenant</code> → <strong class="text-foreground">{{ bound_tenant }}</strong></p>
            {% endif %}
        </div>
        <div class="flex flex-wrap gap-2">
            <a class="blocks-button blocks-button-secondary blocks-button-sm" href="/plugins/core-tenants/tenants">Tenants</a>
            {% if bound_tenant %}
            <a class="blocks-button blocks-button-secondary blocks-button-sm" href="/plugins/core-tenants/god-mode/{{ bound_tenant }}">God Mode</a>
            {% endif %}
        </div>
    </div>

    <div class="grid min-w-0 grid-cols-1 items-start gap-4 xl:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]">
        <aside class="max-h-[min(70vh,40rem)] overflow-auto rounded-2xl border border-divider bg-surface p-4" aria-label="Command catalog">
            <div class="mb-3 flex flex-col gap-3">
                <h2 class="m-0 text-base font-semibold text-foreground">Commands</h2>
                <input type="search" id="opsCatalogFilter" class="blocks-input" placeholder="Filter commands…" autocomplete="off">
            </div>
            <ul id="opsCatalogList" class="m-0 list-none divide-y divide-divider p-0"></ul>
        </aside>

        <section class="min-w-0 rounded-2xl border border-divider bg-surface p-4 sm:p-6">
            <label class="mb-2 block text-sm font-semibold text-foreground" for="opsScriptSource">Script <span class="font-normal text-muted">(Ctrl+Space autocomplete)</span></label>
            <div id="opsEditorWrap" class="relative min-w-0">
                <textarea id="opsScriptSource" class="blocks-input min-h-80 resize-y font-mono text-sm leading-relaxed" rows="18" spellcheck="false"
                          placeholder="# example&#10;tenant.create name=acme&#10;tenant.apply_recipe name=acme recipe=ecom&#10;favicon.generate_og name=acme"></textarea>
                <div id="opsSuggest" class="absolute z-20 max-h-56 min-w-64 max-w-[90vw] overflow-auto rounded-xl border border-divider bg-surface p-1 shadow-xl" hidden role="listbox" aria-label="Autocomplete"></div>
            </div>
            <div class="my-4 flex flex-wrap items-center gap-3">
                <label class="inline-flex min-h-11 items-center gap-2 text-sm text-foreground">
                    <input type="checkbox" id="opsConfirmDestructive" class="size-5 accent-brand">
                    Confirm destructive actions
                </label>
                <button type="button" class="blocks-button blocks-button-secondary" id="opsValidateBtn">Dry run</button>
                <button type="button" class="blocks-button blocks-button-primary" id="opsRunBtn">Run</button>
            </div>
            <h2 class="mb-2 text-base font-semibold text-foreground">Transcript</h2>
            <pre id="opsTranscript" class="max-h-96 min-h-32 overflow-auto whitespace-pre-wrap break-words rounded-xl border border-divider bg-canvas p-3 font-mono text-xs text-foreground" aria-live="polite"></pre>
        </section>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/core-tenants/assets/js/admin_ops_script.js?v={{ asset_version | default(value='1') }}"></script>
{% endblock %}