@php
    $sidebar = $this->getSidebar();
    $sidebarWidths = $this->getSidebarWidths();
@endphp

<div>
    @if ($sidebar->getPageNavigationLayout() == \AymanAlhattami\FilamentPageWithSidebar\Enums\PageNavigationLayoutEnum::Sidebar)
        <div class="mt-8">
            <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
                <div class="col-[--col-span-default] rounded sm:col-[--col-span-sm] md:col-[--col-span-md] lg:col-[--col-span-lg] xl:col-[--col-span-xl] 2xl:col-[--col-span-2xl]"
                     style="--col-span-default: span 12;
                        --col-span-sm: span {{ $sidebarWidths['sm'] ?? 12 }};
                        --col-span-md: span {{ $sidebarWidths['md'] ?? 3 }};
                        --col-span-lg: span {{ $sidebarWidths['lg'] ?? 3 }};
                        --col-span-xl: span {{ $sidebarWidths['xl'] ?? 3 }};
                        --col-span-2xl: span {{ $sidebarWidths['2xl'] ?? 3 }};">
                    <div class="">
                        <div class="flex items-center rtl:space-x-reverse">
                            @if ($sidebar->getTitle() != null || $sidebar->getDescription() != null)
                                <div class="w-full">
                                    @if ($sidebar->getTitle() != null)
                                        <h3 class="block truncate text-base font-medium text-slate-700 dark:text-white">
                                            {{ $sidebar->getTitle() }}
                                        </h3>
                                    @endif

                                    @if ($sidebar->getDescription())
                                        <p class="flex items-center gap-x-1 text-xs text-gray-400">
                                            {{ $sidebar->getDescription() }}

                                            @if ($sidebar->getDescriptionCopyable())
                                                <x-filament::icon x-on:click.prevent="
                                            window.navigator.clipboard.writeText('{{ $sidebar->getDescription() }}');
                                            $tooltip('Copied to clipboard', { timeout: 1500 })
                                        "
                                                                  icon="heroicon-o-clipboard-document"
                                                                  class="h-4 w-4 cursor-pointer text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400" />
                                            @endif
                                        </p>
                                    @endif
                                </div>
                            @endif
                        </div>
                        {{-- <ul class="@if ($sidebar->getTitle() != null || $sidebar->getDescription() != null) mt-4 @endif font-inter space-y-2 font-medium"
                            wire:ignore>
                            @foreach ($sidebar->getNavigationItems() as $group)
                                <x-filament-page-with-sidebar::group :collapsible="$group->isCollapsible()"
                                                                     :icon="$group->getIcon()"
                                                                     :items="$group->getItems()"
                                                                     :label="$group->getLabel()" />
                            @endforeach
                        </ul> --}}

                        <ul class="@if ($sidebar->getTitle() != null || $sidebar->getDescription() != null) mt-4 @endif font-inter space-y-1 font-medium"
                            wire:ignore>
                            @foreach ($sidebar->getNavigationItems() as $group)
                                @php
                                    $items = $group->getItems();
                                    $isSingleItem = count($items) === 1 && isset($group->getExtraSidebarAttributes()['data-single-item']);
                                @endphp

                                @if (!empty($items))
                                    @if ($isSingleItem)
                                        @php $item = $items[0]; @endphp
                                        <x-filament-page-with-sidebar::item :active-icon="$item->getActiveIcon()"
                                                                            :active="$item->isActive()"
                                                                            :badge-color="$item->getBadgeColor()"
                                                                            :badge="$item->getBadge()"
                                                                            :first="$loop->first"
                                                                            :grouped="false"
                                                                            :icon="$item->getIcon()"
                                                                            :last="$loop->last"
                                                                            :url="$item->getUrl()"
                                                                            :should-open-url-in-new-tab="$item->shouldOpenUrlInNewTab()">
                                            {{ $item->getLabel() }}
                                        </x-filament-page-with-sidebar::item>
                                    @else
                                        <x-filament-page-with-sidebar::group :collapsible="$group->isCollapsible()"
                                                                             :icon="$group->getIcon()"
                                                                             :items="$items"
                                                                             :label="$group->getLabel()" />
                                    @endif
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="col-[--col-span-default] -mt-8 sm:col-[--col-span-sm] md:col-[--col-span-md] lg:col-[--col-span-lg] xl:col-[--col-span-xl] 2xl:col-[--col-span-2xl]"
                     style="--col-span-default: span 12;
                        --col-span-sm: span {{ $sidebarWidths['sm'] == 12 ? 12 : 12 - ($sidebarWidths['sm'] ?? 3) }};
                        --col-span-md: span {{ $sidebarWidths['md'] == 12 ? 12 : 12 - ($sidebarWidths['md'] ?? 3) }};
                        --col-span-lg: span {{ $sidebarWidths['lg'] == 12 ? 12 : 12 - ($sidebarWidths['lg'] ?? 3) }};
                        --col-span-xl: span {{ $sidebarWidths['xl'] == 12 ? 12 : 12 - ($sidebarWidths['xl'] ?? 3) }};
                        --col-span-2xl: span {{ $sidebarWidths['2xl'] == 12 ? 12 : 12 - ($sidebarWidths['2xl'] ?? 3) }}; margin-top: -2em;">
                    {{ $slot }}
                </div>
            </div>
        </div>
    @else
        <x-filament-page-with-sidebar::topbar :sidebar="$sidebar" />

        {{ $slot }}
    @endif
</div>