@props(['status'])

<div class="md:w-[22rem] flex-shrink-0 mb-5 md:min-h-full flex flex-col">
    @include(static::$headerView)

    <div
        data-status-id="{{ $status['id'] }}"
        class="flex flex-col flex-1 gap-2 p-3 bg-gray-100 dark:bg-gray-800/60 rounded-xl min-h-[4rem]"
    >
        @foreach($status['records'] as $record)
            @include(static::$recordView)
        @endforeach

        @if(empty($status['records']))
            <div class="flex items-center justify-center py-6 text-xs text-gray-400 dark:text-gray-600 italic">
                Tidak ada lead
            </div>
        @endif
    </div>

    @if($status['hasMore'] ?? false)
    <button
        wire:click="loadMore('{{ $status['id'] }}')"
        class="mt-2 w-full py-2 rounded-xl text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors border border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center gap-1.5"
    >
        <x-heroicon-m-chevron-down class="w-3.5 h-3.5" />
        Muat lebih banyak
        ({{ ($status['total'] ?? 0) - count($status['records']) }} lainnya)
    </button>
    @endif
</div>