setData('description', e.target.value)}
                        />
                    </div>

<div>
                        <InputLabel htmlFor="outcomes" value="Outcomes" />
                        <textarea
                            id="outcomes"
                            rows={3}
                            className="mt-1 block w-full rounded border-outline-variant"
                            value={data.outcomes}
                            onChange={(e) => setData('outcomes', e.target.value)}
                        />
                    </div>

<div>
                        <InputLabel htmlFor="facilitator_id" value="Facilitator" />
                        <select
                            id="facilitator_id"
                            className="mt-1 block w-full rounded border-outline-variant"
                            value={data.facilitator_id}
                            onChange={(e) => setData('facilitator_id', e.target.value ? Number(e.target.value) : '')}
                        >
                            <option value="">— Unassigned —</option>
                            {facilitators.map((facilitator) => (
                                <option key={facilitator.id} value={facilitator.id}>
                                    {facilitator.name}
                                </option>
                            ))}
                        </select>
                    </div>

<div className="grid grid-cols-3 gap-4">
                        <div>
                            <InputLabel htmlFor="duration_minutes" value="Duration (mins)" />
                            <TextInput
                                id="duration_minutes"
                                type="number"
                                className="mt-1 block w-full"
                                value={data.duration_minutes ?? ''}
                                onChange={(e) => setData('duration_minutes', Number(e.target.value))}
                            />
                        </div>
                        <div>
                            <InputLabel htmlFor="sequence_position" value="Sequence" />
                            <TextInput
                                id="sequence_position"
                                type="number"
                                className="mt-1 block w-full"
                                value={data.sequence_position ?? ''}
                                onChange={(e) => setData('sequence_position', Number(e.target.value))}
                            />
                        </div>
                        <div>
                            <InputLabel htmlFor="status" value="Status" />
                            <select
                                id="status"
                                className="mt-1 block w-full rounded border-outline-variant"
                                value={data.status}
                                onChange={(e) => setData('status', e.target.value)}
                            >
                                {['draft', 'review', 'scheduled', 'published', 'closed', 'archived'].map((status) => (
                                    <option key={status} value={status}>
                                        {status}
                                    </option>
                                ))}
                            </select>
                        </div>
                    </div>

<Button type="submit" variant="primary" disabled={processing}>
                        {course ? 'Save Changes' : 'Create Course'}
                    </Button>
                </form>
            </Card>
        </AdminLayout>
    );
}

{course ? 'Edit Course' : 'New Course'}