{% 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-[60] w-full border-b border-white/10 bg-primary text-white"
        x-data="announcementBanner({ count: {{ announcements|length }}, intervalMs: 5000 })"
        x-on:mouseenter="pauseRotation()"
        x-on:mouseleave="start()"
        {{ attributes }}
        data-turbo-permanent
    >
        <div class="relative h-10 overflow-hidden sm:h-11">
            {% 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 font-label text-[10px] font-medium tracking-[0.14em] sm:text-[11px]"
                >
                    <div class="flex w-full max-w-[1440px] 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-white">{{ announcement.title|raw }}</span>
                            {% endif %}
                            {% if announcement.title is not empty and announcement.text is not empty %}
                                <span class="hidden shrink-0 text-secondary-fixed/60 sm:inline" aria-hidden="true">•</span>
                            {% endif %}
                            {% if announcement.text is not empty %}
                                <span class="truncate text-white/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-secondary-fixed/60 sm:inline" aria-hidden="true">•</span>
                            {% endif %}
                            <a href="{{ announcement.url }}" class="shrink-0 cursor-pointer text-secondary-fixed underline decoration-secondary-fixed/50 underline-offset-4 transition hover:text-white">
                                {{ announcement.urlTitle|default('')|raw }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}
