@props([
    // Cuántos entornos reciben esta versión ahora mismo.
    'laReciben' => 0,
    // Cuántos elementos tiene dentro.
    'elementos' => 0,
    // El id, cuando el botón está en una fila de un listado. Nulo en las pantallas que
    // miran una sola versión.
    'versionId' => null,
    // 'boton' para la cabecera de una ficha, 'enlace' para la fila de un listado.
    'forma' => 'boton',
])

@php
    // **La regla, y se evalúa aquí para no consultar nada.** Los dos datos ya los tiene la
    // pantalla: el listado los calcula por fila y la ficha en su cabecera. Llamar al
    // cálculo completo por cada fila serían dos consultas por versión (PRODSECU-198).
    $bloqueado = $laReciben > 0 || $elementos > 0;

    $motivos = [];
    if ($laReciben > 0) {
        $motivos[] = $laReciben === 1 ? 'la recibe 1 entorno' : 'la reciben ' . $laReciben . ' entornos';
    }
    if ($elementos > 0) {
        $motivos[] = $elementos === 1 ? 'tiene 1 elemento' : 'tiene ' . $elementos . ' elementos';
    }

    $titulo = $bloqueado
        ? 'No se puede borrar: ' . implode(' y ', $motivos) . '. Pulsa para ver qué hacer.'
        : 'Borrar esta versión: está vacía y no la recibe ningún entorno';
@endphp

{{--
    El botón de borrar una versión, con su indicador de bloqueo.

    **Sale siempre, y cuando no se puede lleva un candado.** Esconderlo sería más limpio de
    ver y peor de usar: quien busca cómo retirar una versión no encontraría nada y no sabría
    si es que no existe o que no puede. Con el candado, el botón **es la explicación**: se
    pulsa y la modal dice qué falta.
--}}
@if ($forma === 'enlace')
    {{-- La misma pastilla que el resto de acciones de la fila: mismo alto, mismo borde,
         mismo radio. Antes era un enlace de texto suelto entre botones con borde, y en una
         fila de cinco cosas que se pulsan eso dice que unas valen más que otras. --}}
    <button type="button" wire:click="abrirBorrarVersion({{ $versionId }})"
            title="{{ $titulo }}"
            class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-[12.5px] font-semibold"
            style="border-color:var(--border-default); background:var(--surface-page);
                   color:{{ $bloqueado ? 'var(--text-subtle)' : 'var(--danger-500)' }};">
        {{-- El candado **sustituye** al icono de papelera, no se suma: mientras no se pueda
             borrar, lo que hay que ver es por qué no. --}}
        <x-icono-de-accion :nombre="$bloqueado ? 'bloqueado' : 'borrar'" :tamano="12" />
        Borrar
    </button>
@else
    <button type="button" wire:click="abrirBorrarVersion"
            title="{{ $titulo }}"
            class="inline-flex items-center gap-1.5 rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
            style="border-color:{{ $bloqueado ? 'var(--border-default)' : 'var(--danger-500)' }};
                   background:var(--surface-page);
                   color:{{ $bloqueado ? 'var(--text-subtle)' : 'var(--danger-500)' }};">
        @if ($bloqueado)
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="flex-none">
                <rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
        @endif
        Borrar versión
    </button>
@endif
