{{--
    Árvore do menu + criação de item. O módulo preenche apenas o conteúdo; shell, título e
    breadcrumb estrutural são do layout (ADR-009/ADR-016).
--}}
<x-layout::cms
    :title="__('menus::cms.items_title')"
    :breadcrumbs="[
        ['label' => __('menus::menu.title'), 'url' => route('menus.cms.index')],
        ['label' => $menu->nome, 'url' => route('menus.cms.items', $menu)],
        ['label' => __('menus::cms.items_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.tree_title', ['menu' => $menu->nome])">
            <div class="mb-4 flex flex-wrap justify-between gap-2">
                <p class="text-sm opacity-70"><code>{{ $menu->slug }}</code></p>
                <x-cms::button variant="ghost" :href="route('menus.cms.edit', $menu)">
                    <x-ui::icon name="pencil" />
                    <span>{{ __('menus::cms.edit_menu') }}</span>
                </x-cms::button>
            </div>

            @if ($tree === [])
                <x-cms::empty-state :title="__('menus::cms.tree_empty')" />
            @else
                <x-cms::table :caption="__('menus::cms.tree_caption')">
                    <thead>
                        <tr>
                            <th scope="col">{{ __('menus::cms.col_label') }}</th>
                            <th scope="col">{{ __('menus::cms.col_position') }}</th>
                            <th scope="col">{{ __('menus::cms.col_status') }}</th>
                            <th scope="col" class="text-end">{{ __('menus::cms.col_actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @include('menus::cms.partials.menu-tree', [
                            'nodes' => $tree,
                            'menu' => $menu,
                            'locale' => $locale,
                        ])
                    </tbody>
                </x-cms::table>
            @endif
        </x-cms::card>

        <x-cms::card :title="__('menus::cms.item_create_title')">
            <form method="post" action="{{ route('menus.cms.items.store', $menu) }}" class="grid gap-6">
                @csrf

                @include('menus::cms.partials.menu-item-fields', [
                    'item' => null,
                    'parentOptions' => $parentOptions,
                    'types' => $types,
                ])

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