{% 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]">Bloc {{ section.type }}</p>
            <h3 class="font-heading text-2xl italic text-[#400919]">{{ section.adminLabel ?: 'Section' }}</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(input)|*',
                'data-action': 'live#action:prevent',
                'data-live-action-param': 'debounce(600)|save',
                novalidate: 'true'
            }
        }) }}
            {{ form_row(form.adminLabel) }}
            {{ form_row(form.translations) }}
            <div class="grid gap-3 sm:grid-cols-2">
                {{ form_row(form.alignment) }}
                {{ form_row(form.overlay) }}
            </div>
            {{ form_row(form.zone) }}
            {{ 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 le bloc
            </button>
            <div class="hidden">{{ form_rest(form) }}</div>
        {{ form_end(form) }}
    </div>
{% else %}
<div {{ attributes }} class="group/section relative">
    <div class="pointer-events-none absolute inset-0 z-[30] rounded-lg ring-1 ring-[#c8a96a]/0 ring-offset-0 transition group-hover/section:ring-[#c8a96a]/70"></div>

    <div class="absolute top-4 right-4 z-[50]">
        <details class="relative">
            <summary class="list-none rounded-full border border-white/50 bg-[#400919]/90 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-white opacity-0 shadow-[0_12px_40px_rgba(64,9,25,0.22)] backdrop-blur transition hover:bg-[#5b1f2e] group-hover/section:opacity-100 open:opacity-100 [&::-webkit-details-marker]:hidden">
                Modifier
            </summary>
            <div class="absolute right-0 mt-3 w-[420px] max-w-[calc(100vw-2rem)] rounded-2xl border border-[#eadadd] bg-[#fffdfb] p-5 text-[#211a1b] shadow-[0_24px_80px_rgba(64,9,25,0.24)]">
                <div class="mb-4 flex items-start justify-between gap-4">
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#8f6a73]">Bloc {{ section.type }}</p>
                        <h3 class="font-heading text-2xl italic text-[#400919]">{{ section.adminLabel ?: 'Section' }}</h3>
                    </div>
                    {% if saved %}
                        <span class="rounded-full bg-[#e8f5ed] px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-[#2d7a4f]">Enregistré</span>
                    {% endif %}
                </div>

                {{ form_start(form, {
                    attr: {
                        class: 'grid gap-4',
                        'data-model': 'on(input)|*',
                        'data-action': 'live#action:prevent',
                        'data-live-action-param': 'debounce(600)|save',
                        novalidate: 'true'
                    }
                }) }}
                    <div class="max-h-[60vh] overflow-auto pr-1">
                        {{ form_row(form.adminLabel) }}
                        {{ form_row(form.translations) }}
                        <div class="grid gap-3 sm:grid-cols-2">
                            {{ form_row(form.alignment) }}
                            {{ form_row(form.overlay) }}
                        </div>
                        {{ form_row(form.zone) }}
                        {{ form_row(form.disabled) }}
                    </div>
                    <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 le bloc
                    </button>
                    <div class="hidden">{{ form_rest(form) }}</div>
                {{ form_end(form) }}
            </div>
        </details>
    </div>

    <div class="relative z-[1]">
        {% 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) }}
    </div>
</div>
{% endif %}
