{{-- Acciones de fila de las pantallas de catálogo (kit ui-ctc): editar y eliminar.
     editar: URL (enlace) o editarClick (expresión Livewire, p. ej. "edit(12)").
     eliminar: URL de un formulario (metodoEliminar, DELETE por defecto) o eliminarClick (Livewire). Ambos piden
     confirmación. etiqueta: nombre del registro para los títulos. Slot opcional: más acciones antes de editar. --}}
@props(['etiqueta' => 'el registro', 'editar' => null, 'editarClick' => null, 'eliminar' => null, 'eliminarClick' => null, 'metodoEliminar' => 'DELETE'])
<div class="flex items-center justify-end gap-0.5">
    {{ $slot }}
    @if ($editar)
        <a href="{{ $editar }}" class="ctc-accion" title="Editar {{ $etiqueta }}" aria-label="Editar {{ $etiqueta }}"><x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" /></a>
    @elseif ($editarClick)
        <button type="button" wire:click="{{ $editarClick }}" class="ctc-accion" title="Editar {{ $etiqueta }}" aria-label="Editar {{ $etiqueta }}"><x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" /></button>
    @endif
    @if ($eliminar)
        <form method="post" action="{{ $eliminar }}" class="contents" onsubmit="return confirm('¿Seguro que deseas eliminarlo?')">
            @csrf
            @if (strtoupper($metodoEliminar) !== 'POST') @method($metodoEliminar) @endif
            <button type="submit" class="ctc-accion hover:!bg-rose-50 hover:!text-rose-700 dark:hover:!bg-rose-500/10 dark:hover:!text-rose-300"
                    title="Eliminar {{ $etiqueta }}" aria-label="Eliminar {{ $etiqueta }}"><x-icono nombre="trash" sprite class="h-[18px] w-[18px]" /></button>
        </form>
    @elseif ($eliminarClick)
        <button type="button" wire:click="{{ $eliminarClick }}" wire:confirm="¿Seguro que deseas eliminarlo?"
                class="ctc-accion hover:!bg-rose-50 hover:!text-rose-700 dark:hover:!bg-rose-500/10 dark:hover:!text-rose-300"
                title="Eliminar {{ $etiqueta }}" aria-label="Eliminar {{ $etiqueta }}"><x-icono nombre="trash" sprite class="h-[18px] w-[18px]" /></button>
    @endif
</div>