@php
$columns = [
    [
        'label' => 'Clave',
        'width' => '200px',
        'render' => fn($rule) => e($rule->key),
    ],
    [
        'label' => 'Etiqueta',
        'width' => '200px',
        'render' => fn($rule) => e($rule->label),
    ],
    [
        'label' => 'Acciones',
        'width' => '240px',
        'render' => fn($rule) => '<a href="' . route('superadmin.section-rules.show', $rule->id) . '" class="hover:underline font-bold">Ver detalle</a>',
    ],
];
@endphp

<x-layouts.auth-layout>
    <div class="flex flex-col max-w-[960px]">
        <div class="flex flex-wrap justify-between gap-3 py-4">
            <h2 class="text-primary100 font-main text-size-subtitle font-medium">Controles - Reglas de sección</h2>
            <x-controls.button href="{{ route('superadmin.section-rules.create') }}" variant="primary">
                Añadir control
            </x-controls.button>
        </div>
        <div class="py-3">
            <x-tables.table-with-pagination :columns="$columns" :items="$rules" />
        </div>
    </div>
</x-layouts.auth-layout>