<div {{ attributes }}>
    {% if open and announcements is not empty %}
        <div
            class="fixed inset-0 z-modal flex items-center justify-center p-4"
            x-bind:class="revealed ? 'modal-scroll-lock' : ''"
            x-data="announcementModal"
            data-announcement-count="{{ announcements|length }}"
            data-announcement-interval-ms="6000"
            data-announcement-ids="{{ this.announcementIds }}"
            data-announcement-scroll-threshold="180"
            x-on:scroll.window.passive="handleScroll()"
            x-show="revealed"
            x-transition:enter="transition ease-out duration-500"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            style="display: none;"
        >
            <div
                class="absolute inset-0 bg-foreground/60"
                aria-hidden="true"
            ></div>

            <div
                id="{{ id }}"
                role="dialog"
                aria-modal="true"
                aria-labelledby="{{ id }}-title"
                class="relative z-10 flex max-h-modal w-full max-w-2xl flex-col overflow-hidden border border-accent/30 bg-surface"
                x-show="revealed"
                x-transition:enter="transform transition ease-out duration-700"
                x-transition:enter-start="translate-y-full opacity-0"
                x-transition:enter-end="translate-y-0 opacity-100"
                x-transition:leave="transform transition ease-in duration-300"
                x-transition:leave-start="translate-y-0 opacity-100"
                x-transition:leave-end="translate-y-full opacity-0"
                style="display: none;"
                x-on:mouseenter="pauseRotation()"
                x-on:mouseleave="start()"
            >
                <div class="flex items-center justify-between gap-4 border-b border-accent/20 px-5 py-4 sm:px-6">
                    <div id="{{ id }}-title" class="min-w-0 flex-1 font-serif text-lg uppercase tracking-card-title text-foreground">
                        {% for announcement in announcements %}
                            <div
                                x-show="active === {{ loop.index0 }}"
                            >
                                {{ announcement.title|default('')|raw }}
                            </div>
                        {% endfor %}
                    </div>
                    <button
                        type="button"
                        class="flex h-10 w-10 cursor-pointer items-center justify-center text-4xl leading-none text-foreground/60 transition hover:text-foreground"
                        x-on:click="close()"
                        aria-label="{{ 'shop.close_modal'|trans }}"
                        data-action="live#action"
                        data-live-action-param="close"
                    >
                        &times;
                    </button>
                </div>

                <div class="relative overflow-hidden">
                    {% for announcement in announcements %}
                        <article
                            x-show="active === {{ loop.index0 }}"
                            class="flex max-h-modal-body flex-col overflow-hidden px-5 py-5 sm:px-6 sm:py-6"
                        >
                            <div class="flex min-h-0 flex-col gap-4 md:grid md:grid-cols-2 md:items-center md:gap-6">
                                {% if announcement.videoPath %}
                                    <div class="mx-auto w-full max-w-announcement-media shrink-0 overflow-hidden bg-foreground md:max-w-none">
                                        <iframe
                                            class="aspect-video w-full"
                                            src="{{ announcement.videoPath }}"
                                            title="{{ announcement.title|striptags }}"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen
                                        ></iframe>
                                    </div>
                                {% elseif announcement.imagePath %}
                                    <div class="mx-auto w-full max-w-announcement-logo shrink-0 overflow-hidden sm:max-w-announcement-media-sm md:max-w-md">
                                        <twig:Image
                                            alt="{{ announcement.title|striptags }}"
                                            class="w-full"
                                            row:class="w-full"
                                            img:class="h-auto w-full object-contain"
                                            lazy="{{ false }}"
                                            quality="{{ 70 }}"
                                            responsive="{{ false }}"
                                            path="{{ announcement.imagePath }}"
                                            imageWidth="520"
                                            imageHeight="380"
                                        />
                                    </div>
                                {% endif %}

                                <div class="min-h-0 flex-1 space-y-5 overflow-y-auto pr-1 text-center md:text-left">
                                    {% if announcement.subtitle is not empty %}
                                        <div class="text-sm uppercase tracking-status text-accent sm:text-base">
                                            {{ announcement.subtitle|raw }}
                                        </div>
                                    {% endif %}

                                    {% if announcement.text is not empty %}
                                        <div class="text-sm leading-7 text-foreground/80 sm:text-base">
                                            {{ announcement.text|raw }}
                                        </div>
                                    {% endif %}

                                    {% if announcement.url is not empty %}
                                        <div>
                                            <a
                                                href="{{ announcement.url }}"
                                                class="inline-flex cursor-pointer items-center justify-center border border-accent bg-accent px-5 py-3 text-sm font-semibold uppercase tracking-status text-foreground transition hover:bg-accent-soft"
                                            >
                                                {{ announcement.urlTitle|default('')|raw }}
                                            </a>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </article>
                    {% endfor %}
                </div>

                <div class="flex items-center justify-between gap-4 border-t border-accent/20 px-5 py-3">
                    <button
                        type="button"
                        class="cursor-pointer text-xs font-medium uppercase tracking-card-title text-foreground/60 transition hover:text-foreground"
                        x-on:click="dismissAnnouncements()"
                    >
                        {{ 'shop.dismiss_announcements'|trans }}
                    </button>

                    {% if announcements|length > 1 %}
                        <div class="flex items-center justify-center gap-2">
                            {% for announcement in announcements %}
                                <button
                                    type="button"
                                    class="h-2.5 w-2.5 cursor-pointer rounded-full bg-foreground/20 transition"
                                    x-bind:class="{ 'bg-foreground': active === {{ loop.index0 }} }"
                                    x-on:click="active = {{ loop.index0 }}"
                                    aria-label="Afficher l’annonce {{ loop.index }}"
                                ></button>
                            {% endfor %}
                        </div>
                    {% else %}
                        <span class="block h-2.5 w-2.5"></span>
                    {% endif %}
                    </div>
            </div>
        </div>
    {% endif %}
</div>
