<div class="max-w-4xl mx-auto">
    <a href="{{ route('projects.dashboard', $project) }}" wire:navigate class="btn btn-ghost btn-sm gap-1 mb-3">
        <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
    </a>

    <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div>
            <h1 class="text-xl font-bold">Plantillas del proyecto</h1>
            <p class="text-sm text-base-content/60">{{ $project->name }} · marca las plantillas globales que quieres usar al inspeccionar este proyecto</p>
        </div>
        @can('manage templates')
            <a href="{{ route('inspection-templates') }}" wire:navigate class="btn btn-outline btn-sm gap-1">
                <x-heroicon-o-cog-6-tooth class="w-4 h-4" /> Gestionar catálogo
            </a>
        @endcan
    </div>

    <div class="card bg-base-100 border border-base-300">
        <div class="card-body p-4">
            <div class="form-control mb-3">
                <input type="text" wire:model.live.debounce.300ms="search" class="input input-bordered input-sm" placeholder="Buscar plantilla por nombre…" />
            </div>

            @if($templates->isEmpty())
                <p class="text-sm text-base-content/40 py-6 text-center">
                    No hay plantillas en el catálogo.
                    @can('manage templates')
                        <a href="{{ route('inspection-templates') }}" wire:navigate class="link link-primary">Crear una</a>.
                    @endcan
                </p>
            @else
                <div class="overflow-x-auto rounded-lg border border-base-300">
                    <table class="table table-sm">
                        <thead class="bg-base-200">
                            <tr>
                                <th class="w-10">Asignada</th>
                                <th>Plantilla</th>
                                <th>Descripción</th>
                                <th class="text-center">Campos</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($templates as $tpl)
                                @php $assigned = in_array($tpl->id, $assignedIds, true); @endphp
                                <tr wire:key="tpl-{{ $tpl->id }}" class="hover">
                                    <td>
                                        <input type="checkbox"
                                               wire:click="toggle({{ $tpl->id }})"
                                               @checked($assigned)
                                               class="checkbox checkbox-sm checkbox-primary" />
                                    </td>
                                    <td class="font-medium">{{ $tpl->name }}</td>
                                    <td class="text-sm text-base-content/60">{{ $tpl->description ?? '—' }}</td>
                                    <td class="text-center"><span class="badge badge-ghost badge-sm">{{ count($tpl->fields ?? []) }}</span></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <p class="text-xs text-base-content/50 mt-2">{{ count($assignedIds) }} plantilla(s) asignadas a este proyecto.</p>
            @endif
        </div>
    </div>
</div>
