@props([
    // How many rows are ticked. The bar only exists while this is > 0.
    'count' => 0,
    // Livewire method that empties the selection.
    'clear' => 'clearSelection',
    // Wording beside the counter, e.g. "selected" / "invoices selected".
    'noun' => null,
])

{{--
    Floating selection bar. Rows carry a tick box instead of a strip of icon
    buttons; ticking one or more raises this bar and the actions live here with
    real labels. It is `fixed`, so it escapes the table's `overflow-x-auto`
    wrapper (which clips absolutely-positioned menus on the last rows) and it
    clears the mobile bottom nav.
--}}
@if ((int) $count > 0)
    <div class="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4 pb-[calc(4.75rem+env(safe-area-inset-bottom))] lg:pb-6">
        <div wire:key="selection-bar"
             x-data="{ shown: false }"
             x-init="requestAnimationFrame(() => shown = true)"
             x-show="shown"
             x-cloak
             x-transition:enter="transition duration-200 ease-out"
             x-transition:enter-start="translate-y-3 opacity-0"
             x-transition:enter-end="translate-y-0 opacity-100"
             {{-- No `overflow-*` here: the "More" menu opens upward out of this
                  box, and a scroll container would clip it. It wraps instead. --}}
             class="pointer-events-auto flex max-w-full flex-wrap items-center justify-center gap-1 rounded-2xl bg-slate-900/95 p-2 text-white shadow-2xl shadow-slate-900/40 ring-1 ring-white/10 backdrop-blur">
            <span class="ms-1 me-2 flex shrink-0 items-center gap-2 whitespace-nowrap">
                <span class="inline-flex h-7 min-w-[1.75rem] items-center justify-center rounded-lg bg-indigo-500 px-2 text-sm font-bold tabular-nums">{{ $count }}</span>
                <span class="text-sm font-medium text-slate-300">{{ $noun ?: __('selected') }}</span>
            </span>

            <span class="h-6 w-px shrink-0 bg-white/15"></span>

            {{ $slot }}

            <span class="h-6 w-px shrink-0 bg-white/15"></span>

            <button type="button" wire:click="{{ $clear }}" title="{{ __('Clear selection') }}"
                    class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-slate-400 transition hover:bg-white/10 hover:text-white">
                <x-icon name="x-mark" class="h-4 w-4" />
                <span class="sr-only">{{ __('Clear selection') }}</span>
            </button>
        </div>
    </div>
@endif