<x-app-layout title="Webinar registration">
    <div class="mx-auto max-w-md">
        <h1 class="text-xl font-semibold text-slate-900">Register for webinar</h1>
        <p class="mt-1 text-sm text-slate-600">{{ $room->title }}</p>
        @if ($room->scheduled_at)
            <p class="mt-2 text-sm text-slate-500">{{ $room->scheduled_at->timezone($room->timezone)->format('M j, Y g:i A T') }}</p>
        @endif

        <form method="POST" action="{{ route('meet.webinar.register.store', $room) }}" class="mt-6 space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700">Name</label>
                <input type="text" name="display_name" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Email</label>
                <input type="email" name="email" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>
            <button type="submit" class="btn-primary w-full">Register</button>
        </form>
    </div>
</x-app-layout>
