Category Card code

@props([
    'category',
])

@php
    /*
    | Category summary card for the categories index grid.
    |
    | Usage:
    |   <x-ui.category-card :category="$category" />
    */
@endphp

<x-ui.card {{ $attributes->merge(['class' => 'flex flex-col']) }}>
    <div class="flex items-start justify-between gap-3">
        <a href="{{ route('categories.show', $category) }}" class="min-w-0">
            <h3 class="truncate text-lg font-semibold text-gray-900 transition-colors hover:text-brand-600 dark:text-white dark:hover:text-brand-400">
                {{ $category->name }}
            </h3>
        </a>
        <x-ui.badge variant="brand" icon="article">
            {{ $category->posts_count }} {{ Str::plural('post', $category->posts_count) }}
        </x-ui.badge>
    </div>

    @if (auth()->user()?->isAdmin())
        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Order {{ $category->sort_order }}</p>
    @endif

    @if ($category->description)
        <p class="mt-2 line-clamp-2 text-sm text-gray-500 dark:text-gray-400">{{ $category->description }}</p>
    @endif

    <div class="mt-4 flex items-center justify-between gap-2 border-t border-gray-100 pt-4 dark:border-gray-800">
        <x-ui.button :href="route('categories.show', $category)" variant="ghost" size="sm" icon="arrow-right">
            View posts
        </x-ui.button>

        @if (auth()->user()?->isAdmin())
            <div class="flex items-center gap-1">
                <x-ui.icon-button
                    :href="route('admin.categories.edit', $category)"
                    icon="pencil-simple"
                    variant="ghost"
                    size="sm"
                    :label="'Edit '.$category->name"
                />
                <x-ui.icon-button
                    icon="trash"
                    variant="ghost"
                    size="sm"
                    :label="'Delete '.$category->name"
                    x-data=""
                    x-on:click="$dispatch('open-modal', 'delete-category-{{ $category->id }}')"
                />
            </div>
        @endif
    </div>
</x-ui.card>