@php
    $isOverdue = $item->due_at && $item->due_at->isPast();
    $isSoon    = !$isOverdue && $item->due_at && $item->due_at->diffInDays(now()) <= 2;
@endphp

<div class="list-group-item p-3 {{ $isOverdue ? 'border-start border-danger border-3' : ($isSoon ? 'border-start border-warning border-3' : '') }}">
    <div class="d-flex justify-content-between align-items-start gap-3">

        {{-- Title & Meta --}}
        <div class="flex-grow-1 min-w-0">
            <div class="d-flex align-items-center gap-2 flex-wrap mb-1">
                <span class="fw-semibold text-dark">{{ $item->title }}</span>

                {{-- Owner badge --}}
                @if($item->owner)
                    <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25">
                        <i class="mdi mdi-link-variant me-1"></i>{{ class_basename($item->owner_type) }} #{{ $item->owner_id }}
                    </span>
                @endif

                {{-- Due date badge --}}
                @if($item->due_at)
                    <span class="badge {{ $isOverdue ? 'bg-danger' : ($isSoon ? 'bg-warning text-dark' : 'bg-secondary bg-opacity-10 text-secondary border') }}">
                        <i class="mdi mdi-calendar-clock me-1"></i>{{ $item->due_at->diffForHumans() }}
                    </span>
                @endif
            </div>

            @if($item->description)
                <p class="text-muted small mb-0 text-truncate" style="max-width: 500px;">{{ $item->description }}</p>
            @endif
        </div>

        {{-- Pick Up button --}}
        @can('workboard.view')
            <button wire:click="claimItem({{ $item->id }})"
                    wire:loading.attr="disabled"
                    wire:target="claimItem({{ $item->id }})"
                    class="btn btn-sm btn-primary flex-shrink-0">
                <span wire:loading.remove wire:target="claimItem({{ $item->id }})">
                    <i class="mdi mdi-hand-pointing-right me-1"></i>Pick Up
                </span>
                <span wire:loading wire:target="claimItem({{ $item->id }})">
                    <span class="spinner-border spinner-border-sm me-1" role="status"></span>Claiming...
                </span>
            </button>
        @endcan

    </div>
</div>