                    <div class="space-y-4">
                        <!-- Selector de feature -->
                        <div class="mb-4">
                            <label class="label-text">{{ __("Select Element") }}</label>
                            <div class="flex space-x-2">
                                <input 
                                    type="text" 
                                    wire:model="searchFeatures" 
                                    placeholder="{{ __("Search by name, layer or phase...") }}" 
                                    class="input input-bordered input-sm flex-1"
                                />
                                <button 
                                    wire:click="searchFeatures = ''" 
                                    class="btn btn-sm btn-outline"
                                >
                                    {{ __("Clear") }}
                                </button>
                            </div>
                        </div>

                        <!-- Lista de features filtrados -->
                        <div class="max-h-96 overflow-y-auto border rounded border-base-200">
                            @if($filteredFeatures->isEmpty())
                                <div class="text-center text-gray-400 py-4">
                                    <p>{{ __("No elements found") }}</p>
                                </div>
                            @else
                                <div class="space-y-1">
                                    @foreach($filteredFeatures as $feature)
                                        <div 
                                            wire:click="selectFeatureFromList({{ $feature->id }})"
                                            class="cursor-pointer px-3 py-2 border-b border-base-100 hover:bg-base-50"
                                            :class="{'bg-base-200': selectedFeature && selectedFeature->id == {{$feature->id}}}"
                                        >
                                            <div class="flex justify-between">
                                                <div>
                                                    <strong class="text-sm">{{ $feature->name }}</strong><br>
                                                    <span class="text-xs text-gray-500">
                                                        {{ optional(optional($feature->layer)->phase)->name ?? '—' }} > 
                                                        {{ optional($feature->layer)->name ?? '—' }}
                                                    </span>
                                                </div>
                                                <div class="text-xs text-right">
                                                    <span class="badge badge-sm {{ $feature->progress >= 100 ? 'badge-success' : 'badge-ghost' }}">
                                                        {{ $feature->progress }}%
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Historial de inspecciones --}}
                    @if($selectedFeature)
                        <div class="mt-6">
                            <h3 class="font-semibold text-lg mb-3">{{ __("Inspection History") }}</h3>
                            @if($inspectionHistory->isEmpty())
                                <div class="text-center text-gray-400 py-4">
                                    <p>{{ __("No inspections yet for this element") }}</p>
                                </div>
                            @else
                                <div class="space-y-2 max-h-96 overflow-y-auto">
                                    @foreach($inspectionHistory as $inspection)
                                        <div 
                                            wire:click="openInspectionViewer({{ $inspection->id }})"
                                            class="cursor-pointer border rounded p-3 hover:shadow-md transition-shadow"
                                        >
                                            <div class="flex justify-between items-start mb-2">
                                                <div class="flex-1">
                                                    <strong>{{ $inspection->template->name ?? 'Inspection' }}</strong><br>
                                                    <span class="text-xs text-gray-500">
                                                        {{ $inspection->created_at->diffForHumans() }} {{ __("ago") }}
                                                    </span>
                                                    @if($inspection->user)
                                                        <span class="text-xs text-gray-400">{{ __("by") }} {{ $inspection->user->name }}</span>
                                                    @endif
                                                </div>
                                                <div class="flex items-center gap-1 ml-2">
                                                    <span class="badge badge-sm">{{ __("View") }}</span>
                                                    @can('edit inspections')
                                                        <button 
                                                            wire:click="$dispatch('edit-inspection', { id: {{ $inspection->id } }})"
                                                            class="btn btn-xs btn-ghost btn-circle"
                                                            title="{{ __('Edit') }}"
                                                            onclick="event.stopPropagation();"
                                                        >
                                                            <x-heroicon-o-pencil class="w-4 h-4" />
                                                        </button>
                                                    @endcan
                                                    @can('delete inspections')
                                                        <button 
                                                            wire:click="$dispatch('delete-inspection', { id: {{ $inspection->id } }})"
                                                            class="btn btn-xs btn-ghost btn-circle btn-error"
                                                            title="{{ __('Delete') }}"
                                                            onclick="event.stopPropagation(); return confirm('{{ __('Delete this inspection? This cannot be undone.') }}');"
                                                        >
                                                            <x-heroicon-o-trash class="w-4 h-4" />
                                                        </button>
                                                    @endcan
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endif