{{-- One job in a list (Job Cards page, customer page). Needs $job with customer, device and assignedTo loaded. --}}
@php
    $overdue = $job->isOverdue();
    $showCustomer ??= true;
@endphp

<a href="{{ route('jobs.show', $job) }}" class="block px-4 py-3 hover:bg-gray-50 active:bg-gray-100">
    <div class="flex flex-wrap items-center gap-2">
        <span class="font-semibold text-gray-900 tabular-nums">{{ $job->job_no }}</span>
        <x-status-badge :status="$job->status" />
        <x-warranty-badge :job="$job" />
        @if (($job->new_decision ?? null) && auth()->user()->can('use-front-desk'))
            <span class="rounded-full bg-red-600 px-2 py-0.5 text-xs font-bold text-white" data-new-decision>
                ● Customer {{ $job->new_decision === 'approved' ? 'approved' : 'rejected' }}
            </span>
        @endif
        @if ($job->priority === \App\Enums\JobPriority::Urgent)
            <span class="rounded-full bg-red-600 px-2 py-0.5 text-xs font-bold uppercase text-white">Urgent</span>
        @endif
        <span class="ms-auto text-sm text-gray-500">{{ $job->created_at->format('d M Y') }}</span>
    </div>

    <div class="mt-1 grid gap-x-4 gap-y-0.5 text-sm sm:grid-cols-3">
        <p class="truncate font-medium text-gray-800">{{ $job->device->display_name ?: $job->device->deviceType?->name }}</p>
        @if ($showCustomer)
            <p class="truncate text-gray-600">{{ $job->customer->name }} · <span class="tabular-nums">{{ $job->customer->phone_display }}</span></p>
        @endif
        <p class="truncate text-gray-600">
            {{ $job->assignedTo?->name ?? 'Not assigned' }}
            @if ($job->promised_on)
                · <span @class(['font-semibold text-red-700' => $overdue])>Due {{ $job->promised_on->format('d M') }}{{ $overdue ? ' (late)' : '' }}</span>
            @endif
        </p>
    </div>
</a>