@props([
    'editUrl' => null,
    'canDuplicate' => false,
    'canDelete' => true,
    'rowId' => null,
])
<div class="flex items-center justify-end gap-1">
    @if($editUrl)
        <a href="{{ $editUrl }}"
           class="py-0.5 pl-2 pr-1 inline-flex font-medium items-center gap-1 text-sm text-gray-600 hover:text-gray-900">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
            </svg>
        </a>
    @endif

    @if($canDuplicate || $canDelete)
        <div class="relative" x-data="{ open: false }">
            <button @click.prevent="open = !open" type="button" class="p-1 rounded hover:bg-gray-200 text-gray-500 hover:text-gray-700">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
                </svg>
            </button>

            <div x-show="open" x-cloak @click.away="open = false"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                class="absolute right-0 z-10 mt-1 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                <div class="py-1">
                    @if($canDuplicate)
                        <button wire:click="duplicateRow({{ $rowId }})" type="button" @click="open = false"
                            class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            {{ __('daylight::general.duplicate') }}
                        </button>
                    @endif

                    @if($canDelete)
                        @if($canDuplicate)
                            <div class="border-t border-gray-100"></div>
                        @endif
                        <button wire:click="confirmDelete({{ $rowId }})" type="button" @click="open = false"
                            class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                            {{ __('daylight::general.delete') }}
                        </button>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>
