{{-- Feature seleccionado --}}
                    @if($selectedFeature)
                        <div class="border rounded-lg p-3 mb-3 bg-base-200">
                            <h3 class="font-bold text-sm">{{ $selectedFeature->name ?? __('Feature') }}</h3>
                            <p class="text-xs text-gray-500">{{ __('Phase') }}: {{ $selectedFeature->layer?->phase?->name ?? '—' }}</p>
                            <p class="text-xs text-gray-500">{{ __('Layer') }}: {{ $selectedFeature->layer?->name ?? '—' }}</p>
                        </div>

                        {{-- {{ __("Progress") }} --}}
                        <div class="form-control mb-3">
                            <label class="label-text">{{ __("Progress") }}: {{ $editProgress }}%</label>
                            <input type="range" min="0" max="100" wire:model.live="editProgress" class="range range-primary range-sm" />
                            <div class="flex justify-between text-xs">
                                <span>0%</span><span>50%</span><span>100%</span>
                            </div>
                        </div>

                        <div class="form-control mb-3">
                            <label class="label-text">{{ __("Responsible") }}</label>
                            <input type="text" wire:model="editResponsible" class="input input-bordered input-sm" placeholder="{{ __('Name of responsible') }}" />
                        </div>

                        <button wire:click="saveFeatureProgress" class="btn btn-primary btn-sm w-full mb-3">
                            💾 {{ __("Save progress") }}
                        </button>

                        {{-- Gestor de archivos del feature --}}
                        <details class="mb-3 border rounded-lg">
                            <summary class="text-xs font-semibold cursor-pointer p-2 bg-base-200 rounded-t-lg">
                                📎 {{ __("Files of element") }}
                            </summary>
                            <div class="p-2">
                                @livewire('media-manager', [
                                    'mediableType' => 'App\\Models\\Feature',
                                    'mediableId' => $selectedFeature->id,
                                ], key('media-feature-' . $selectedFeature->id))
                            </div>
                        </details>

                        {{-- Templates / Inspecciones --}}
                        @if($templates->isNotEmpty())
                            <div class="divider text-xs">{{ __("Inspection") }}</div>
                            <div class="form-control mb-2">
                                <label class="label-text">{{ __('Template') }}</label>
                                <select wire:model.live="selectedTemplateId" wire:change="onTemplateChange" class="select select-bordered select-sm">
                                    <option value="">{{ __('Select template...') }}</option>
                                    @foreach($templates as $t)
                                        <option value="{{ $t->id }}">{{ $t->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            @if($selectedTemplateId && !empty($inspectionFormData))
                                @php $template = $templates->firstWhere('id', $selectedTemplateId); @endphp
                                @if($template)
                                    @foreach($template->fields as $field)
                                        <div class="mb-2">
                                            <label class="label-text text-xs">{{ $field['label'] }} @if($field['required'] ?? false)<span class="text-error">*</span>@endif</label>
                                            @switch($field['type'] ?? 'text')
                                                @case('percentage')
                                                    <div class="flex items-center gap-1">
                                                        <input type="number" wire:model="inspectionFormData.{{ $field['name'] }}" min="0" max="100" class="input input-bordered input-sm w-16" />
                                                        <span class="text-xs">%</span>
                                                        <input type="range" min="0" max="100" wire:model.live="inspectionFormData.{{ $field['name'] }}" class="range range-primary range-xs flex-1" />
                                                    </div>
                                                    @break
                                                @case('boolean')
                                                    <input type="checkbox" wire:model="inspectionFormData.{{ $field['name'] }}" class="checkbox checkbox-sm" />
                                                    @break
                                                @case('select')
                                                    <select wire:model="inspectionFormData.{{ $field['name'] }}" class="select select-bordered select-sm w-full">
                                                        <option value="">{{ __('Select') }}</option>
                                                        @foreach(explode(',', $field['options'] ?? '') as $opt)
                                                            <option value="{{ trim($opt) }}">{{ trim($opt) }}</option>
                                                        @endforeach
                                                    </select>
                                                    @break
                                                @case('textarea')
                                                    <textarea wire:model="inspectionFormData.{{ $field['name'] }}" rows="2" class="textarea textarea-bordered textarea-sm w-full"></textarea>
                                                    @break
                                                @default
                                                    <input type="{{ $field['type'] ?? 'text' }}" wire:model="inspectionFormData.{{ $field['name'] }}" class="input input-bordered input-sm w-full" />
                                            @endswitch
                                        </div>
                                    @endforeach
                                    <button wire:click="saveInspection" class="btn btn-primary btn-xs w-full mt-1">{{ __("Register inspection") }}</button>
                                @endif
                            @endif

                            {{-- {{ __("History") }} de inspecciones --}}
                            @if($inspectionHistory->isNotEmpty())
                                <div class="divider text-xs">{{ __("History") }}</div>
                                <div class="space-y-1 max-h-40 overflow-y-auto">
                                    @foreach($inspectionHistory as $ins)
                                        <div class="border rounded p-2 text-xs">
                                            <div class="flex justify-between">
                                                <span class="font-medium">{{ $ins->template?->name ?? '{{ __("Inspection") }}' }}</span>
                                                <span class="text-gray-400">{{ $ins->created_at->diffForHumans() }}</span>
                                            </div>
                                            @if($ins->user)<span class="text-gray-500">{{ __('by') }} {{ $ins->user->name }}</span>@endif
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        @else
                            <div role="alert" class="alert alert-vertical sm:alert-horizontal">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <div>
                                    <h3 class="font-bold">{{ __("No templates yet") }}</h3>
                                    <div class="text-xs">{{ __("Create an inspection template") }}.</div>
                                </div>
                                <a href="{{ route('projects.templates', $project) }}" class="btn btn-primary btn-sm">{{ __("Create") }}</a>
                            </div>
                        @endif
                    @else
                        <div class="text-center text-gray-400 py-8">
                            <p class="text-lg">👆</p>
                            <p>{{ __('Click on a map element or search above to edit it') }}</p>
                        </div>
                    @endif