{% form_theme form with app_form_themes() only %}

{% if panelMode %}
    <div {{ attributes }}>
        <div class="mb-5">
            <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#8f6a73]">Réglages</p>
            <h3 class="font-heading text-2xl italic text-[#400919]">Page</h3>
            {% if saved %}
                <p class="mt-2 text-xs font-semibold uppercase tracking-[0.12em] text-[#2d7a4f]">Enregistré</p>
            {% endif %}
        </div>

            {{ form_start(form, {
                attr: {
                    class: 'grid gap-4 text-sm',
                'data-model': 'on(change)|*',
                'data-action': 'live#action:prevent',
                'data-live-action-param': 'debounce(500)|save',
                novalidate: 'true'
            }
        }) }}
            {{ form_row(form.translations) }}
            {{ form_row(form.seoIndexable) }}
            <div class="grid gap-3 sm:grid-cols-2">
                {{ form_row(form.headerMode) }}
                {{ form_row(form.footerMode) }}
            </div>
            {{ form_row(form.disabled) }}
            <button
                type="button"
                class="inline-flex w-full justify-center rounded-full bg-[#400919] px-5 py-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-[#5b1f2e]"
                data-action="live#action"
                data-live-action-param="save"
            >
                Enregistrer la page
            </button>
            <div class="hidden">{{ form_rest(form) }}</div>
        {{ form_end(form) }}
    </div>
{% else %}
<div {{ attributes }}>
    <div class="fixed right-4 bottom-4 left-4 z-[90] mx-auto flex max-w-3xl items-center justify-between gap-3 rounded-full border border-[#eadadd] bg-[#fff8f7]/95 px-4 py-3 text-[#400919] shadow-[0_18px_60px_rgba(64,9,25,0.18)] backdrop-blur md:right-auto md:left-1/2 md:-translate-x-1/2">
        <div class="min-w-0">
            <p class="truncate text-[11px] font-semibold uppercase tracking-[0.2em] text-[#8f6a73]">Édition active</p>
            <p class="truncate font-heading text-lg italic leading-tight">{{ page.name }}</p>
        </div>
        <div class="flex shrink-0 items-center gap-2">
            {% if saved %}
                <span class="hidden rounded-full bg-[#e8f5ed] px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-[#2d7a4f] sm:inline-flex">Enregistré</span>
            {% endif %}
            <details class="relative">
                <summary class="list-none rounded-full bg-[#400919] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-[#5b1f2e] [&::-webkit-details-marker]:hidden">
                    Réglages page
                </summary>
                <div class="absolute right-0 bottom-14 w-[380px] max-w-[calc(100vw-2rem)] rounded-2xl border border-[#eadadd] bg-white p-5 text-[#211a1b] shadow-[0_24px_80px_rgba(64,9,25,0.2)]">
                    <div class="mb-4">
                        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#8f6a73]">SEO et URL</p>
                        <h2 class="font-heading text-2xl italic text-[#400919]">Réglages de page</h2>
                    </div>

                    {{ form_start(form, {
                        attr: {
                            class: 'grid gap-3 text-sm',
                            'data-model': 'on(change)|*',
                            'data-action': 'live#action:prevent',
                            'data-live-action-param': 'debounce(500)|save',
                            novalidate: 'true'
                        }
                    }) }}
                        <div class="max-h-[58vh] overflow-auto pr-1">
                            {{ form_row(form.translations) }}
                            {{ form_row(form.seoIndexable) }}
                            <div class="grid gap-3 sm:grid-cols-2">
                                {{ form_row(form.headerMode) }}
                                {{ form_row(form.footerMode) }}
                            </div>
                            {{ form_row(form.disabled) }}
                            <div class="hidden">{{ form_rest(form) }}</div>
                        </div>
                        <button
                            type="button"
                            class="mt-3 inline-flex w-full justify-center rounded-full bg-[#400919] px-5 py-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-[#5b1f2e]"
                            data-action="live#action"
                            data-live-action-param="save"
                        >
                            Enregistrer la page
                        </button>
                    {{ form_end(form) }}
                </div>
            </details>
        </div>
    </div>
</div>
{% endif %}
