<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">
            <a href="{{ path('app_index') }}" class="text-2xl font-extrabold text-orange-500 mr-4 md:hidden">T</a>
            <twig:SearchBar />
            <div class="md:flex md:items-center md:gap-12">
                <nav aria-label="Global" class="md:block">
                    <ul class="ml-4 flex items-end md:items-center md:gap-6 text-sm">
                        <li>
                            <div class="flex flex-row justify-center items-start gap-2 p-2 w-10 mt-1 h-6 rounded-lg border border-orange-500 text-orange-500">
                                <status-checker-span
                                        class="h-2 w-2 rounded-full text-green-600 bg-green-600"
                                        url="https://torrentio.strem.fun"
                                        service="Torrentio">
                                </status-checker-span>
                                <status-checker-span
                                        class="h-2 w-2 rounded-full text-green-600 bg-green-600"
                                        url="https://api.themoviedb.org/3"
                                        service="TMDB">
                                </status-checker-span>
                            </div>
                        </li>
                        <li>
                            <a href="{{ path('app.monitor.upcoming-episodes') }}" data-turbo="false" title="View upcoming episodes of the shows you're subscribed to.">
                                <twig:ux:icon name="solar:calendar-linear" width="25px" class="text-orange-500" />
                            </a>
                        </li>
                        <li class="hidden">
                            <twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/>
                        </li>
                        <li class="hidden md:block">
                            <a href="{{ path('app_logout') }}" title="Log out of Torsearch.">
                                <twig:ux:icon name="material-symbols:logout" width="25px" class="text-orange-500" />
                            </a>
                        </li>
                        <li {{ stimulus_controller('hamburger') }}
                            {{ stimulus_action('hamburger', 'toggleMenu', 'click') }}
                            data-hamburger-navbar-outlet="#navbar"
                            id="hamburger" class="cursor-pointer md:hidden"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-orange-500 ml-4" width="25px" height="25px" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div {{ turbo_stream_listen(app.session.get('mercure_alert_topic')) }} class="fixed z-40 top-4 right-3 md:top-10 md:right-10">
        <div class="z-40">
            <ul id="alert_list" class="flex flex-col gap-2">
                {% for message in app.flashes('warning') %}
                    <twig:Alert :title="'Warning'" :message="message" :alert_id="''" type="warning" data-controller="alert" />
                {% endfor %}
                {% for message in app.flashes('success') %}
                    <twig:Alert :title="'Success'" :message="message" :alert_id="''" type="warning" data-controller="alert" />
                {% endfor %}
            </ul>
        </div>
    </div>
</header>
