@php
    $columns = [
        [
            'label' => 'Nombre',
            'width' => 'w-200',
            'render' => fn($section) => e($section->title),
        ],
        [
            'label' => 'Contenido',
            'width' => 'auto',
            'isHtml' => true,
            'render' => fn($section) => e($section->content),
        ],
        [
            'label' => 'Orden',
            'width' => 'auto',
            'render' => fn($section) => e($section->order),
        ],
        [
            'label' => 'Acciones',
            'width' => '240px',
            'render' => function ($section) use ($sectionTemplate) {
                return '<a href="' . route('contract-sections.show', [
                    'id' => $section->id,
                    'idTemplateSection' => $sectionTemplate->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"><span class="text-[#6a7681]">{{ $sectionTemplate->templateName }} /</span> {{ $sectionTemplate->title }}</h2>
            <x-controls.button href="{{ route('contract-sections.create', $sectionTemplate->id) }}" variant="primary">
                Nueva sección
            </x-controls.button>
        </div>
        <div class="py-3">
            <x-tables.table-with-pagination :columns="$columns" :items="$sections" />
        </div>
    </div>
</x-layouts.auth-layout>