<div class="p-2 mt-8">
    <div class="text-center">
        <ul class="uppercase font-medium">
            <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="m-8 flex flex-wrap flex-row gap-4">
        @foreach ($categories as $category)
            @if($filter == null || $category->tags->contains($filter))
                <figure wire:transition wire:key="{{ $category->id }}" class="relative rounded-lg cursor-pointer h-80 flex-grow overflow-hidden">
                    <a href="{{ route('category.show', $category) }}">
                        <img class="max-h-full min-w-full align-bottom object-cover"
                         src="{{ url($category->cover) }}" alt="{{ $category->name }} Cover">
                        <figcaption class="absolute p-4 text-lg text-white top-1/2 bottom-0 bg-opacity-20 min-w-full bg-gradient-to-b from-transparent to-slate-900 flex flex-col-reverse">
                            <span>{{ $category->name }}</span>
                        </figcaption>
                    </a>
                </figure>
            @endif
        @endforeach
    </div>
</div>
