<x-layouts.admin title="Categories">
    <x-admin.page-header title="Categories" subtitle="{{ $categories->total() }} total">
        <x-slot:actions>
            <a href="{{ route('admin.categories.create') }}">
                <x-admin.button variant="accent"><i class="fa-solid fa-plus text-xs"></i> New Category</x-admin.button>
            </a>
        </x-slot:actions>
    </x-admin.page-header>

    <x-admin.card :padded="false">
        @if ($categories->isEmpty())
            <x-admin.empty-state
                icon="fa-solid fa-sitemap"
                title="No categories yet"
                subtitle="Categories organize your storefront's shop and navigation menus."
            >
                <x-slot:action>
                    <a href="{{ route('admin.categories.create') }}">
                        <x-admin.button variant="accent">Create your first category</x-admin.button>
                    </a>
                </x-slot:action>
            </x-admin.empty-state>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Category</th>
                            <th>Parent</th>
                            <th>Products</th>
                            <th>Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $category)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="h-9 w-9 shrink-0 overflow-hidden rounded-lg bg-black/5">
                                            @if ($category->image)
                                                <img src="{{ Storage::url($category->image) }}" alt="" class="h-full w-full object-cover">
                                            @endif
                                        </div>
                                        <span class="font-medium text-ink">{{ $category->name }}</span>
                                    </div>
                                </td>
                                <td class="text-ink/50">{{ $category->parent?->name ?? '—' }}</td>
                                <td class="tabular-nums text-ink/60">{{ $category->products_count }}</td>
                                <td>
                                    <x-admin.badge :color="$category->status->value === 'active' ? 'green' : 'gray'">
                                        {{ ucfirst($category->status->value) }}
                                    </x-admin.badge>
                                </td>
                                <td>
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('admin.categories.edit', $category) }}" class="text-ink/50 hover:text-ink" title="Edit">
                                            <i class="fa-solid fa-pen"></i>
                                        </a>
                                        <x-admin.delete-form
                                            :action="route('admin.categories.destroy', $category)"
                                            confirm-title="Delete '{{ $category->name }}'?"
                                        />
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-black/5 px-5 py-4">
                {{ $categories->links() }}
            </div>
        @endif
    </x-admin.card>
</x-layouts.admin>
