<x-app-layout title="Meetings">
    <div class="flex items-center justify-between gap-3">
        <h1 class="text-xl font-semibold text-slate-900">All meetings</h1>
        <a href="{{ route('meet.rooms.create') }}"
           class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50 lg:hidden"
           title="Schedule meeting"
           aria-label="Schedule meeting">
            @include('meet.room.partials.meet-icon', ['icon' => 'schedule', 'inverted' => false])
        </a>
        <a href="{{ route('meet.rooms.create') }}" class="btn-primary hidden lg:inline-flex">Schedule meeting</a>
    </div>

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

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