<section class="rounded-2xl border border-slate-200 bg-white p-5">
    <div class="flex items-center justify-between gap-3">
        <div>
            <h2 class="text-sm font-semibold text-slate-900">Open visits</h2>
            <p class="mt-0.5 text-xs text-slate-500">Visit-backed episodes for this specialty (not appointment-only).</p>
        </div>
    </div>

    <div class="mt-4 space-y-2">
        @forelse ($openVisits as $visit)
            <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-3 py-3 text-sm">
                <div class="min-w-0">
                    <p class="font-semibold text-slate-900">{{ $visit->patient?->fullName() ?? 'Patient' }}</p>
                    <p class="text-xs text-slate-500">
                        {{ $visit->appointment?->department?->name ?? 'Specialty' }}
                        · {{ $visit->appointment?->practitioner?->name ?? 'Unassigned' }}
                        · {{ ucfirst(str_replace('_', ' ', $visit->status)) }}
                        @if ($visit->checked_in_at)
                            · {{ $visit->checked_in_at->format('d M H:i') }}
                        @endif
                    </p>
                </div>
                <a href="{{ route('care.specialty.workspace', ['module' => $moduleKey, 'visit' => $visit]) }}"
                   class="shrink-0 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700">
                    Workspace
                </a>
            </div>
        @empty
            <p class="rounded-xl border border-dashed border-slate-200 px-4 py-10 text-center text-sm text-slate-500">
                No open specialty visits. Check in a patient to this specialty department to create a visit episode.
            </p>
        @endforelse
    </div>

    <div class="mt-6 border-t border-slate-100 pt-4">
        <h3 class="text-sm font-semibold text-slate-900">Waiting list</h3>
        <div class="mt-3 space-y-2">
            @forelse ($waiting as $appointment)
                <div class="flex items-center justify-between gap-3 rounded-xl border border-slate-100 px-3 py-2 text-sm">
                    <div>
                        <p class="font-medium text-slate-800">{{ $appointment->patient?->fullName() }}</p>
                        <p class="text-xs text-slate-500">
                            @if ($appointment->queue_ticket_number)
                                {{ $appointment->queue_ticket_number }} ·
                            @endif
                            {{ $appointment->status }}
                        </p>
                    </div>
                    <a href="{{ route('care.appointments.show', $appointment) }}" class="text-xs font-medium text-sky-600">Appointment</a>
                </div>
            @empty
                <p class="text-sm text-slate-500">Queue is empty.</p>
            @endforelse
        </div>
    </div>
</section>
