<x-app-layout title="Webinars">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Webinars</h1>
            <p class="mt-1 text-sm text-slate-500">Stage-mode events billed at GHS {{ number_format(config('meet.billing.price_per_participant_ghs', 0.30), 2) }} per participant.</p>
        </div>
        <a href="{{ route('meet.webinars.create') }}" class="btn-primary">Schedule webinar</a>
    </div>

    <div class="mt-4 space-y-2">
        @forelse ($webinars as $room)
            @include('meet.partials.room-card', [
                'room' => $room,
                'detailsRoute' => route('meet.webinars.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 webinars yet.</p>
        @endforelse
    </div>

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