                    <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>

                    {{-- Media del proyecto --}}
                    @if($selectedFeature)
                        <div class="mt-6">
                            <h3 class="font-semibold text-lg mb-3">{{ __("Media for this element") }}</h3>
                            @if($selectedFeature->media()->exists())
                                <div class="space-y-2 max-h-96 overflow-y-auto">
                                    @foreach($selectedFeature->media as $media)
                                        <div 
                                            wire:click="openMediaViewer({{ $media->id }})"
                                            class="cursor-pointer border rounded p-3 hover:shadow-md transition-shadow"
                                        >
                                            <div class="flex justify-between items-start">
                                                <div class="flex-1">
                                                    <strong>{{ $media->name }}</strong><br>
                                                    <span class="text-xs text-gray-500">
                                                        {{ $media->mime_type }} • {{ $media->created_at->diffForHumans() }} {{ __("ago") }}
                                                    </span>
                                                </div>
                                                <div class="text-center">
                                                    <span class="badge badge-sm">{{ __("View") }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center text-gray-400 py-4">
                                    <p>{{ __("No media for this element yet") }}</p>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="mt-6">
                            <h3 class="font-semibold text-lg mb-3">{{ __("Project Media") }}</h3>
                            @if($projectMedia->isEmpty())
                                <div class="text-center text-gray-400 py-4">
                                    <p>{{ __("No project media yet") }}</p>
                                </div>
                            @else
                                <div class="space-y-2 max-h-96 overflow-y-auto">
                                    @foreach($projectMedia as $media)
                                        <div 
                                            wire:click="openMediaViewer({{ $media->id }})"
                                            class="cursor-pointer border rounded p-3 hover:shadow-md transition-shadow"
                                        >
                                            <div class="flex justify-between items-start">
                                                <div class="flex-1">
                                                    <strong>{{ $media->name }}</strong><br>
                                                    <span class="text-xs text-gray-500">
                                                        {{ $media->mime_type }} • {{ $media->created_at->diffForHumans() }} {{ __("ago") }}
                                                    </span>
                                                    @if($media->model_type === 'App\\Models\\Feature')
                                                        <span class="text-xs text-gray-400">{{ __("Feature:") }} {{ optional($media->model)->name ?? '' }}</span>
                                                    @elseif($media->model_type === 'App\\Models\\Inspection')
                                                        <span class="text-xs text-gray-400">{{ __("Inspection:") }} {{ optional($media->model)->template->name ?? '' }}</span>
                                                    @endif
                                                </div>
                                                <div class="text-center">
                                                    <span class="badge badge-sm">{{ __("View") }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endif