<li>
    <a href="{{ $link }}" @if($navigate) wire:navigate @endif
        @class(['flex items-center p-2 text-base text-gray-900 rounded-xl hover:bg-gray-200 group dark:text-gray-200 dark:hover:bg-gray-700', 'hover:text-gray-800 text-white font-bold bg-gray-700' => $active])>
        {!! $customIcon ?? $icon !!}
        <span class="ltr:ml-3 rtl:mr-3" sidebar-toggle-item>{{ $name }}</span>
        @if ($isAddon && app()->environment('demo'))
            <span class="flex-1 ltr:ml-3 rtl:mr-3 ltr:text-left rtl:text-right whitespace-nowrap" sidebar-toggle-item>
                <span x-data="{ tooltip: false }"
                    @mouseenter="tooltip = true"
                    @mouseleave="tooltip = false"
                    class="bg-yellow-400 text-white px-2 py-1 rounded-md text-xs inline-flex cursor-help">
                    @lang('app.addon')
                    <div x-show="tooltip"
                        x-transition:enter="transition ease-out duration-200"
                        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-100"
                        x-transition:leave-start="opacity-100 transform scale-100"
                        x-transition:leave-end="opacity-0 transform scale-95"
                        class="fixed z-50"
                        x-cloak
                        @mouseenter="tooltip = true"
                        x-init="$watch('tooltip', value => {
                            if (value) {
                                let parent = $el.parentElement;
                                let rect = parent.getBoundingClientRect();
                                $el.style.left = `${rect.left + (rect.width / 2)}px`;
                                $el.style.top = `${rect.top - 10}px`;
                            }
                        })"
                        style="display: none;">
                        <div class="bg-gray-900 text-white text-sm px-4 py-2 rounded-lg shadow-lg transform -translate-x-1/2 -translate-y-full min-w-[200px] max-w-[300px]">
                            <span class="block whitespace-normal leading-relaxed">@lang('messages.addonDescription')</span>
                            <div class="absolute w-3 h-3 bg-gray-900 transform rotate-45 left-1/2 -translate-x-1/2 -bottom-1.5"></div>
                        </div>
                    </div>
                </span>
            </span>
    @endif
    </a>
</li>
