@php
    $statusColors = [
        'live' => 'bg-emerald-50 text-emerald-700',
        'scheduled' => 'bg-sky-50 text-sky-700',
        'ended' => 'bg-slate-100 text-slate-600',
        'cancelled' => 'bg-red-50 text-red-700',
    ];
    $detailsRoute = $detailsRoute ?? route('meet.rooms.show', $room);
@endphp
<div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4">
    <div class="min-w-0 flex-1">
        <div class="flex items-center gap-2">
            <h3 class="truncate font-medium text-slate-900">{{ $room->title }}</h3>
            @if ($room->isWebinar())
                <span class="shrink-0 rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">Webinar</span>
            @elseif ($room->isConference())
                <span class="shrink-0 rounded-full bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-700">Conference</span>
            @elseif ($room->isSpace())
                <span class="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">Room</span>
            @endif
            <span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {{ $statusColors[$room->status] ?? 'bg-slate-100 text-slate-600' }}">
                {{ config('meet.room_statuses')[$room->status] ?? $room->status }}
            </span>
        </div>
        <p class="mt-1 text-sm text-slate-500">
            @if ($room->scheduled_at)
                {{ $room->scheduled_at->timezone($room->timezone)->format('M j, Y g:i A T') }}
            @elseif ($room->isConference())
                Instant conference
            @else
                Instant meeting
            @endif
        </p>
    </div>
    <div class="ml-4 shrink-0">
        <a href="{{ $detailsRoute }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">Details</a>
    </div>
</div>
