@extends('admin.layouts.app')

@section('title', 'Menus')
@section('page_title', 'Menus')

@section('content')
    <div class="mb-4 flex justify-end">
        @can('create', \App\Modules\Menus\Models\Menu::class)
            <a href="{{ route('admin.menus.create') }}"
               class="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800">
                New Menu
            </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-left font-medium text-slate-600">Items</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 ($menus as $menu)
                    <tr>
                        <td class="px-4 py-3">{{ $menu->name }}</td>
                        <td class="px-4 py-3 text-slate-500">{{ $menu->slug }}</td>
                        <td class="px-4 py-3">{{ $menu->items_count }}</td>
                        <td class="px-4 py-3 text-right">
                            @can('update', $menu)
                                <a href="{{ route('admin.menus.edit', $menu) }}" class="text-blue-700 hover:underline">Edit</a>
                            @endcan
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-4 py-8 text-center text-slate-500">No menus yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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