@props(['action', 'label' => 'Delete', 'confirm' => 'Confirm delete?', 'small' => true])
<form method="POST" action="{{ $action }}" x-data="{ armed: false }" @click.outside="armed = false" class="inline">
    @csrf @method('DELETE')
    <button type="button" x-show="!armed" @click="armed = true" class="{{ $small ? 'rounded-md p-1.5 text-gray-400 hover:bg-red-50 hover:text-red-600' : 'btn-light text-red-600!' }}" title="{{ $label }}">
        @if ($small)<x-icon name="trash" class="size-4" />@else<x-icon name="trash" class="size-4" /> {{ $label }}@endif
    </button>
    <button type="submit" x-cloak x-show="armed" class="rounded-md bg-red-600 px-2.5 py-1 text-xs font-semibold text-white hover:bg-red-700">{{ $confirm }}</button>
</form>