<x-app-layout title="Rooms">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Rooms</h1>
            <p class="mt-1 text-sm text-slate-500">Audio-only discussions with a host, assigned speakers, and listeners.</p>
        </div>
        <a href="{{ route('meet.spaces.create') }}" class="btn-primary">Create room</a>
    </div>

    <div class="mt-4 space-y-2">
        @forelse ($spaces as $room)
            @include('meet.partials.room-card', [
                'room' => $room,
                'detailsRoute' => route('meet.spaces.show', $room),
            ])
        @empty
            <p class="rounded-2xl border border-dashed border-slate-200 bg-white p-8 text-center text-sm text-slate-500">No rooms yet. Create one to host a private discussion.</p>
        @endforelse
    </div>

    <div class="mt-4">{{ $spaces->links() }}</div>
</x-app-layout>
