@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp
<x-drawer position="left" width="80%">

    <x-slot:toggle>
        <button type="button"
            class="flex flex-col fixed bottom-8 left-8 justify-center items-center h-20 bg-white rounded-full border-2 border-[#1e1e1e] md:hidden aspect-square">
            <x-heroicon-o-funnel class="h-9 text-[#1e1e1e]" />
            <span>Filtros</span>
        </button>
    </x-slot:toggle>


    <x-slot:header>
        <div class="flex justify-between items-center">
            <a href="{{ route('home') }}" wire:navigate>
                <img src="{{ Storage::url(setting('site.logo')) }}" alt="" class="max-h-14 ml-2 xl:max-h-max">
            </a>
        </div>
    </x-slot:header>

    <div class="font-bold text-sm text-black uppercase [&>span]:cursor-pointer">
        <span class="flex justify-between items-center">
            Categorias
        </span>
    </div>

    <div class="p-3 ">

        <template x-for="(category, index) in categories" x-key="index">
            <span class="text-[#939393] text-base flex justify-start gap-1 items-center cursor-pointer mb-1"
                @click="window.location.href = route('productos', category.slug)">

                <span>
                    <template x-if="category.id == $wire.category.id">
                        <x-fas-square class="h-4" />
                    </template>
                    <template x-if="category.id != $wire.category.id">
                        <x-far-square class="h-4" />
                    </template>
                </span>
                <span class="capitalize" x-text="category.name"></span>
            </span>
        </template>

    </div>

</x-drawer>