<header {{ attributes }} class="bg-cyan-950 z-40">
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="h-16 flex flex-row items-center justify-between">
            <twig:SearchBar />
            <div class="md:flex md:items-center md:gap-12">
                <nav aria-label="Global" class="md:block">
                    <ul class="flex items-center gap-6 text-sm">
                        <li><twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/></li>
                        <li>
                            <a href="{{ path('app_logout') }}">
                                <twig:ux:icon name="material-symbols:logout" width="25px" class="text-orange-500" />
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div {{ turbo_stream_listen(app.session.get('mercure_alert_topic')) }} class="fixed z-40 top-10 right-10">
        <div class="z-40">
            <ul id="alert_list">
            </ul>
        </div>
    </div>
</header>
