@props(['role' => \App\Enums\RoleEnum::Seller()->value])

<div
    {{
        $attributes->class([
            'fi-topbar sticky top-0 z-20',
        ])
    }}
>
    <nav
        class="flex h-16 items-center gap-x-4 bg-primary-600/20 backdrop-blur-2xl px-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 md:px-6 lg:px-8"
    >
        <x-filament::icon-button
            color="gray"
            icon="heroicon-o-bars-3"
            icon-alias="panels::topbar.open-sidebar-button"
            icon-size="lg"
            :label="__('filament-panels::layout.actions.sidebar.expand.label')"
            x-cloak
            x-data="{}"
            x-on:click="$store.sidebar.open()"
            x-show="! $store.sidebar.isOpen"
            @class(['lg:hidden -ms-1.5'])
        />

        <x-filament::icon-button
            color="gray"
            icon="heroicon-o-x-mark"
            icon-alias="panels::topbar.close-sidebar-button"
            icon-size="lg"
            :label="__('filament-panels::layout.actions.sidebar.collapse.label')"
            x-cloak
            x-data="{}"
            x-on:click="$store.sidebar.close()"
            x-show="$store.sidebar.isOpen"
            class="-ms-1.5 lg:hidden"
        />

        {{--        <div--}}
        {{--            x-cloak--}}
        {{--            x-show="! $store.sidebar.isOpen"--}}
        {{--            class="ms-6 hidden lg:flex"--}}
        {{--        >--}}
        {{--            <a href="{{ route('accueil') }}" wire:navigate>--}}
        {{--                <x-logo class="h-16"/>--}}
        {{--            </a>--}}
        {{--        </div>--}}

        <div
            x-persist="topbar.end"
            class="ms-auto flex items-center gap-x-4"
        >
            @if (auth()->check())
                <x-user-menu />
            @endif
        </div>
    </nav>
</div>