{{--
    Los entornos a los que les cambia el contenido, y de qué versión a cuál.

    **Era una tabla de tres columnas y se rompía.** «Entorno | Su plugin | Pasará a» con tres
    fracciones de ancho: los números de versión son diez cifras en monoespaciada y no cabían,
    así que se partían en dos líneas o empujaban la columna del nombre, y las cabeceras
    dejaban de cuadrar con sus valores. Y encima había dos copias casi iguales —una para
    publicar y otra para deshabilitar— que ya habían empezado a divergir.

    Ahora es **una lista, no una tabla**: el nombre del entorno a la izquierda con su versión
    de plugin debajo en pequeño, y a la derecha el cambio entero —`de → a`— como una sola
    pieza que no se puede descuadrar. Se lee igual en la modal ancha y en un móvil.

    @param $filas    array de ['entorno' => Environment, 'instalada' => string, 'desde' => ?string, 'hasta' => ?string]
    @param $tono     'danger' cuando quedarse sin nada es lo malo (deshabilitar), 'success' cuando
                     no tener nada era lo malo y se arregla (publicar)
--}}
@php
    $tope = 12;
    $sobran = max(0, count($filas) - $tope);
@endphp

<div class="mt-3 overflow-hidden rounded-lg border" style="border-color:var(--border-default);">
    @foreach (array_slice($filas, 0, $tope) as $i => $fila)
        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 px-3.5 py-2 {{ $i > 0 ? 'border-t' : '' }}"
             style="border-color:var(--divider);">

            <div class="min-w-0 flex-1" style="flex-basis:180px;">
                <div class="truncate text-[12.5px] font-semibold" style="color:var(--text-body);">
                    {{ $fila['entorno']->name }}
                </div>
                <div class="text-[11px]" style="color:var(--text-subtle);">
                    plugin <span class="font-mono">{{ $fila['instalada'] }}</span>
                </div>
            </div>

            {{-- El cambio, de una pieza: la flecha entre las dos versiones es lo que se
                 venía a leer, y separadas en dos columnas había que cruzar la vista. --}}
            <div class="flex flex-none items-center gap-2 text-[12px]">
                @if ($fila['desde'] === null)
                    <span class="rounded px-1.5 py-px font-semibold"
                          style="color:var(--text-subtle); background:var(--surface-sunken);">sin contenido</span>
                @else
                    <span class="font-mono" style="color:var(--text-muted);">{{ $fila['desde'] }}</span>
                @endif

                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)"
                     stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="flex-none">
                    <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
                </svg>

                @if ($fila['hasta'] === null)
                    {{-- Quedarse sin ninguna es **el dato que decide**, y por eso va en rojo
                         y con palabras: la API responderá «sin contenido», que es una
                         respuesta correcta y no avisa a nadie. --}}
                    <span class="rounded px-1.5 py-px font-semibold"
                          style="color:var(--danger-500); background:var(--danger-50, var(--surface-sunken));">sin contenido</span>
                @else
                    <span class="rounded px-1.5 py-px font-mono font-semibold"
                          style="color:{{ $tono === 'success' ? 'var(--success-600, var(--success-500))' : 'var(--text-strong)' }};
                                 background:var(--surface-sunken);">{{ $fila['hasta'] }}</span>
                @endif
            </div>
        </div>
    @endforeach

    @if ($sobran > 0)
        <div class="border-t px-3.5 py-1.5 text-[11.5px]"
             style="border-color:var(--divider); color:var(--text-subtle); background:var(--surface-alt);">
            y {{ $sobran }} {{ $sobran === 1 ? 'entorno más' : 'entornos más' }}
        </div>
    @endif
</div>