{{--
    Índice de Configurações (CMS): o módulo informa `title`/`breadcrumbs` e preenche **apenas**
    o conteúdo — a estrutura e o título da tela são do shell (ADR-009/ADR-016/ADR-036).
--}}
<x-layout::cms
    :title="__('configuracoes::cms.title')"
    :breadcrumbs="[
        ['label' => __('configuracoes::cms.title')],
    ]">
    <x-cms::card>
        <p class="mb-4 text-sm opacity-70">{{ __('configuracoes::cms.intro') }}</p>

        <x-cms::data-table
            :caption="__('configuracoes::cms.sections')"
            :columns="[
                ['label' => __('configuracoes::cms.column_section')],
                ['label' => __('configuracoes::cms.column_description')],
                ['label' => __('configuracoes::cms.column_actions'), 'class' => 'text-end'],
            ]"
            :empty="$sections === []"
            :empty-label="__('configuracoes::cms.empty')">
            @foreach ($sections as $section)
                <tr>
                    <td>
                        <a href="{{ route('configuracoes.cms.edit', ['section' => $section['section']]) }}"
                           class="link link-hover font-medium">
                            {{ __($section['label']) }}
                        </a>
                    </td>
                    <td>{{ __($section['description']) }}</td>
                    <td class="text-end">
                        <x-cms::button variant="ghost" :href="route('configuracoes.cms.edit', ['section' => $section['section']])">
                            <x-ui::icon name="pencil" />
                            <span class="sr-only">{{ __('configuracoes::cms.edit') }}</span>
                        </x-cms::button>
                    </td>
                </tr>
            @endforeach
        </x-cms::data-table>
    </x-cms::card>
</x-layout::cms>