@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',
    ];
@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>
            <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') }}
            @else
                Instant meeting
            @endif
        </p>
    </div>
    <div class="ml-4 flex shrink-0 gap-2">
        @if (($live ?? false) || $room->status === 'live')
            @if ($room->activeSession())
                <a href="{{ route('meet.room', $room->activeSession()) }}" class="btn-primary text-sm">Join</a>
            @endif
        @elseif ($room->status === 'scheduled')
            <form method="POST" action="{{ route('meet.rooms.start', $room) }}">
                @csrf
                <button type="submit" class="btn-primary text-sm">Start</button>
            </form>
        @endif
        <a href="{{ route('meet.rooms.show', $room) }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">Details</a>
    </div>
</div>