setData('title', e.target.value)} aria-invalid={!!err.title} /> setData('slug', e.target.value)} placeholder="auto-generated" />

setData('summary', e.target.value)} /></Field>
                                <Field label="Description" htmlFor="description" error={err.description} hint="Plain text. Separate paragraphs with a blank line."><Textarea id="description" rows={9} value={data.description} onChange={(e) => setData('description', e.target.value)} /></Field>
                            </div>
                        </Card>

<Card title="Media" description="JPG, PNG or WebP. Conversions are generated automatically.">
                            <div className="grid gap-5 sm:grid-cols-[180px_1fr]">
                                <ImageField label="Cover" hint="3:4, up to 5 MB" current={game?.cover ?? null} file={data.cover} removed={data.remove_cover} onFile={(f) => setData('cover', f)} onRemove={(r) => setData('remove_cover', r)} error={err.cover} />
                                <ImageField label="Hero banner" hint="Wide, up to 8 MB" aspect="aspect-[16/9] sm:aspect-auto sm:h-full sm:min-h-44" current={game?.hero ?? null} file={data.hero} removed={data.remove_hero} onFile={(f) => setData('hero', f)} onRemove={(r) => setData('remove_hero', r)} error={err.hero} />
                            </div>
                            <div className="mt-5">
                                <ScreenshotsField existing={game?.screenshots ?? []} removeIds={data.remove_screenshots} onToggleRemove={(id) => setData('remove_screenshots', data.remove_screenshots.includes(id) ? data.remove_screenshots.filter((i) => i !== id) : [...data.remove_screenshots, id])} files={data.screenshots} onFiles={(f) => setData('screenshots', f)} error={err.screenshots ?? err['screenshots.0']} />
                            </div>
                        </Card>

<Card title="Details">
                            <div className="grid gap-4 sm:grid-cols-3">
                                <Field label="Release date" htmlFor="release_date" error={err.release_date}><Input id="release_date" type="date" value={data.release_date} onChange={(e) => setData('release_date', e.target.value)} /></Field>
                                {num('metacritic', 'Metacritic', 100)}
                                <Field label="Age rating" htmlFor="age_rating" error={err.age_rating}><Input id="age_rating" maxLength={8} value={data.age_rating} onChange={(e) => setData('age_rating', e.target.value)} placeholder="E, T, M…" /></Field>
                                {num('playtime_main', 'Main story (hours)', 2000)}
                                {num('playtime_complete', 'Completionist (hours)', 5000)}
                            </div>
                            <div className="mt-4 grid gap-4 sm:grid-cols-2">
                                <Field label="Website" htmlFor="website_url" error={err.website_url}><Input id="website_url" type="url" value={data.website_url} onChange={(e) => setData('website_url', e.target.value)} placeholder="https://" /></Field>
                                <Field label="Trailer (YouTube)" htmlFor="trailer_url" error={err.trailer_url}><Input id="trailer_url" type="url" value={data.trailer_url} onChange={(e) => setData('trailer_url', e.target.value)} placeholder="https://youtube.com/watch?v=…" /></Field>
                            </div>
                        </Card>

<Card title="System requirements" description="Optional. Leave a tier empty to hide it.">
                            <div className="grid gap-6 sm:grid-cols-2">
                                {(['minimum', 'recommended'] as const).map((tier) => (
                                    <fieldset key={tier} className="space-y-3">
                                        <legend className="text-overline mb-2 capitalize">{tier}</legend>
                                        {SPEC_FIELDS.map(([k, label]) => (
                                            <Field key={k} label={label} htmlFor={`${tier}-${k}`} error={err[`system_requirements.${tier}.${k}`]}>
                                                <Input id={`${tier}-${k}`} maxLength={200} value={data.system_requirements[tier][k] ?? ''} onChange={(e) => spec(tier, k, e.target.value)} />
                                            </Field>
                                        ))}
                                    </fieldset>
                                ))}
                            </div>
                        </Card>
                    </div>

<div className="space-y-5 lg:sticky lg:top-24 lg:self-start">
                        <Card title="Publishing">
                            <div className="space-y-4">
                                <Field label="Status" htmlFor="status" error={err.status}>
                                    <select id="status" value={data.status} onChange={(e) => setData('status', e.target.value)} className={`${selectClass} capitalize`}>{statuses.map((st) => <option key={st}>{st}</option>)}</select>
                                </Field>
                                <Switch label="Featured on catalog" checked={data.is_featured} onChange={(v) => setData('is_featured', v)} />
                            </div>
                        </Card>
                        <Card title="Relations">
                            <div className="space-y-5">
                                <Field label="Developer" htmlFor="developer_id" error={err.developer_id}>
                                    <select id="developer_id" value={data.developer_id} onChange={(e) => setData('developer_id', e.target.value)} className={selectClass}><option value="">None</option>{companies.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select>
                                </Field>
                                <Field label="Publisher" htmlFor="publisher_id" error={err.publisher_id}>
                                    <select id="publisher_id" value={data.publisher_id} onChange={(e) => setData('publisher_id', e.target.value)} className={selectClass}><option value="">None</option>{companies.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select>
                                </Field>
                                <Field label="Genres" error={err.genres}><MultiSelectField options={genres} value={data.genres} onChange={(v) => setData('genres', v)} placeholder="Add genre" /></Field>
                                <Field label="Platforms" error={err.platforms}><MultiSelectField options={platforms} value={data.platforms} onChange={(v) => setData('platforms', v)} placeholder="Add platform" /></Field>
                                <Field label="Tags" error={err.tags}><MultiSelectField options={tags} value={data.tags} onChange={(v) => setData('tags', v)} placeholder="Add tag" /></Field>
                            </div>
                        </Card>
                    </div>
                </div>
            </form>

{editing && (
                <ConfirmDialog open={confirmDelete} danger title={`Move “${game!.title}” to trash?`} description="It disappears from the site and search. You can restore it from Trash." confirmLabel="Move to trash" onClose={() => setConfirmDelete(false)} onConfirm={() => router.delete(route('admin.games.destroy', game!.slug))} />
            )}
        </AdminLayout>
    );
}

{editing ? game!.title : 'New game'}