{% set announcements = this.announcements %}
    {% if announcements is not empty %}
        <div id="banner-announcement"
            data-announcement-banner
            class="fixed inset-x-0 top-0 z-[80] bg-black text-white shadow-[0_8px_24px_rgba(0,0,0,0.24)]"
            x-data="announcementBanner({ count: {{ announcements|length }}, intervalMs: 7000 })"
            x-on:mouseenter="pauseRotation()"
            x-on:mouseleave="start()"
            {{ attributes }} data-turbo-permanent>
            <div class="relative h-[42px] overflow-hidden sm:h-[46px]">
                {% 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-[0.08em] 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-white/95">{{ announcement.title|raw }}</span>
                                {% endif %}
                                {% if announcement.title is not empty and announcement.text is not empty %}
                                    <span class="hidden shrink-0 text-white/40 sm:inline">•</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-white/40 sm:inline">•</span>
                                {% endif %}
                                <a href="{{ announcement.url }}" class="shrink-0 cursor-pointer underline decoration-white/50 underline-offset-4 transition hover:text-white/80">
                                    {{ announcement.urlTitle|default('')|raw }}
                                </a>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}
