<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 archivo JS</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('products.js.file.show', [$product, $jsFile->jsVersion, $jsFile]) }}"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            <button type="submit" form="js-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-4xl">
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6">

                {{-- Información del archivo --}}
                <div class="mb-6 pb-6 border-b border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Producto</label>
                            <p class="font-semibold text-gray-900">{{ $jsFile->jsVersion->product->name }}</p>
                            <p class="text-xs text-gray-600 font-mono">{{ $jsFile->jsVersion->product->slug }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Versión</label>
                            <p class="font-mono font-semibold text-gray-900">{{ $jsFile->jsVersion->version }}</p>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">Creado por</label>
                            <p class="text-sm font-semibold text-gray-900">{{ $jsFile->creator?->name ?? 'N/A' }}</p>
                            <p class="text-xs text-gray-600">{{ $jsFile->created_at->format('Y-m-d H:i') }}</p>
                        </div>
                    </div>
                </div>

                <form wire:submit="save" id="js-edit-form" class="space-y-6">
                    {{-- Nombre del archivo --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Nombre del archivo (sin extensión) *</label>
                        <input type="text"
                               wire:model="filename"
                               class="w-full rounded-lg border border-gray-200 px-4 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('filename') border-red-500 @enderror">
                        @error('filename')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Editor JS --}}
                    <div>
                        {{-- Sin botón «Validar JS»: ver el mismo cambio en `scss/edit`. --}}
                        <div class="mb-2">
                            <label class="block text-sm font-medium text-gray-700">Contenido JavaScript *</label>
                        </div>

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

                        {{-- **Ya no se dice «JS válido».** Lo único que comprueba
                             `validateJS()` es que el contenido no esté vacío, así que la
                             palomita verde daba por bueno un archivo con una llave sin
                             cerrar. Un visto bueno que no comprueba nada es peor que
                             ninguno: quien lo ve deja de mirar. La sintaxis la revisa ahora
                             el editor, que marca cada error donde está. --}}
                        {{-- **Un solo sitio donde mirar lo que va mal.** Antes era una
                             línea suelta que decía «inválido» sin decir qué, y al lado una
                             palomita verde que daba por bueno cualquier cosa que no
                             estuviera vacía. Esto enseña lo que se ha encontrado, con su
                             número de línea, y separa lo que impide guardar de lo que solo
                             conviene saber. --}}
                        <x-revision-del-codigo :avisos="$revision" />

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

</div>
