@props(['id', 'canEdit' => true, 'canDelete' => true])

<div class="flex items-center justify-end gap-1">
    {{ $slot ?? '' }}

    @if ($canEdit)
        <button type="button" wire:click="editResource({{ $id }})"
                class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand dark:hover:bg-slate-800"
                title="Edit">
            <x-ui.icon name="pencil" class="h-4 w-4" />
        </button>
    @endif

    @if ($canDelete)
        <button type="button" wire:click="confirmDelete({{ $id }})"
                class="rounded p-1.5 text-slate-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950"
                title="Delete">
            <x-ui.icon name="trash" class="h-4 w-4" />
        </button>
    @endif
</div>