{{-- ============================================================
     «¿Está ya arriba lo de X?»

     La cabecera canta el entorno además de la versión: dos pestañas con esta misma
     pantalla, si no, son indistinguibles, que es justo cuando uno se equivoca de instancia.

     Ver `App\Support\Historial`.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <x-cabecera
        rotulo="Sistema"
        titulo="Versión y cambios"
        descripcion="Qué versión del Manager está corriendo aquí y qué trajo cada una. Una línea por cambio: para saber si algo ya está subido sin tener que preguntarlo."
        :volver="['ruta' => route('configurations.index'), 'texto' => 'Configuración']">

        <x-slot:icono>
            <x-nav-icon name="settings" tint="orange" />
        </x-slot:icono>
    </x-cabecera>

    {{-- ============ Qué corre aquí ============ --}}
    <div class="rounded-xl border"
         style="background:var(--surface-card); border-color:var(--border-subtle); padding:16px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;">

        <div>
            <div class="text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">
                Versión desplegada aquí
            </div>
            <div class="mt-[3px] font-bold" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; line-height:1.1; color:var(--text-strong);">
                {{ $actual }}
            </div>
        </div>

        <div>
            <div class="text-[11px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">
                Entorno
            </div>
            <div class="mt-[5px] text-[14px] font-bold" style="color:var(--text-strong);">
                {{ $donde }}
            </div>
        </div>
    </div>

    {{-- ============ Lo publicado ============ --}}
    @foreach ($versiones as $version)
        <div class="rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle); padding:16px 18px;">

            <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:700; color:var(--text-strong);">
                    {{ $version['version'] }}
                </span>

                @if ($version['version'] === $actual)
                    <span class="rounded-full px-2 py-px text-[10.5px] font-bold"
                          style="color:var(--success-500); background:var(--success-50);">
                        la que corre aquí
                    </span>
                @endif

            </div>

            <div class="mt-1 text-[12.5px] leading-[1.5]" style="color:var(--text-muted);">
                {{ $version['titular'] }}
            </div>

            <ul class="mt-3 flex flex-col gap-[7px]">
                @foreach ($version['cambios'] as $cambio)
                    <li class="flex gap-2 text-[13px] leading-[1.5]" style="color:var(--text-strong);">
                        <span class="mt-[7px] h-[5px] w-[5px] flex-none rounded-full" style="background:var(--border-default);"></span>
                        <span>{{ $cambio }}</span>
                    </li>
                @endforeach
            </ul>
        </div>
    @endforeach
</div>