{% extends "base.html" %}

{% block content %}
<div id="onboarding-payment-config" hidden
     data-gateway-script-url="{{ gateway_script_url | default(value='') }}"
     data-active-gateway="{{ active_gateway | default(value='') }}"
     data-online-payment-available="{% if online_payment_available %}true{% else %}false{% endif %}"></div>

<main data-plugin="tenant-onboarding" class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
    {% if plans %}
    {% if logged_in | default(value=false) %}
    <section id="onboarding-recovery" class="mb-8 hidden rounded-2xl border border-warning bg-surface p-5 sm:p-6" aria-labelledby="onboarding-recovery-title">
        <h2 id="onboarding-recovery-title" class="text-xl font-bold text-foreground">Finish your workspace setup</h2>
        <p id="onboarding-recovery-message" class="mt-2 text-sm text-muted" role="status" aria-live="polite"></p>
        <button type="button" id="resume-onboarding" class="blocks-button blocks-button-primary mt-4 w-full sm:w-auto">Finish setup without another payment</button>
    </section>
    {% endif %}

    <header class="mx-auto mb-10 max-w-3xl text-center">
        <p class="text-sm font-semibold uppercase tracking-wide text-brand">Start your workspace</p>
        <h1 class="mt-3 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">Launch Your Business with {{ brand_name | default(value=site_name) | default(value=tenant_name) | default(value=app_name) }}</h1>
        <p class="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-muted">Start your {{ trial | default(value=14) }}-day trial and experience the power of a unified business platform.</p>
    </header>

    <section class="flex flex-wrap justify-center gap-6" aria-label="Available plans">
        {% for plan in plans %}
        <article class="relative flex w-full max-w-md flex-col rounded-2xl border bg-surface p-6 text-center shadow-sm sm:p-8 {% if plan.name == 'Premium' %}border-2 border-brand{% else %}border-divider{% endif %}">
            {% if plan.name == 'Premium' %}<span class="mx-auto -mt-10 mb-3 rounded-full bg-brand px-3 py-1 text-xs font-bold uppercase tracking-wide text-white">Recommended</span>{% endif %}
            <h2 class="text-xl font-bold text-foreground">{{ plan.name }}</h2>
            <div class="my-5 flex flex-wrap items-baseline justify-center gap-x-2">
                <span class="text-4xl font-extrabold text-brand">{{ currency_symbol | default(value="") }}{{ plan.trial_price }}</span>
                <span class="text-sm text-muted">for {{ plan.trial_days }} trial days</span>
            </div>
            <p class="text-sm text-muted">Then {{ currency_symbol | default(value="") }}{{ plan.renewal_price }} every 30 days.</p>

            <div class="mt-8 w-full text-left">
                {% if logged_in | default(value=false) %}
                <div class="blocks-form-field">
                    <label for="tenant-name">Choose your workspace address</label>
                    <div class="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
                        <input class="blocks-input" type="text" id="tenant-name" placeholder="my-business" autocomplete="off" autocapitalize="none" spellcheck="false" aria-describedby="domain-help availability-status" required>
                        <span id="domain-help" class="shrink-0 text-sm font-medium text-muted">.{{ domain_name | default(value="") }}</span>
                    </div>
                </div>
                <input type="hidden" id="ref-code" value="{{ ref_code | default(value="") }}">
                <p id="availability-status" class="mt-3 min-h-6 text-sm text-muted" role="status" aria-live="polite"></p>
                {% if online_payment_available %}
                <button type="button" class="blocks-button blocks-button-primary mt-4 w-full" id="onboard-btn" disabled>Pay &amp; Onboard</button>
                {% else %}
                <p class="mt-4 rounded-lg border border-warning bg-canvas p-3 text-sm text-warning">Online payment is not configured. Please contact the administrator.</p>
                {% endif %}
                {% else %}
                <p class="mb-3 text-sm text-muted">Sign in to choose your workspace address and continue.</p>
                <a href="/auth/google/login" class="blocks-button blocks-button-secondary w-full"><i class="fab fa-google" aria-hidden="true"></i> Login with Google</a>
                {% endif %}
            </div>
        </article>
        {% endfor %}
    </section>

    <div id="status-message" class="mt-6 hidden rounded-xl border px-4 py-3 text-center text-sm font-semibold" role="status" aria-live="polite" tabindex="-1"></div>
    {% else %}
    <section class="mx-auto max-w-2xl rounded-2xl border border-divider bg-surface p-6 text-center sm:p-10">
        <h1 class="text-2xl font-bold text-foreground">Onboarding is unavailable</h1>
        <p class="mt-3 text-muted">{{ message | default(value="This plugin is only available on the config tenant.") }}</p>
    </section>
    {% endif %}
</main>
{% endblock %}

{% block scripts %}
{% if online_payment_available and gateway_script_url %}
<script src="{{ gateway_script_url }}"></script>
{% endif %}
<script src="/plugins/tenant-onboarding/assets/js/completion-session.js?v=1" defer></script>
<script src="/plugins/tenant-onboarding/assets/js/onboarding.js?v=3" defer></script>
{% endblock %}