@props(['process', 'block' => false])
@php
    $processColors = [
        'rose' => 'bg-rose-100 text-rose-800 border-rose-200',
        'teal' => 'bg-teal-100 text-teal-800 border-teal-200',
        'amber' => 'bg-amber-100 text-amber-800 border-amber-200',
        'sky' => 'bg-sky-100 text-sky-800 border-sky-200',
        'lime' => 'bg-lime-100 text-lime-800 border-lime-200',
        'violet' => 'bg-violet-100 text-violet-800 border-violet-200',
        'slate' => 'bg-slate-100 text-slate-800 border-slate-200',
    ];
@endphp
@if ($process)
    <button type="button" draggable="false" wire:click.stop="openProcessModal({{ $process->id }})"
        x-on:dragstart.stop.prevent title="{{ $process->name }}"
        {{ $attributes->class(['inline-flex min-w-0 max-w-full items-center gap-1 rounded border px-1 text-[10px] not-italic text-left hover:brightness-95', $processColors[$process->color] ?? 'bg-stone-100 text-stone-700 border-stone-200', 'w-full' => $block, 'opacity-60' => $process->status === 'completed']) }}>
        <span class="text-sm shrink-0 material-symbols-rounded" aria-hidden="true">account_tree</span>
        <span class="truncate">{{ $process->name }}</span>
        @if ($process->status === 'completed')
            <span class="text-sm shrink-0 material-symbols-rounded" aria-label="Completed process">check</span>
        @endif
    </button>
@endif