@props([
    'statuses' => collect(),
])

<div
    data-flux-field
    class="pg-status-filter-field w-72"
    style="margin-top: 0; padding-top: 0; position: relative; top: -3px;"
    x-data="{
        open: @entangle('statusFilterOpen').live,
        top: 0,
        left: 0,
        width: 0,
        openUp: false,
        updatePosition() {
            if (!this.$refs.trigger || !this.open) {
                return;
            }

            const rect = this.$refs.trigger.getBoundingClientRect();
            const panelHeight = 336;
            const spacing = 8;
            const viewportHeight = window.innerHeight;

            this.width = rect.width;
            this.left = rect.left;
            this.openUp = rect.bottom + panelHeight > viewportHeight && rect.top > panelHeight;
            this.top = this.openUp
                ? rect.top - panelHeight - spacing
                : rect.bottom + spacing;
        }
    }"
    x-init="
        $watch('open', (value) => {
            if (value) {
                $nextTick(() => updatePosition());
            }
        });

        window.addEventListener('resize', () => updatePosition());
        window.addEventListener('scroll', () => updatePosition(), true);
    "
    @click.outside="open = false"
>
    <label data-flux-label class="text-sm font-semibold text-zinc-700">
        {{ __('messages.applications.table.status') }}
    </label>

    <button
        x-ref="trigger"
        type="button"
        data-flux-control
        x-on:click="open = !open"
        class="flex w-full items-center justify-between gap-3 rounded-md border border-zinc-300 bg-white px-3 py-2 text-left text-sm text-zinc-700 transition hover:border-zinc-400"
    >
        <span class="truncate">{{ $this->selectedApplicationStatusFilterLabel() }}</span>

        <svg class="h-4 w-4 shrink-0 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.51a.75.75 0 0 1-1.08 0l-4.25-4.51a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
        </svg>
    </button>

    <div
        x-cloak
        x-show="open"
        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"
        x-bind:style="`position: fixed; left: ${left}px; top: ${top}px; width: ${Math.max(width, 320)}px; z-index: 9999;`"
        class="pg-status-filter-panel rounded-md border border-zinc-200 bg-white p-2 shadow-lg ring-1 ring-black/5"
    >
        <div class="mb-2 flex justify-end">
            <button
                type="button"
                class="text-xs font-medium text-zinc-500 transition hover:text-zinc-700"
                wire:click="clearApplicationStatusFilter"
            >
                {{ __('messages.applications.all_statuses') }}
            </button>
        </div>

        <div class="space-y-1 overflow-y-auto overscroll-contain pr-1" style="max-height: 21rem;">
            @foreach ($statuses as $status)
                <label class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition hover:bg-zinc-100">
                    <input
                        type="checkbox"
                        value="{{ $status->id }}"
                        wire:model.live="selectedApplicationStatusIds"
                        class="h-4 w-4 rounded border-zinc-300 text-slate-700 focus:ring-slate-500"
                    >

                    <span class="text-sm text-zinc-700">{{ $status->name }}</span>
                </label>
            @endforeach
        </div>
    </div>
</div>