<div>
    {{-- Header fijo --}}
    <div class="fixed top-0 left-0 right-0 w-full bg-white flex items-center justify-between p-4 z-50 border-b border-gray-200">
        <div class="flex items-center">
            <img src="{{ Storage::url('images_static/tresipunt-square.svg') }}" alt="Logo" class="w-10 h-10 mr-3">
            <h1 class="text-2xl font-bold">Editar setup</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('products.setups.show', [$product, $setup]) }}"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            <button type="submit" form="setup-edit-form"
                    wire:loading.attr="disabled"
                    class="bg-3ip hover:bg-3ip-light text-white px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
                <span wire:loading.remove>Guardar cambios</span>
                <span wire:loading>Guardando...</span>
            </button>
        </div>
    </div>

    {{-- Contenido --}}
    <div class="w-full px-20 pt-24 pb-8">
        <div class="mx-auto max-w-6xl">
            {{-- Mensajes --}}
            @if (session()->has('success'))
                <div class="mb-4 rounded bg-green-100 px-4 py-2 text-green-700">
                    {{ session('success') }}
                </div>
            @endif

            {{-- Información del setup --}}
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="text-xs text-gray-500 mb-1">Producto</label>
                        <p class="font-semibold text-gray-900">{{ $setup->product->name }}</p>
                        <p class="text-xs text-gray-600 font-mono">{{ $setup->product->slug }}</p>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1">Versión</label>
                        <p class="font-mono font-semibold text-gray-900">{{ $setup->version }}</p>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500 mb-1">Estado</label>
                        <p>
                            @if($setup->status === 'active')
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">Activo</span>
                            @else
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">Deprecado</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>

            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6">
                <form wire:submit="save" id="setup-edit-form" class="space-y-6">
                    {{-- Editor YAML --}}
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <label class="block text-sm font-medium text-gray-700">Contenido YAML *</label>
                            <button type="button"
                                    wire:click="validateYaml"
                                    class="text-sm px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 font-semibold">
                                Validar YAML
                            </button>
                        </div>

                        <x-editor-de-codigo id="yaml-editor"
                                            lenguaje="yaml"
                                            estado="yaml"
                                            :valor="$yaml"
                                            :filas="20"
                                            :error="$errors->has('yaml')" />

                        <x-revision-del-setup :error="$yamlValidationError"
                                              :valido="$yamlValid"
                                              :hay-contenido="! empty($yaml)"
                                              :avisos="$avisosDelSetup"
                                                      :cabecera-descuadrada="$this->cabeceraDescuadrada()" />

                        @error('yaml')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Change Log --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Comentario del cambio</label>
                        <textarea wire:model="changeLog"
                                  rows="3"
                                  placeholder="Describe los cambios realizados en este setup..."
                                  class="w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('changeLog') border-red-500 @enderror"></textarea>
                        @error('changeLog')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-xs text-gray-500 mt-1">Opcional pero recomendado para auditoría</p>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
