{{--
    Column layout utilities are compiled via the Filament admin Vite theme
    (resources/css/filament/admin/theme.css). Without that theme, these classes
    are purged from Filament's default CSS and the board collapses to plain text.
--}}
<div
    wire:key="kanban-column-{{ $status['id'] }}"
    class="mb-5 flex min-w-72 flex-1 shrink-0 flex-col md:min-h-full"
>
    @include('filament.tasks.kanban-header', ['status' => $status])

    <div
        data-status-id="{{ $status['id'] }}"
        class="flex flex-1 flex-col gap-2 rounded-xl bg-gray-200 p-3 dark:bg-gray-800"
    >
        @foreach ($status['records'] as $record)
            @include('filament.tasks.kanban-record', ['record' => $record])
        @endforeach
    </div>

    @if (($status['remaining'] ?? 0) > 0)
        <div class="mt-2 flex flex-col gap-2 px-1">
            <p class="text-center text-xs text-gray-500 dark:text-gray-400">
                {{ __('tasks.kanban.more_tasks', ['count' => $status['remaining']]) }}
            </p>

            <x-filament::button
                type="button"
                color="gray"
                size="sm"
                wire:click="loadMoreKanbanColumn('{{ $status['id'] }}')"
                wire:loading.attr="disabled"
                wire:target="loadMoreKanbanColumn('{{ $status['id'] }}')"
            >
                {{ __('tasks.kanban.load_more') }}
            </x-filament::button>
        </div>
    @endif
</div>