@props([
    'viewHref' => null,
    'editHref' => null,
    'deleteAction' => null,
    'toggleAction' => null,
    'canDelete' => true,
    'confirmDelete' => null,
])

@php
    $confirm = $confirmDelete ?? __('admin.confirm_delete');
    $hasMenu = $viewHref || $editHref || $toggleAction || ($deleteAction && $canDelete) || ! $slot->isEmpty();
@endphp

@if ($hasMenu)
    <div
        {{ $attributes->class(['admin-row-actions']) }}
        x-data="{
            open: false,
            menuStyle: { top: '0px', left: '0px' },
            ignoreOutside: false,
            updatePosition() {
                const btn = this.$refs.trigger;
                if (! btn) return;
                const r = btn.getBoundingClientRect();
                const menu = this.$refs.menu;
                const mw = menu?.offsetWidth || 168;
                const mh = menu?.offsetHeight || 140;
                let top = r.bottom + 6;
                if (top + mh > window.innerHeight - 8) {
                    top = Math.max(8, r.top - mh - 6);
                }
                let left = document.documentElement.dir === 'rtl' ? r.left : (r.right - mw);
                if (left < 8) left = 8;
                if (left + mw > window.innerWidth - 8) left = window.innerWidth - mw - 8;
                this.menuStyle = { top: top + 'px', left: left + 'px' };
            },
            toggle(event) {
                event.preventDefault();
                event.stopPropagation();
                if (this.open) {
                    this.open = false;
                    return;
                }
                this.open = true;
                this.ignoreOutside = true;
                this.$nextTick(() => {
                    this.updatePosition();
                    requestAnimationFrame(() => {
                        this.ignoreOutside = false;
                    });
                });
            },
            close() {
                if (this.ignoreOutside) return;
                this.open = false;
            },
            onOutside(event) {
                if (this.$refs.trigger && this.$refs.trigger.contains(event.target)) {
                    return;
                }
                this.close();
            },
        }"
        @keydown.escape.window="close()"
        @scroll.window="close()"
        @resize.window="close()"
    >
        <button
            type="button"
            class="admin-row-actions__trigger"
            x-ref="trigger"
            @click="toggle($event)"
            :aria-expanded="open.toString()"
            aria-haspopup="menu"
            aria-label="{{ __('admin.actions') }}"
            title="{{ __('admin.actions') }}"
        >
            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M10 6a1.75 1.75 0 110-3.5A1.75 1.75 0 0110 6zm0 5.75a1.75 1.75 0 110-3.5 1.75 1.75 0 010 3.5zM11.75 16a1.75 1.75 0 10-3.5 0 1.75 1.75 0 003.5 0z" />
            </svg>
        </button>

        <template x-teleport="body">
            <div
                class="admin-row-actions__menu"
                x-ref="menu"
                x-show="open"
                x-cloak
                x-transition.opacity.duration.120ms
                x-bind:style="menuStyle"
                @click.outside="onOutside($event)"
                role="menu"
            >
                @if ($viewHref)
                    <a href="{{ $viewHref }}" class="admin-row-actions__item" role="menuitem" @click="close()">
                        {{ __('admin.view') }}
                    </a>
                @endif

                @if ($editHref)
                    <a href="{{ $editHref }}" class="admin-row-actions__item" role="menuitem" @click="close()">
                        {{ __('admin.edit') }}
                    </a>
                @endif

                @if ($toggleAction)
                    <form method="post" action="{{ $toggleAction }}" role="none">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="admin-row-actions__item" role="menuitem">
                            {{ __('admin.toggle_status') }}
                        </button>
                    </form>
                @endif

                @if ($deleteAction && $canDelete)
                    <form method="post" action="{{ $deleteAction }}" role="none" onsubmit="return confirm(@js($confirm))">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="admin-row-actions__item admin-row-actions__item--danger" role="menuitem">
                            {{ __('admin.delete') }}
                        </button>
                    </form>
                @endif

                {{ $slot }}
            </div>
        </template>
    </div>
@endif