{{--resources/views/components/partials/header.blade.php--}}
<div
    class="#sticky top-0 w-full border-b hr rounded-lg">

    <header id="header" class="header w-full rounded-r-2xl rounded-l-none">
        <nav class="flex h-[71px] #h-[74px] items-center justify-between #p-3">
            <div class="#flex-1 md:w-3/5 w-full">
                <div class="relative flex items-center gap-5">
                    <button class="sidebar-toggle translate-0 right-5 block sm:hidden text-white/60 hover:text-white text-2xl">
                        <i class="ph ph-list"></i>
                    </button>

{{--                    <button id="sidebar-toggle-btn"--}}
{{--                            class="action-button sidebar-toggle flex items-center justify-center p-1.5 shadow-2xl rounded">--}}
{{--                        <svg class="size-5 group-[.expanded]/side:rotate-180"--}}
{{--                             fill="none" stroke="currentColor" stroke-width="1.5"--}}
{{--                             viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">--}}
{{--                            <path stroke-linecap="round" stroke-linejoin="round"--}}
{{--                                  d="M9 5l7 7-7 7"></path>--}}
{{--                        </svg>--}}
{{--                    </button>--}}
                    <div class="flex items-center gap-3">
                        <h1 class="font-bold text-2xl">@yield('header_title')</h1>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-end gap-2 w-full max-w-96">
                <button
                    id="openSearchPaletteBtn"
                    type="button"
                    class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5
           text-white/75 hover:text-white hover:border-white/20"
                    title="Suche öffnen"
                    aria-label="Suche öffnen"
                    wire:click="$dispatch('openModal',{component:'ui.search.modal.search-palette-modal'})"
                >
                    <i class="ph ph-magnifying-glass text-[16px]"></i>
                    <span id="searchShortcutKbd"
                          class="rounded-md bg-white/5 border border-white/10 px-1.5 py-0.5 text-[11px] leading-none">
                        <!-- wird per JS gesetzt -->
                    </span>
                </button>
                <button onclick="Livewire.dispatch('openModal',{component:'ui.domain.modal.domain-create-modal'})">
                    <i class="ph-duotone ph-globe-hemisphere-east"></i>
                </button>

                @foreach($header as $section)
                    <div class="#modal-button #relative #mr-2">
                        <div class="#p-1.5">
                            @if(!$section['image'])
                                <div x-data="{ openMessages: false }" class="relative flex items-center">
                                    <button @click="openMessages = !openMessages" class="btn-ghost text-base !p-2"><i class="ph-duotone ph-bell #mr-1"></i></button>
                                    <div
                                        x-show="openMessages"
                                        @click.away="openMessages = false"
                                        x-cloak
                                        class="popup absolute top-16 right-0 w-48"
                                        x-transition:enter="transition ease-out duration-100"
                                        x-transition:enter-start="opacity-0 transform scale-95"
                                        x-transition:enter-end="opacity-100 transform scale-100"
                                        x-transition:leave="transition ease-in duration-75"
                                        x-transition:leave-start="opacity-100 transform scale-100"
                                        x-transition:leave-end="opacity-0 transform scale-95"
                                    >
                                        <div class="flex items-center justify-center h-40">
                                            Keine Nachrichten
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div x-data="{ openMenu: false }" class="relative flex items-center">
                                    <button @click="openMenu = !openMenu"
                                            class="flex items-center focus:outline-none">
                                        <img class="size-8 rounded-full object-cover shadow-2xl"
                                             src="https://i.pravatar.cc/100"
                                             alt="Avatar"/>
                                        <svg
                                            class="size-4 ml-2 text-gray-500 transform transition-transform duration-200"
                                            :class="{'rotate-180': open}"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M19 9l-7 7-7-7"/>
                                        </svg>
                                    </button>
                                    <div
                                        x-show="openMenu"
                                        @click.away="openMenu = false"
                                        x-cloak
                                        class="popup absolute top-16 right-0 w-48"
                                        x-transition:enter="transition ease-out duration-100"
                                        x-transition:enter-start="opacity-0 transform scale-95"
                                        x-transition:enter-end="opacity-100 transform scale-100"
                                        x-transition:leave="transition ease-in duration-75"
                                        x-transition:leave-start="opacity-100 transform scale-100"
                                        x-transition:leave-end="opacity-0 transform scale-95"
                                    >
                                        @foreach($section['sub'] as $sub)
                                            <a href="{{ route($sub['route']) }}"
                                               class="block px-4 py-2 text-xs #text-gray-700 #hover:bg-gray-100 #hover:text-black #hover:bg-gradient-to-r #hover:from-[rgba(var(--accent))] #hover:to-transparent">
                                                <div class="flex items-center gap-3">
                                                    <span>Logo</span>
                                                    {{--                                                        <span><x-dynamic-component :component="$sub['icon']"--}}
                                                    {{--                                                                                   class="!size-4"/></span>--}}
                                                    <span>{{ $sub['title'] }}</span>
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </nav>
    </header>
</div>