<x-layouts.auth-layout>
    <!-- Modal de confirmación -->
    <x-modals.confirm-modal id="confirm-delete" title="¿Eliminar Plantilla de Contrato?" :message="'¿Estás seguro de que deseas eliminar <strong>' . $dto->name . '</strong>? Esta acción no se puede deshacer.'"
        :action="route('superadmin.contract-template.destroy', $id)" confirm-text="Eliminar" />

    <div class="flex flex-col max-w-[960px]">
        <div class="flex flex-wrap gap-2 py-4">
            <a class="text-[#6a7681] text-base font-medium leading-normal"
                href="{{ route('superadmin.contract-template.index') }}">Plantilla de contrato</a>
            <span class="text-[#6a7681] text-base font-medium leading-normal">/</span>
            <span class="text-[#121416] text-base font-medium leading-normal">{{ $dto->name }}</span>
        </div>
        <div class="flex flex-wrap justify-between gap-3 py-4">
            <div class="flex min-w-72 flex-col gap-3">
                <p class="text-[#121416] tracking-light text-[32px] font-bold leading-tight">Detalles</p>
                <p class="text-[#6a7681] text-sm font-normal leading-normal">Ver y administrar la información</p>
            </div>
        </div>
        {{-- Información --}}
        <h3 class="text-[#121416] text-lg font-bold leading-tight tracking-[-0.015em] pb-2 pt-4">Información</h3>
        <div class="py-4 grid grid-cols-[20%_1fr] gap-x-6">
            <div class="col-span-2 grid grid-cols-subgrid border-t border-t-[#dde1e3] py-5">
                <p class="text-[#6a7681] text-sm font-normal leading-normal">Descripción</p>
                <p class="text-[#121416] text-sm font-normal leading-normal">{{ $dto->description }}</p>
            </div>
        </div>

        {{-- Secciones --}}
        @if (!empty($dto->sections))
            <h3 class="text-[#121416] text-lg font-bold leading-tight tracking-[-0.015em] pb-2 pt-4">Secciones</h3>
            <ul class="space-y-2">
                @foreach ($dto->sections as $section)
                    <li class="flex items-center gap-3 p-3 border border-[#dde1e3] rounded bg-white shadow-sm">
                        <div
                            class="flex items-center justify-center w-8 h-8 bg-[#f3f4f6] rounded text-[#6a7681] text-sm font-semibold">
                            {{ $section['order'] ?? $index + 1 }}
                        </div>
                        <span class="text-[#121416] text-sm font-medium leading-normal">{{ $section['title'] }}</span>
                    </li>
                @endforeach
            </ul>
        @endif

        <div class="flex justify-stretch">
            <div class="flex flex-1 gap-3 flex-wrap py-3 justify-end">
                <x-controls.button href="{{ route('superadmin.contract-template.edit', $id) }}" variant="primary">
                    Editar
                </x-controls.button>
                <x-controls.button variant="remove" data-modal="confirm-delete" class="open-modal-btn">Eliminar
                    plantilla</x-controls.button>
            </div>
        </div>
    </div>
</x-layouts.auth-layout>