{/* ── Main column ──────────────────────────────────────── */}

{ setData('title', e.target.value); if (!isEdit) { setData( 'slug', e.target.value .toLowerCase() .trim() .replace(/[^a-z0-9]+/g, '-') .replace(/(^-|-$)/g, ''), ); } }} placeholder="e.g. Senior Backend Engineer" className={cn( 'text-base font-semibold', errors.title && 'border-destructive', )} /> setData('slug', e.target.value) } placeholder="senior-backend-engineer" className={cn( errors.slug && 'border-destructive', )} />

setData('summary', e.target.value)
                                    }
                                    rows={2}
                                    placeholder="What's this role about, in a sentence?"
                                    className={cn(
                                        'resize-y',
                                        errors.summary && 'border-destructive',
                                    )}
                                />
                            </Field>
                        </Card>

<Card title="Description">
                            <RichTextEditor
                                value={data.description ?? ''}
                                onChange={(html) =>
                                    setData('description', html)
                                }
                                placeholder="Describe the role, responsibilities, and team…"
                            />
                        </Card>

<Card title="Requirements">
                            <Field
                                label="Requirements"
                                hint="One requirement per line."
                                error={errors.requirements}
                            >
                                <Textarea
                                    value={data.requirements}
                                    onChange={(e) =>
                                        setData('requirements', e.target.value)
                                    }
                                    rows={6}
                                    placeholder={
                                        '5+ years of backend engineering experience\nStrong knowledge of PHP and Laravel\nExperience with PostgreSQL at scale'
                                    }
                                    className="resize-y"
                                />
                            </Field>
                        </Card>
                    </div>

{/* ── Sidebar ──────────────────────────────────────────── */}
                    <div className="flex flex-col gap-6">
                        <Card title="Publish">
                            <Field
                                label="Publish date"
                                error={errors.published_at}
                                hint="Leave blank to save as draft. Set a future time to schedule."
                            >
                                <Input
                                    type="datetime-local"
                                    value={data.published_at}
                                    onChange={(e) =>
                                        setData('published_at', e.target.value)
                                    }
                                    className={cn(
                                        errors.published_at &&
                                            'border-destructive',
                                    )}
                                />
                            </Field>

<div className="flex flex-col gap-2 pt-1">
                                <Button
                                    type="submit"
                                    disabled={processing}
                                    className="w-full gap-2"
                                >
                                    {data.published_at ? (
                                        <>
                                            <Radio className="h-3.5 w-3.5" />
                                            {isEdit ? 'Update' : 'Publish'}
                                        </>
                                    ) : (
                                        <>
                                            <Save className="h-3.5 w-3.5" />
                                            Save draft
                                        </>
                                    )}
                                </Button>
                                {data.published_at && (
                                    <Button
                                        type="button"
                                        variant="outline"
                                        disabled={processing}
                                        className="w-full"
                                        onClick={() => {
                                            setData('published_at', '');
                                            setTimeout(() => {
                                                (
                                                    document.querySelector(
                                                        'form',
                                                    ) as HTMLFormElement
                                                )?.requestSubmit();
                                            }, 0);
                                        }}
                                    >
                                        Save as draft
                                    </Button>
                                )}
                                <Link
                                    href="/admin/careers"
                                    className="text-muted-foreground hover:text-foreground py-1 text-center text-sm transition-colors"
                                >
                                    Cancel
                                </Link>
                            </div>
                        </Card>

<Card title="Organization">
                            <Field label="Team">
                                <Select
                                    value={data.team ?? ''}
                                    onValueChange={(v) => setData('team', v)}
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Select a team" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {TEAM_OPTIONS.map((t) => (
                                            <SelectItem key={t} value={t}>
                                                {t}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </Field>

<Field label="Employment type">
                                <Select
                                    value={data.employment_type ?? ''}
                                    onValueChange={(v) =>
                                        setData('employment_type', v)
                                    }
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Select a type" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {EMPLOYMENT_TYPE_OPTIONS.map((t) => (
                                            <SelectItem key={t} value={t}>
                                                {t}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </Field>

<Field label="Location">
                                <Input
                                    value={data.location ?? ''}
                                    onChange={(e) =>
                                        setData('location', e.target.value)
                                    }
                                    placeholder="e.g. Nairobi / Remote"
                                />
                            </Field>

<Field
                                label="Tags"
                                hint="Separate multiple tags with commas."
                            >
                                <Input
                                    value={data.tags}
                                    onChange={(e) =>
                                        setData('tags', e.target.value)
                                    }
                                    placeholder="e.g. PHP, Laravel, PostgreSQL"
                                />
                            </Field>
                        </Card>

<Card title="Application">
                            <Field
                                label="Apply URL"
                                hint="Leave blank to use the default careers email."
                                error={errors.apply_url}
                            >
                                <Input
                                    value={data.apply_url ?? ''}
                                    onChange={(e) =>
                                        setData('apply_url', e.target.value)
                                    }
                                    placeholder="https://…"
                                />
                            </Field>
                        </Card>
                    </div>
                </div>
            </form>
        </AdminLayout>
    );
}

{isEdit ? 'Edit Job Opening' : 'New Job Opening'}