@vite(['resources/js/kanban.js'])

<x-filament::section heading="Répartition des tâches">
    <x-slot name="afterHeader">
        <div class="flex items-center gap-4 text-xs">
            <label class="flex items-center gap-1.5">
                <input type="checkbox" wire:model.live="distributionOnlyUpcoming" class="rounded border-gray-300 dark:border-gray-600">
                À venir (7 jours)
            </label>
            <label class="flex items-center gap-1.5">
                <input type="checkbox" wire:model.live="distributionResponsibleOnly" class="rounded border-gray-300 dark:border-gray-600">
                Projets où j'ai une responsabilité
            </label>
        </div>
    </x-slot>

    <div class="-mx-6 -mt-2 mb-4 flex gap-2 border-b border-gray-100 px-6 pb-3 dark:border-white/5">
        @foreach (['upcoming_days' => 'Jours à venir', 'status' => 'Statut', 'priority' => 'Priorité'] as $key => $label)
            <button
                type="button"
                wire:click="setDistributionDimension('{{ $key }}')"
                @class([
                    'rounded-full px-3 py-1 text-xs font-semibold',
                    'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400' => $distributionDimension === $key,
                    'text-gray-500 dark:text-gray-400' => $distributionDimension !== $key,
                ])
            >
                {{ $label }}
            </button>
        @endforeach
    </div>
    {{--
        `.dashboard-kanban-columns` caps each column's height (theme.css) —
        scoped to this card only, not to SKanban.php's shared markup, since
        the full Kanban page (kanban.blade.php) reuses the same component
        without this constraint.
    --}}
    <div class="dashboard-kanban-columns">
        <livewire:s-kanban
            :columns="$this->distributionColumns()"
            :locked-element-ids="$this->distributionLockedElementIds()"
            :key="$distributionDimension"
        />
    </div>
</x-filament::section>