{{-- Kanban kartı: süreç. Kart rengi sürecin kendi rengidir, sütun renginden bağımsızdır. Sürükle-bırak panodaki Alpine
durumunu (dragProcessId) kullanır. --}}
<button type="button" draggable="true" wire:click="openProcessModal({{ $process->id }})"
    wire:key="board-process-{{ $process->id }}"
    x-on:dragstart.stop="dragProcessId = {{ $process->id }}; $event.dataTransfer.setData('text/plain', '{{ $process->id }}'); $event.dataTransfer.effectAllowed = 'move'"
    x-on:dragend.stop="dragProcessId = null; dropColumnId = null" title="{{ $process->name }}"
    class="w-full p-3 text-left border rounded-lg shadow-sm cursor-grab transition hover:brightness-95 {{ $process->status === 'completed' ? 'opacity-60' : '' }} {{ \App\Support\ProcessColors::classes($process->color, 'bg-white text-stone-800 border-stone-200') }}">
    <p class="text-sm font-semibold">{{ $process->name }}</p>
    <div class="flex items-center gap-2 mt-3 text-xs text-stone-500">
        <span class="inline-flex items-center gap-0.5 shrink-0">
            <span class="text-sm material-symbols-rounded" aria-hidden="true">{{ $process->status === 'completed' ?
                'check' : 'play_arrow' }}</span>
            {{ $process->completed_tasks_count }}/{{ $process->tasks_count }}
        </span>
        <span class="truncate">{{ $process->start_date ? $process->start_date->format('d.m.Y') . ' – ' .
            $process->end_date?->format('d.m.Y') : 'Undated' }}</span>
        <span
            class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-600 text-[10px] font-semibold text-white"
            title="{{ $process->assignedUser?->name ?? 'Unassigned' }}">
            {{ mb_substr(mb_strtoupper($process->assignedUser?->name ?? '?'), 0, 1) }}
        </span>
    </div>
</button>