@extends('layouts.admin')
@section('title','Blog categories')
@section('content')
<x-admin.page title="Blog categories" subtitle="Organize articles for navigation, filters, and SEO landing pages.">
    <x-slot:actions>
        <a href="{{ route('admin.posts.index') }}" class="admin-btn">Posts</a>
        <a href="{{ route('admin.post-categories.create') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plus" class="h-3.5 w-3.5"></i> New category
        </a>
    </x-slot:actions>
    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    <div class="overflow-hidden rounded-xl border border-[var(--color-admin-border)] bg-white">
        <table class="w-full text-sm">
            <thead class="bg-[#fafbfb] text-left text-xs uppercase tracking-wide text-[#6d7175]">
                <tr>
                    <th class="px-4 py-3">Name</th>
                    <th class="px-4 py-3">Handle</th>
                    <th class="px-4 py-3">Posts</th>
                    <th class="px-4 py-3">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($categories as $category)
                    <tr class="border-t border-[var(--color-admin-border)]">
                        <td class="px-4 py-3 font-medium">{{ $category->name }}</td>
                        <td class="px-4 py-3 font-mono text-xs">{{ $category->handle }}</td>
                        <td class="px-4 py-3">{{ $category->posts_count }}</td>
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.post-categories.edit', $category) }}" class="admin-btn !px-2 !py-1 text-xs">Edit</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="px-4 py-10 text-center text-[#6d7175]">No categories yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $categories->links() }}</div>
</x-admin.page>
@endsection