<div class="w-72 min-h-screen h-screen">

    <div class="bg-[#F9FAFB] rounded-3xl px-4 py-10 h-full flex flex-col">

        <div class="flex w-full">
            <img src="{{ Storage::url('images_static/tresipunt.png') }}" alt="Tresipunt Manager" class="w-2/3">
        </div>

        <div class="flex w-full mt-4">
            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Buscar" class="w-full rounded-lg border-2 border-gray-200 px-4 py-2">
        </div>

        <div class="flex flex-col gap-2 w-full h-full mt-4">
            @foreach ($this->filteredMenuItems as $item)
                <a class="flex items-center w-full h-12 rounded px-4 {{ Str::is(explode('.', $item['route'])[0] . '*', Request::route()->getName()) ? 'bg-[#F3F4F5] font-bold' : '' }} transition-all duration-150 hover:bg-[#F3F4F5]"
                    href="{{ route($item['route']) }}">
                    <img src="{{ asset('vendor/blade-untitledui-icons/'.$item['icon'].'.svg') }}" width="24" height="24" class="{{ Str::is(explode('.', $item['route'])[0] . '*', Request::route()->getName()) ? 'svg-fill-orange' : 'svg-fill-gray' }}"/>
                    <span class="ml-2 text-lg">{{ $item['label'] }}</span>
                </a>
            @endforeach
        </div>

        <div class="flex w-full mt-auto">
            <a class="flex items-center w-full h-12 rounded px-4 {{ request()->routeIs('configurations.*') ? 'bg-[#F3F4F5]' : '' }} transition-all duration-150 hover:bg-[#F3F4F5]"
                href="{{ route('configurations.environments-types.index') }}">
                <img src="{{ asset('vendor/blade-untitledui-icons/settings.svg') }}" width="24" height="24" class="svg-fill-gray"/>
                <span class="ml-2 text-lg">Configuración</span>
            </a>
        </div>

        <hr class="w-full my-4 border-gray-200">

        <div class="flex w-full">
            <div class="flex items-center">
                <img src="https://api.dicebear.com/9.x/bottts-neutral/svg?seed={{ auth()->user()->email }}" width="50" height="50" class="rounded-full"/>
            </div>
            <div class="flex flex-col">
                <span class="ml-2 text-lg">{{ auth()->user()->name }} {{ auth()->user()->last_name }}</span>
                <span class="ml-2 text-sm text-gray-500">{{ auth()->user()->email }}</span>
            </div>
            <div class="flex items-center ml-auto">
                <button wire:click="logout">
                    <img src="{{ asset('vendor/blade-untitledui-icons/log-out.svg') }}" width="24" height="24" class="svg-fill-gray"/>
                </button>
            </div>
        </div>

    </div>

</div>
