{{--
    Replaces the topbar's own desktop sidebar collapse/expand control —
    two separate <button>s (.fi-topbar-open-collapse-sidebar-btn and
    -close-collapse-sidebar-btn, see vendor/filament/filament/resources/views/
    livewire/topbar.blade.php) that swap via x-show with no transition, each a
    bare `fi-icon-btn` glyph with no visible button affordance. Those are
    hidden via theme.css; this renders in the same spot (TOPBAR_LOGO_BEFORE,
    right where the original pair sat inside .fi-topbar-start).

    One button whose chevron rotates 180° reads as a single continuous
    control rather than two icons swapping, and the chip background gives it
    a resting, discoverable appearance instead of only a color change on
    hover. Filament's own two icons are exact mirror images of each other in
    both LTR and RTL (chevron-right/chevron-left), so a plain 180° rotation
    of one icon reproduces both without any RTL-specific logic.
--}}
@php
    $isRtl = __('filament-panels::layout.direction') === 'rtl';
    // ComponentTagCompiler escapes `@` inside tag attribute values (so Alpine's
    // `@click` shorthand isn't parsed as a Blade directive), which means an
    // inline @js() here never compiles — it survives as literal text into the
    // rendered HTML. Precompute the JS-escaped strings instead and echo them.
    $collapseLabel = \Illuminate\Support\Js::from(__('filament-panels::layout.actions.sidebar.collapse.label'));
    $expandLabel = \Illuminate\Support\Js::from(__('filament-panels::layout.actions.sidebar.expand.label'));
@endphp

@if (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop())
    <div class="hidden shrink-0 lg:block">
        <x-filament::icon-button
            color="gray"
            :icon="$isRtl ? \Filament\Support\Icons\Heroicon::OutlinedChevronRight : \Filament\Support\Icons\Heroicon::OutlinedChevronLeft"
            icon-size="lg"
            x-cloak
            aria-controls="fi-main-sidebar"
            x-bind:aria-expanded="$store.sidebar.isOpen"
            x-bind:aria-label="$store.sidebar.isOpen ? {{ $collapseLabel }} : {{ $expandLabel }}"
            x-bind:class="{ 'rotate-180': ! $store.sidebar.isOpen }"
            x-on:click="$store.sidebar.isOpen ? $store.sidebar.close() : $store.sidebar.open()"
            class="fi-sidebar-collapse-toggle-btn mx-0! rounded-lg bg-gray-100 ring-1 ring-gray-950/5 transition-all duration-200 ease-in-out hover:bg-gray-200 hover:ring-gray-950/10 dark:bg-white/5 dark:ring-white/10 dark:hover:bg-white/10"
        />
    </div>
@endif
