{{--
  Single EMS call card on the ambulance dispatch board.
  Stacked layout: ticket badge, patient info, then an action footer —
  narrow columns never push buttons over the text.
--}}
@php
    $appointment = $visit->appointment;
    $patient = $visit->patient;
    $openUrl = route('care.specialty.workspace', ['module' => 'ambulance', 'visit' => $visit]);
    $ticketNumber = $appointment?->queue_ticket_number;
    $reason = $appointment?->reason;
    $nextStage = $column['next_stage'] ?? null;
    $nextLabel = $column['next_label'] ?? null;
    $isCompleted = ($column['key'] ?? '') === 'completed';
    $showAdvance = $canAdvanceStage && $nextStage && $nextLabel;
@endphp
<article
    role="link"
    tabindex="0"
    data-href="{{ $openUrl }}"
    onclick="if (! event.target.closest('a, button, form, input, select, textarea, label')) { window.location.href = this.dataset.href }"
    onkeydown="if ((event.key === 'Enter' || event.key === ' ') && ! event.target.closest('a, button, form, input, select, textarea, label')) { event.preventDefault(); window.location.href = this.dataset.href }"
    @class([
        'group relative flex cursor-pointer flex-col rounded-xl border bg-white transition hover:shadow-sm',
        'border-amber-200' => ($column['key'] ?? '') === 'check_in',
        'border-indigo-200' => ($column['key'] ?? '') === 'dispatch',
        'border-sky-200' => ($column['key'] ?? '') === 'on_scene',
        'border-violet-200' => ($column['key'] ?? '') === 'transport',
        'border-emerald-200' => ($column['key'] ?? '') === 'handover',
        'border-slate-100 opacity-80' => $isCompleted,
    ])
>
    <div class="min-w-0 space-y-2 px-3 pb-2.5 pt-3">
        <div class="flex items-center justify-between gap-2">
            @if ($ticketNumber)
                <span class="inline-flex rounded-md bg-slate-100 px-2 py-0.5 font-mono text-[11px] font-bold tracking-wide text-slate-700">{{ $ticketNumber }}</span>
            @else
                <span></span>
            @endif
            <span @class([
                'h-2 w-2 shrink-0 rounded-full',
                'bg-amber-400' => ($column['key'] ?? '') === 'check_in',
                'bg-indigo-400' => ($column['key'] ?? '') === 'dispatch',
                'bg-sky-400' => ($column['key'] ?? '') === 'on_scene',
                'bg-violet-400' => ($column['key'] ?? '') === 'transport',
                'bg-emerald-400' => ($column['key'] ?? '') === 'handover',
                'bg-slate-300' => $isCompleted,
            ])></span>
        </div>

        <div class="min-w-0">
            <p class="truncate text-sm font-semibold text-slate-900">{{ $patient?->fullName() ?? 'Patient' }}</p>
            <p class="mt-0.5 truncate text-xs text-slate-500">
                {{ $patient?->patient_number ?? '—' }}
                @if ($reason)
                    <span class="text-slate-300"> · </span>{{ \Illuminate\Support\Str::limit($reason, 48) }}
                @endif
            </p>
            @if ($appointment?->practitioner?->name)
                <p class="mt-0.5 truncate text-xs text-slate-400">{{ $appointment->practitioner->name }}</p>
            @endif
        </div>
    </div>

    <div class="relative z-10 flex flex-col gap-1.5 border-t border-slate-900/5 px-3 py-2" @click.stop>
        @if ($showAdvance)
            <form method="POST" action="{{ route($specialtyStageRoute, $visit) }}">
                @csrf
                <input type="hidden" name="stage" value="{{ $nextStage }}">
                <button type="submit" class="w-full whitespace-nowrap rounded-lg bg-slate-900 px-2.5 py-1.5 text-center text-xs font-semibold text-white hover:bg-slate-800">
                    {{ $nextLabel }} →
                </button>
            </form>
        @endif
        <a href="{{ $openUrl }}" class="w-full rounded-lg border border-slate-200 px-2.5 py-1.5 text-center text-xs font-medium text-slate-600 hover:bg-slate-50">Open</a>
    </div>
</article>