{{--
    Menus do site (CMS): lista + criação. O módulo informa `title`/`breadcrumbs` e preenche **apenas**
    o conteúdo — shell, título e estrutura são do layout (ADR-009/ADR-016).
--}}
<x-layout::cms
    :title="__('menus::cms.title')"
    :breadcrumbs="[
        ['label' => __('menus::menu.title')],
        ['label' => __('menus::cms.title')],
    ]">
    @if (session('status'))
        <x-cms::alert variant="success">{{ session('status') }}</x-cms::alert>
    @endif

    <x-cms::form-errors />

    <div class="grid gap-4">
        <x-cms::card :title="__('menus::cms.list_title')">
            @if ($menus->isEmpty())
                <x-cms::empty-state :title="__('menus::cms.empty')" />
            @else
                <x-cms::table :caption="__('menus::cms.caption')">
                    <thead>
                        <tr>
                            <th scope="col">{{ __('menus::cms.col_name') }}</th>
                            <th scope="col">{{ __('menus::cms.col_slug') }}</th>
                            <th scope="col">{{ __('menus::cms.col_items') }}</th>
                            <th scope="col" class="text-end">{{ __('menus::cms.col_actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($menus as $menu)
                            <tr>
                                <td>
                                    <a href="{{ route('menus.cms.edit', $menu) }}" class="font-medium link link-hover">
                                        {{ $menu->nome }}
                                    </a>
                                    @if (filled($menu->descricao))
                                        <span class="block text-xs opacity-70">{{ $menu->descricao }}</span>
                                    @endif
                                </td>
                                <td><code>{{ $menu->slug }}</code></td>
                                <td>{{ $menu->items_count }}</td>
                                <x-cms::table-actions :label="__('menus::cms.col_actions')">
                                        <x-cms::button variant="primary" :href="route('menus.cms.items', $menu)">
                                            <x-ui::icon name="list" />
                                            <span>{{ __('menus::cms.manage_items') }}</span>
                                        </x-cms::button>
                                        <x-cms::button variant="ghost" :href="route('menus.cms.edit', $menu)">
                                            <x-ui::icon name="pencil" />
                                            <span class="sr-only">{{ __('menus::cms.action_edit') }}</span>
                                        </x-cms::button>
                                </x-cms::table-actions>
                            </tr>
                        @endforeach
                    </tbody>
                </x-cms::table>
            @endif
        </x-cms::card>

        <x-cms::card :title="__('menus::cms.create_title')">
            <form method="post" action="{{ route('menus.cms.store') }}" class="grid gap-4">
                @csrf

                <x-cms::form-group name="nome" :label="__('menus::cms.name_field')" required />
                <x-cms::form-group
                    name="slug"
                    :label="__('menus::cms.slug_field')"
                    :help="__('menus::cms.slug_help')"
                />
                <x-cms::form-group
                    name="descricao"
                    :label="__('menus::cms.description_field')"
                    :help="__('menus::cms.description_help')"
                />

                <div class="flex justify-end">
                    <x-cms::button type="submit" variant="primary">
                        <x-ui::icon name="plus" />
                        <span>{{ __('menus::cms.create_submit') }}</span>
                    </x-cms::button>
                </div>
            </form>
        </x-cms::card>
    </div>
</x-layout::cms>