<x-app-layout title="Conferences">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Conferences</h1>
            <p class="mt-1 text-sm text-slate-500">Multi-speaker events with hosts and presenters. Billed at GHS {{ number_format(config('meet.billing.price_per_participant_ghs', 0.30), 2) }} per participant.</p>
        </div>
        <a href="{{ route('meet.conferences.create') }}" class="btn-primary">Schedule conference</a>
    </div>

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

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