@props(['task', 'overdueLabel' => null])

<li class="flex items-center gap-2 rounded py-1.5 px-2 hover:bg-gray-100/80 group">
    <span class="shrink-0 h-2 w-2 rounded-full
        {{ $task->priority === 'low' ? 'bg-gray-400' : '' }}
        {{ $task->priority === 'medium' ? 'bg-blue-500' : '' }}
        {{ $task->priority === 'high' ? 'bg-orange-500' : '' }}
        {{ $task->priority === 'urgent' ? 'bg-red-500' : '' }}
    "></span>
    <button type="button" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: '{{ $task->id }}', projectId: '{{ $task->project_id }}' } }))" class="min-w-0 flex-1 truncate text-left text-sm {{ $task->status === 'done' ? 'text-gray-500 line-through' : 'text-gray-900' }}">
        {{ $task->title }}
    </button>
    @if ($task->project)
        <span class="shrink-0 text-xs rounded px-1.5 py-0.5 bg-gray-100 text-gray-700">{{ $task->project->name }}</span>
    @endif
    @if ($overdueLabel)
        <span class="shrink-0 rounded bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-800">{{ $overdueLabel }}</span>
    @endif
    <div class="flex shrink-0 items-center gap-1">
        @foreach ($task->assignees as $a)
            @if ($a->user)
                @if ($a->user->avatar_url)
                    <img src="{{ $a->user->avatar_url }}" alt="{{ $a->user->name }}" class="h-6 w-6 rounded-full object-cover" />
                @else
                    <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-600 text-xs font-medium text-white" title="{{ $a->user->name }}">{{ Str::limit($a->user->name, 1) }}</span>
                @endif
            @endif
        @endforeach
        @if ($task->due_date)
            <span class="text-xs rounded px-1.5 py-0.5
                @if ($task->status !== 'done' && $task->due_date->isPast()) bg-red-100 text-red-800
                @elseif ($task->due_date->isToday()) bg-yellow-100 text-yellow-800
                @else bg-gray-100 text-gray-600 @endif
            ">{{ $task->due_date->format('M j') }}</span>
        @endif
        <button type="button" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: '{{ $task->id }}', projectId: '{{ $task->project_id }}' } }))" class="shrink-0 text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:underline" title="View task details">View</button>
    </div>
</li>