@php
    /** @var string $title */
    /** @var string $dotClass */
    /** @var string $columnStatus */
    /** @var \Illuminate\Support\Collection<int, \App\Models\Partnership> $items */
@endphp

<div class="board-column-surface flex min-h-[min(12rem,40vh)] flex-col p-4 sm:min-h-[14rem] sm:p-5" wire:key="board-col-{{ $columnStatus }}">
    <div class="mb-4 flex items-center gap-2.5 px-0.5">
        <span class="status-dot {{ $dotClass }}" aria-hidden="true"></span>
        <h2 class="min-w-0 flex-1 text-sm font-semibold tracking-tight text-foreground">{{ $title }}</h2>
        <span class="inline-flex min-w-[1.5rem] items-center justify-center rounded-full bg-card px-2 py-0.5 text-xs font-semibold tabular-nums text-muted-foreground shadow-sm ring-1 ring-border/50">{{ $items->count() }}</span>
    </div>
    <div
        class="card-stagger flex min-h-[8rem] min-h-0 flex-1 flex-col gap-2.5 rounded-xl transition-[box-shadow,background-color] duration-150"
        x-on:dragenter.self.prevent="$el.classList.add('drag-over-highlight')"
        x-on:dragleave.self.prevent="$el.classList.remove('drag-over-highlight')"
        x-on:dragover.prevent="$event.dataTransfer.dropEffect = 'move'"
        x-on:drop.prevent="
            $el.classList.remove('drag-over-highlight');
            const id = $event.dataTransfer.getData('text/plain');
            if (! id) return;
            const n = parseInt(id, 10);
            if (! Number.isFinite(n)) return;
            $wire.moveToStatus(n, @js($columnStatus));
        "
    >
        @forelse($items as $p)
            @include('livewire.partials.collab-card', ['p' => $p, 'columnStatus' => $columnStatus])
        @empty
            <div class="flex flex-1 flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border/70 bg-card/30 px-4 py-10 text-center dark:bg-card/20">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-secondary/60 text-muted-foreground ring-1 ring-border/50" aria-hidden="true">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
                </div>
                <p class="text-sm font-medium text-foreground">{{ __('Nothing here yet') }}</p>
                <p class="max-w-[15rem] text-xs leading-relaxed text-muted-foreground">{{ __('Drop a card here or add a collab. You can also change status from the card menu.') }}</p>
            </div>
        @endforelse
    </div>
</div>