@props([
    'icon' => null,
    'label',
    'last' => false
])

<li
    x-data="{ label: @js($label) }"
    data-group-label="{{ $label }}"
    @class([
        'fi-sidebar-group flex flex-col gap-y-1',
        'pb-8' => $last
    ])
>
    @if ($label)
        <div
            x-on:click="$store.sidebar.toggleCollapsedGroup(label)"
            x-show="$store.sidebar.isOpen"
            x-transition:enter="delay-100 lg:transition"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            @class([
                'flex items-center gap-x-3 px-2 py-2 cursor-pointer',
            ])
        >
            @if ($icon)
                <x-filament::icon
                    :icon="$icon"
                    class="fi-sidebar-group-icon h-5 w-5 text-gray-400 dark:text-gray-500"
                />
            @endif

            <span
                class="fi-sidebar-group-label flex-1 text-sm font-semibold text-gray-700 dark:text-gray-200"
            >
                {{ $label }}
            </span>

            <x-filament::icon-button
                color="gray"
                icon="heroicon-m-chevron-up"
                icon-alias="panels::sidebar.group.collapse-button"
                x-on:click.stop="$store.sidebar.toggleCollapsedGroup(label)"
                x-bind:class="{ 'rotate-180': $store.sidebar.groupIsCollapsed(label) }"
                class="fi-sidebar-group-collapse-button -my-2 -me-2"
            />
        </div>
    @endif

    <ul
        x-show="! ($store.sidebar.groupIsCollapsed(label) && ($store.sidebar.isOpen))"
        x-transition:enter="delay-100 lg:transition"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-collapse.duration.200ms
        class="fi-sidebar-group-items flex flex-col gap-y-2"
    >
        {{ $items }}
    </ul>
</li>