{% set announcements = this.announcements %}
{% set banner_locale = app.request.locale|default('fr') %}
{% if announcements is not empty %}
    <div id="banner-announcement-{{ banner_locale }}"
         data-announcement-banner
         class="relative z-banner w-full bg-foreground text-on-foreground"
         x-data="announcementBanner({ count: {{ announcements|length }}, intervalMs: 5000 })"
         x-on:mouseenter="pauseRotation()"
         x-on:mouseleave="start()"
        {{ attributes }} data-turbo-permanent>
            <div class="relative h-announcement overflow-hidden sm:h-announcement-sm">
                {% for announcement in announcements %}
                    <div
                        x-show="active === {{ loop.index0 }}"
                        x-transition:enter="transform transition ease-out duration-400 delay-400"
                        x-transition:enter-start="translate-x-full opacity-0"
                        x-transition:enter-end="translate-x-0 opacity-100"
                        x-transition:leave="transform transition ease-in duration-400"
                        x-transition:leave-start="translate-x-0 opacity-100"
                        x-transition:leave-end="-translate-x-full opacity-0"
                        x-cloak
                        class="absolute inset-0 flex h-full items-center justify-center px-4 text-center text-xs font-medium tracking-card-title sm:text-sm"
                    >
                        <div class="flex w-full max-w-screen-xl items-center justify-center gap-x-3 overflow-hidden whitespace-nowrap">
                            <div class="flex min-w-0 items-center justify-center gap-x-3 overflow-hidden">
                                {% if announcement.title is not empty %}
                                    <span class="shrink-0 truncate font-semibold uppercase text-on-foreground/95">{{ announcement.title|raw }}</span>
                                {% endif %}
                                {% if announcement.title is not empty and announcement.text is not empty %}
                                    <span class="hidden shrink-0 text-on-foreground/40 sm:inline">•</span>
                                {% endif %}
                                {% if announcement.text is not empty %}
                                    <span class="truncate text-on-foreground/80">{{ announcement.text|raw }}</span>
                                {% endif %}
                            </div>
                            {% if announcement.url is not empty %}
                                {% if announcement.title is not empty or announcement.text is not empty %}
                                    <span class="hidden shrink-0 text-on-foreground/40 sm:inline">•</span>
                                {% endif %}
                                <a href="{{ announcement.url }}" class="shrink-0 cursor-pointer underline decoration-on-foreground/50 underline-offset-4 transition hover:text-on-foreground/80">
                                    {{ announcement.urlTitle|default('')|raw }}
                                </a>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}
