{t('Edit Form')}

{t('Form Details')} {t('Basic information about your form')}

{t('Form Name')} setData('name', e.target.value)} required /> {errors.name &&

{errors.name}

}

{t('Description (optional)')}

setData('description', e.target.value)}
                                        rows={3}
                                    />
                                    {errors.description && <p className="text-sm text-red-600">{errors.description}</p>}
                                </div>

<div className="flex items-center gap-2">
                                    <Checkbox
                                        id="is_active"
                                        checked={data.is_active}
                                        onCheckedChange={(checked) => setData('is_active', checked as boolean)}
                                    />
                                    <Label htmlFor="is_active">{t('Form is active and accepting submissions')}</Label>
                                </div>
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <CardTitle>{t('Form Fields')}</CardTitle>
                                <CardDescription>{t('Add and configure fields for your form')}</CardDescription>
                            </CardHeader>
                            <CardContent>
                                <FormBuilder
                                    value={data.schema}
                                    onChange={(schema) => setData('schema', schema)}
                                />
                            </CardContent>
                        </Card>
                    </div>

{showPreview && (
                        <div className="lg:sticky lg:top-4 lg:h-fit">
                            <Card>
                                <CardHeader>
                                    <CardTitle>{t('Preview')}</CardTitle>
                                    <CardDescription>
                                        {t('This is how your form will appear to users')}
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    {data.schema.length === 0 ? (
                                        <p className="text-center text-gray-500 py-8">
                                            {t('Add fields to see the preview')}
                                        </p>
                                    ) : (
                                        <div className="space-y-4">
                                            <div>
                                                <h2 className="text-2xl font-bold mb-2">{data.name || 'Untitled Form'}</h2>
                                                {data.description && (
                                                    <p className="text-gray-600 dark:text-gray-400 mb-6">
                                                        {data.description}
                                                    </p>
                                                )}
                                            </div>
                                            <FormRenderer fields={data.schema} />
                                            <Button type="button" className="w-full" disabled>
                                                Submit (Preview Only)
                                            </Button>
                                        </div>
                                    )}
                                </CardContent>
                            </Card>
                        </div>
                    )}
                </form>
            </div>
        </AppLayout>
    );
}