<div>
    
    <div class="w-full flex items-center mb-8">
        <a href="<?php echo e(route('products.scss.version.show', [$product, $scssFile->scssVersion])); ?>"
            class="flex rounded-lg bg-white border border-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-100 font-bold">
            <img src="<?php echo e(asset('vendor/blade-untitledui-icons/arrow-narrow-left.svg')); ?>" alt="Volver" class="w-6 h-6">
            <span class="ml-2">Volver</span>
        </a>
        <div class="ml-4 flex items-center text-sm text-gray-500">
            <a href="<?php echo e(route('products.scss.index', $product)); ?>"
               class="text-orange-600 hover:text-orange-800">
                Versiones SCSS
            </a>
            <span class="mx-2">/</span>
            <a href="<?php echo e(route('products.scss.version.show', [$product, $scssFile->scssVersion])); ?>"
               class="text-orange-600 hover:text-orange-800">
                Versión <?php echo e($scssFile->scssVersion->version); ?>

            </a>
            <span class="mx-2">/</span>
            <span class="text-gray-700 font-semibold"><?php echo e($scssFile->filename); ?>.scss</span>
        </div>
    </div>

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session()->has('success')): ?>
        <div class="mb-4 rounded bg-green-100 px-4 py-2 text-green-700">
            <?php echo e(session('success')); ?>

        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <?php if(session()->has('error')): ?>
        <div class="mb-4 rounded bg-red-100 px-4 py-2 text-red-700">
            <?php echo e(session('error')); ?>

        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    
    <div class="w-full flex flex-wrap items-center justify-between rounded-lg bg-white border border-gray-200 px-8 py-4 mb-6">
        <div class="w-full flex items-center justify-between">
            <div>
                <h1 class="text-4xl font-bold"><?php echo e($scssFile->filename); ?>.scss</h1>
            </div>
            <div class="flex items-center gap-2">
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('admin.scss.file.edit')): ?>
                <a href="<?php echo e(route('products.scss.file.edit', [$product, $scssFile->scssVersion, $scssFile])); ?>"
                   class="flex items-center rounded-lg bg-orange-600 px-4 py-2 text-white hover:bg-orange-700 font-semibold">
                    <img src="<?php echo e(asset('vendor/blade-untitledui-icons/pencil.svg')); ?>" alt="Editar" class="w-5 h-5 mr-2 svg-fill-white">
                    Editar
                </a>
                <?php endif; ?>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('admin.scss.file.destroy')): ?>
                <button wire:click="delete"
                        wire:confirm="¿Seguro que deseas eliminar este archivo SCSS? Esta acción no se puede deshacer."
                        class="flex items-center rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700 font-semibold">
                    <img src="<?php echo e(asset('vendor/blade-untitledui-icons/trash.svg')); ?>" alt="Eliminar" class="w-5 h-5 mr-2 svg-fill-white">
                    Eliminar
                </button>
                <?php endif; ?>
            </div>
        </div>

        <div class="w-full flex flex-wrap items-start mt-6">
            <div class="w-1/3">
                <label class="block text-xs text-gray-500 mb-1">Producto</label>
                <p class="font-semibold text-gray-900"><?php echo e($scssFile->scssVersion->product->name); ?></p>
                <p class="text-xs text-gray-600 font-mono"><?php echo e($scssFile->scssVersion->product->slug); ?></p>
            </div>
            <div class="w-1/3">
                <label class="block text-xs text-gray-500 mb-1">Versión</label>
                <p class="font-mono font-semibold text-gray-900"><?php echo e($scssFile->scssVersion->version); ?></p>
            </div>
            <div class="w-1/3">
                <label class="block text-xs text-gray-500 mb-1">Creado por</label>
                <p class="text-sm font-semibold text-gray-900"><?php echo e($scssFile->creator?->name ?? 'N/A'); ?></p>
                <p class="text-xs text-gray-600"><?php echo e($scssFile->created_at->format('Y-m-d H:i')); ?></p>
            </div>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($scssFile->updater): ?>
                <div class="w-1/3 mt-4">
                    <label class="block text-xs text-gray-500 mb-1">Última edición por</label>
                    <p class="text-sm font-semibold text-gray-900"><?php echo e($scssFile->updater->name); ?></p>
                    <p class="text-xs text-gray-600"><?php echo e($scssFile->updated_at->format('Y-m-d H:i')); ?></p>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>
    </div>

    
    <div class="rounded-lg bg-white border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h2 class="text-lg font-semibold">Contenido SCSS/SASS</h2>
        </div>
        <div class="p-4">
            <div wire:ignore>
                <textarea id="scss-viewer" readonly class="w-full border-0 font-mono text-sm focus:outline-none" rows="25"><?php echo e($scssFile->content); ?></textarea>
            </div>
        </div>
    </div>

    <script>
        let scssViewer = null;

        function initializeScssViewer() {
            const textarea = document.getElementById('scss-viewer');
            if (!textarea) {
                return;
            }

            // Si ya existe un viewer, destruirlo primero
            if (scssViewer) {
                try {
                    scssViewer.destroy();
                } catch (e) {
                    console.warn('Error al destruir viewer anterior:', e);
                }
                scssViewer = null;
            }

            // Inicializar nuevo viewer (read-only)
            scssViewer = CodeMirror.fromTextArea(textarea, {
                theme: 'oneDark',
                readOnly: true,
            });
        }

        // Inicializar cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', function() {
            if (document.getElementById('scss-viewer')) {
                initializeScssViewer();
            }
        });

        // Escuchar cambios de Livewire
        document.addEventListener('livewire:init', function() {
            // Escuchar cuando se actualiza el componente
            Livewire.hook('morph.updated', ({ el, component }) => {
                // Verificar si el textarea existe ahora
                const textarea = document.getElementById('scss-viewer');
                if (textarea && !scssViewer) {
                    setTimeout(initializeScssViewer, 150);
                }
            });
        });
    </script>
</div><?php /**PATH /var/www/html/resources/views/livewire/scss/show.blade.php ENDPATH**/ ?>