<div {{ attributes }} class="min-h-screen bg-[#fff8f7]">
    <aside class="fixed top-0 bottom-0 left-0 z-[80] flex w-[390px] max-w-[calc(100vw-2rem)] flex-col border-r border-[#eadadd] bg-[#fffdfb]/96 text-[#211a1b] shadow-[24px_0_80px_rgba(64,9,25,0.14)] backdrop-blur">
        <div class="border-b border-[#eadadd] p-5">
            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#8f6a73]">Mode édition</p>
            <h2 class="mt-1 font-heading text-3xl italic leading-none text-[#400919]">{{ page.name }}</h2>
            <div class="mt-4 flex gap-2">
                <button
                    type="button"
                    class="rounded-full px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.14em] transition {{ selectedType == 'page' ? 'bg-[#400919] text-white' : 'bg-[#f3e9eb] text-[#400919] hover:bg-[#eadadd]' }}"
                    data-action="live#action"
                    data-live-action-param="selectPage"
                >
                    Page
                </button>
                <a
                    href="{{ app.request.pathInfo }}"
                    class="rounded-full border border-[#d7c1c4] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[#400919] transition hover:bg-[#400919] hover:text-white"
                >
                    Quitter
                </a>
            </div>
        </div>

        <div class="border-b border-[#eadadd] p-4">
            <p class="mb-3 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#8f6a73]">Sections</p>
            <div class="grid gap-2">
                {% for section in this.sections %}
                    <button
                        type="button"
                        class="flex items-center justify-between rounded-xl border px-3 py-3 text-left transition {{ selectedSectionId == section.id|default('') ? 'border-[#400919] bg-[#400919] text-white' : 'border-[#eadadd] bg-white text-[#400919] hover:border-[#c8a96a]' }}"
                        data-action="live#action"
                        data-live-action-param="selectSection"
                        data-live-section-id-param="{{ section.id }}"
                    >
                        <span>
                            <span class="block text-[11px] font-semibold uppercase tracking-[0.16em] opacity-70">{{ section.type }}</span>
                            <span class="block truncate font-medium">{{ section.adminLabel ?: 'Bloc sans libellé' }}</span>
                        </span>
                        {% if section.disabled %}
                            <span class="rounded-full bg-white/20 px-2 py-1 text-[10px] uppercase tracking-[0.12em]">off</span>
                        {% endif %}
                    </button>
                {% else %}
                    <p class="rounded-xl bg-[#f3e9eb] p-4 text-sm text-[#6d4b54]">Aucune section à éditer.</p>
                {% endfor %}
            </div>
        </div>

        <div class="min-h-0 flex-1 overflow-auto p-5">
            {% if selectedType == 'section' and this.selectedSection %}
                {{ component('page_builder:SectionEditor', { section: this.selectedSection, panelMode: true }) }}
            {% else %}
                {{ component('page_builder:PageEditor', { page: page, panelMode: true }) }}
            {% endif %}
        </div>
    </aside>

    <div class="min-h-screen pl-[390px]">
        <div class="sticky top-0 z-[60] border-b border-[#eadadd] bg-[#fff8f7]/86 px-6 py-3 backdrop-blur">
            <div class="mx-auto flex max-w-[1280px] items-center justify-between gap-4">
                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#8f6a73]">Aperçu éditable</p>
                <p class="text-sm text-[#6d4b54]">Clique sur un bloc pour charger son formulaire à gauche.</p>
            </div>
        </div>

        <main class="pt-10">
            {% for section in this.sections %}
                {% set isSelected = selectedSectionId == section.id|default('') %}
                <section class="group/section relative {{ isSelected ? 'ring-2 ring-[#c8a96a]' : '' }}">
                    <button
                        type="button"
                        class="absolute top-4 right-6 z-[50] rounded-full border border-white/60 bg-[#400919]/90 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-white opacity-0 shadow-[0_14px_40px_rgba(64,9,25,0.22)] backdrop-blur transition hover:bg-[#5b1f2e] group-hover/section:opacity-100 {{ isSelected ? 'opacity-100' : '' }}"
                        data-action="live#action"
                        data-live-action-param="selectSection"
                        data-live-section-id-param="{{ section.id }}"
                    >
                        Modifier {{ section.adminLabel ?: section.type }}
                    </button>
                    {% set sectionHtml %}
                        {% include ['page_builder/blocks/' ~ section.type ~ '.html.twig', '@viti_theme_default/page_builder/blocks/' ~ section.type ~ '.html.twig'] ignore missing with { section: section } %}
                    {% endset %}
                    {{ sectionHtml|page_builder_apply_mutations(section, app.request.locale) }}
                </section>
            {% endfor %}
        </main>
    </div>
</div>
