@props(['link'])
@if (
    !$link['hasrole'] ||
        (isset($link['role']) &&
            auth()->user()->hasAnyRole(explode('|', $link['role']))))
    <li x-data="{ open: false }" x-on:click.outside="open = false"
        class="mb-2 group {{ $link['route'] == request()->route()->getName() ? 'active' : '' }}">
        <a {{ $link['has_submenu'] ? ' ' : 'wire:navigate' }}
            @click="if (!{{ $link['has_submenu'] }}) { window.location='{{ route($link['route']) }}'; } else { open = !open; $store.menu.setActive('{{ $link['name'] }}'); }"
            class="flex items-center duration-500 transition-all space-x-5 py-2 pl-4 text-tx-var-primary rounded-l-full hover:bg-gray-100 hover:dark:text-secondary-dark hover:dark:bg-tx-primary  hover:text-tx-primary group-[.active]:text-tx-primary group-[.active]:bg-gray-100 group-[.active]:dark:text-secondary-dark group-[.active]:dark:bg-tx-primary group-[.selected]:text-tx-primary group-[.selected]:bg-gray-100 group-[.selected]:dark:text-secondary-dark group-[.selected]:dark:bg-tx-primary"
            :class="{ 'justify-center items-center': !openSidebar }"
            href="{{ $link['has_submenu'] ? '#' : route($link['route']) }}">
            <span>
                <div class="text-lg">
                    <i class="{{ $link['icon'] }} text-xl"></i>
                </div>
            </span>
            <span class="text-base" :class="{ 'lg:hidden': !openSidebar }">{{ $link['name'] }}</span>
        </a>

        @if ($link['has_submenu'])
            <ul x-show="open" x-transition class="ml-8 submenu" style="display: none;">
                @foreach ($link['submenu'] as $submenu)
                    <li>
                        <a class="flex items-center px-3 py-2 mt-2 space-x-5 duration-300 rounded-l-full text-tx-var-primary hover:text-tx-primary hover:bg-gray-100 hover:dark:bg-secondary-dark"
                            href="{{ route($submenu['route']) }}">
                            <i class="{{ $submenu['icon'] }}"></i>
                            <span class="ml-2">{{ $submenu['name'] }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
    </li>
@endif
