@extends('admin.layouts.app')

@section('title', 'Blog Categories')
@section('page_title', 'Blog Categories')

@section('content')
    <div class="mb-4 flex justify-end">
        @can('create', Apex\Modules\Blog\Models\BlogCategory::class)
            <a href="{{ route('admin.blog.categories.create') }}"
               class="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800">
                New Blog Categories
            </a>
        @endcan
    </div>

    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
        <table class="min-w-full divide-y divide-slate-200 text-sm">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-4 py-3 text-left font-medium text-slate-600">Name</th>
                    <th class="px-4 py-3 text-left font-medium text-slate-600">Slug</th>
                    <th class="px-4 py-3 text-right font-medium text-slate-600">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
                @forelse ($items as $item)
                    <tr>
                        <td class="px-4 py-3">{{ $item->name }}</td>
                        <td class="px-4 py-3">{{ $item->slug }}</td>
                        <td class="px-4 py-3 text-right">
                            @can('update', $item)
                                <a href="{{ route('admin.blog.categories.edit', $item) }}" class="text-blue-700 hover:underline">Edit</a>
                            @endcan
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="px-4 py-8 text-center text-slate-500">No records yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">{{ $items->links() }}</div>
@endsection