{% extends "admin_base.html" %}

{% block page_title %}Create a workspace{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-3xl space-y-6 px-4 py-6 sm:px-6 lg:py-8" data-plugin="core-tenants" id="tenantProvisionRoot"
     data-domain="{{ domain_name | default(value='') }}"
     data-is-config="{% if is_root_tenant | default(value=false) %}true{% else %}false{% endif %}">
    <header class="space-y-2">
        <h1 class="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Create a workspace</h1>
        <p class="max-w-2xl text-sm leading-6 text-muted">Choose an application, plan and website options, then review before creating your workspace. The Tenants admin page also offers basic name-only creation.</p>
    </header>

    {% if not is_root_tenant | default(value=false) %}
    <div class="rounded-xl border border-danger bg-danger/10 p-4 text-sm text-foreground" role="alert">
        This page is only available on the platform (config) tenant.
    </div>
    {% else %}
    <ol class="flex flex-wrap gap-2" id="provisionSteps" aria-label="Provision steps"></ol>

    <section class="space-y-5 rounded-2xl border border-divider bg-surface p-4 text-foreground shadow-sm sm:p-6" id="provisionFormHost" aria-label="Workspace setup">
        <div id="provision-form-fields"></div>
        <div id="provisionExtraPluginsHost" hidden>
            <label class="mb-2 block text-sm font-semibold text-foreground" for="provisionPluginSearch">Extra features</label>
            <input type="search" id="provisionPluginSearch" class="blocks-input mb-3" placeholder="Search features…">
            <div class="max-h-56 space-y-2 overflow-auto rounded-xl border border-divider bg-canvas p-3" id="provisionPluginList"></div>
        </div>
        <p class="mt-4 text-sm text-muted" id="provisionPreview" hidden>
            Will create <strong id="provisionPreviewHost">…</strong>.{{ domain_name | default(value='') }}
        </p>
    </section>

    <section class="space-y-4 rounded-2xl border border-divider bg-surface p-4 text-foreground shadow-sm sm:p-6" id="provisionReview" hidden aria-labelledby="provisionReviewTitle">
        <h2 class="text-lg font-semibold" id="provisionReviewTitle">Review</h2>
        <dl class="grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-2" id="provisionReviewBody"></dl>
    </section>

    <div class="flex flex-wrap items-center justify-between gap-3">
        <button type="button" class="blocks-button blocks-button-secondary" id="provisionBackBtn" hidden>Back</button>
        <div class="ml-auto flex flex-wrap items-center justify-end gap-3">
            <a class="blocks-button blocks-button-secondary" href="/plugins/core-tenants/tenants">Tenants list</a>
            <button type="button" class="blocks-button blocks-button-primary" id="provisionNextBtn">Next</button>
            <button type="button" class="blocks-button blocks-button-success" id="provisionSubmitBtn" hidden>Create workspace</button>
        </div>
    </div>

    <section class="space-y-3 rounded-2xl border border-divider bg-canvas p-4" aria-label="Saved setup and recovery">
        <p class="text-sm text-muted">Setup progress is saved. If your connection is interrupted, return to this page and resume with the same details.</p>
        <div class="flex flex-wrap gap-2">
            <button type="button" class="blocks-button blocks-button-secondary" id="provisionLoadBtn">Load saved setup by workspace name</button>
            <button type="button" class="blocks-button blocks-button-secondary" id="provisionLeaveBtn" hidden>Work on another workspace</button>
            <button type="button" class="blocks-button blocks-button-secondary" id="provisionRefreshBtn" hidden>Check saved progress</button>
        </div>
        <p id="provisionSavedProgress" class="text-sm text-muted" role="status" aria-live="polite"></p>
        <div class="space-y-3" id="provisionRecoverySteps"></div>
        <div id="provisionStatus" class="rounded-xl border border-divider bg-surface p-4 text-sm text-foreground" hidden role="status" aria-live="polite"></div>
    </section>
    {% endif %}
</main>
{% endblock %}

{% block scripts %}
{% if is_root_tenant | default(value=false) %}
<script src="/static/js/form-builder.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/static/js/blocks-provisioning-session.js"></script>
<script src="/plugins/core-tenants/assets/js/provision.js?v={{ asset_version | default(value='1') }}" defer></script>
{% endif %}
{% endblock %}