{/* Header */}

{liveClass.title}

{liveClass.is_published ? 'Published' : 'Draft'}

{formatSchedule(liveClass.scheduled_at)}

{/* Quick links */}

{liveClass.recording_url && ( )}

{/* Edit form */}

{({ errors, processing, wasSuccessful }) => (

Edit Live Class

Judul

Deskripsi

</div>

<div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="mb-1.5 block text-xs text-muted-foreground">Tanggal & Waktu</label>
                                    <input
                                        name="scheduled_at"
                                        type="datetime-local"
                                        defaultValue={liveClass.scheduled_at.slice(0, 16)}
                                        className="border-input focus-visible:border-ring w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none"
                                    />
                                </div>
                                <div>
                                    <label className="mb-1.5 block text-xs text-muted-foreground">Durasi (menit)</label>
                                    <input
                                        name="duration_minutes"
                                        type="number"
                                        defaultValue={liveClass.duration_minutes}
                                        className="border-input focus-visible:border-ring w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none"
                                    />
                                </div>
                            </div>

<div>
                                <label className="mb-1.5 block text-xs text-muted-foreground">Meeting Link</label>
                                <input
                                    name="meeting_url"
                                    type="url"
                                    defaultValue={liveClass.meeting_url}
                                    className="border-input focus-visible:border-ring w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none"
                                />
                                {errors.meeting_url && <p className="mt-1 text-xs text-destructive">{errors.meeting_url}</p>}
                            </div>

<div>
                                <label className="mb-1.5 block text-xs text-muted-foreground">Link Rekaman (opsional)</label>
                                <input
                                    name="recording_url"
                                    type="url"
                                    defaultValue={liveClass.recording_url ?? ''}
                                    className="border-input focus-visible:border-ring w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none"
                                    placeholder="https://youtube.com/... (isi setelah sesi selesai)"
                                />
                            </div>

<div className="flex items-center gap-2">
                                <input
                                    type="checkbox"
                                    name="is_published"
                                    id="is_published_edit"
                                    value="1"
                                    defaultChecked={liveClass.is_published}
                                    className="h-4 w-4 rounded border"
                                />
                                <label htmlFor="is_published_edit" className="text-sm">Published</label>
                            </div>

<div className="flex items-center gap-3">
                                <Button type="submit" size="sm" disabled={processing}>Simpan</Button>
                                {wasSuccessful && <p className="text-xs text-green-600">Tersimpan!</p>}
                            </div>
                        </div>
                    )}
                </Form>

{/* Registrants */}
                <div className="rounded-xl border bg-card">
                    <div className="flex items-center gap-2 border-b px-4 py-3">
                        <Users className="h-4 w-4 text-muted-foreground" />
                        <p className="font-medium text-sm">Peserta Terdaftar ({liveClass.registrants.length})</p>
                    </div>

{liveClass.registrants.length === 0 ? (
                        <p className="p-4 text-sm text-muted-foreground">Belum ada peserta yang mendaftar.</p>
                    ) : (
                        <div className="divide-y">
                            {liveClass.registrants.map((r) => (
                                <div key={r.id} className="flex items-center gap-3 px-4 py-2.5">
                                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
                                        {r.name.charAt(0).toUpperCase()}
                                    </div>
                                    <div>
                                        <p className="text-sm font-medium">{r.name}</p>
                                        <p className="text-xs text-muted-foreground">{r.email}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}

InstructorLiveClassShow.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
);