<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 SCSS CDN</h1>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('products.scss-cdn.bundle.show', [$product, $bundle]) }}"
                class="text-gray-700 hover:text-gray-900 px-4 py-2">
                Cancelar
            </a>
            <button type="submit" form="file-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

            @if (session()->has('error'))
                <div class="mb-4 rounded bg-red-100 px-4 py-2 text-red-700">
                    {{ session('error') }}
                </div>
            @endif

            {{-- Información del archivo --}}
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6 mb-6">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Archivo: {{ $file->relative_path }}</h3>
                    @php
                        $fileContent = \App\Services\ScssCdn\ScssCdnStorageService::getFile($product, $bundle, $file->relative_path);
                        $fileSize = $fileContent ? strlen($fileContent) : 0;
                    @endphp
                    <p class="text-sm text-gray-600 mt-1">Tamaño: {{ number_format($fileSize, 0, ',', '.') }} bytes</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">URL securizada:</label>
                    <div class="flex items-center gap-2">
                        <input type="text"
                               value="{{ $fileUrl }}"
                               readonly
                               class="flex-1 rounded-lg border border-gray-200 px-4 py-2 bg-gray-50 font-mono text-sm">
                        <button onclick="copiarAlPortapapeles('{{ $fileUrl }}')"
                                class="rounded-lg bg-gray-600 px-4 py-2 text-white hover:bg-gray-700 text-sm font-semibold">
                            Copiar
                        </button>
                    </div>
                </div>
            </div>

            {{-- Editor --}}
            <div class="w-full rounded-lg bg-white border border-gray-200 px-8 py-6">
                <form wire:submit.prevent="save" id="file-edit-form">
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-2">
                            <label class="block text-sm font-medium text-gray-700">
                                Contenido SCSS
                            </label>
                            {{-- Sin botón «Validar SCSS»: solo miraba si estaba vacío. Ver
                                 el mismo cambio en `scss/edit`. --}}
                        </div>

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

                        {{-- Sin «✓ SCSS válido»: lo único que comprueba `validateScss()` es
                             que no esté vacío. Ver el mismo cambio en `scss/edit`. --}}
                        <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>
