<div>
    <div class="mb-8">
        <ul class="uppercase font-medium flex gap-12 justify-center">
            <x-category-filter-pill wire:click="setFilter(-1)" :active="$filter == null">
                Alle
            </x-category-filter-pill>

            @foreach ($tags as $tag)
                <x-category-filter-pill :key="$tag->id" wire:click="setFilter({{ $tag->id }})" :active="$tag->id == $filter?->id">
                    {{ $tag->title }}
                </x-category-filter-pill>
            @endforeach
        </ul>
    </div>

    <div class="flex flex-wrap flex-row gap-4 transition-opacity" wire:loading.class="opacity-0">
        @foreach ($this->categories as $category)
            <x-category.element :category="$category" wire:key="{{ $category->id }}"></x-category.element>
        @endforeach
    </div>
</div>
