{editing && (

{editing==='new'?'New Header Template':'Edit Header Template'}

{fi('Template Name *','name')}{fi('Company Name','company_name')}{fi('Tagline','company_tagline')}{fi('Address','company_address')}{fi('Phone','company_phone')}{fi('Email','company_email','email')}{fi('Reg No','reg_no')}{fi('SST No','sst_no')}{fi('Logo URL','logo_url')}

Header Color

setData('header_color',e.target.value)} className="w-12 h-10 rounded cursor-pointer border"/>setData('header_color',e.target.value)} className="flex-1 border rounded-md px-3 py-2 text-sm"/>

Supply Message

setData('supply_message',e.target.value)} rows={2} className="w-full border rounded-md px-3 py-2 text-sm"/></div>
                            <div><label className="block text-sm font-medium mb-1">Footer Message</label><textarea value={data.footer_message??''} onChange={e=>setData('footer_message',e.target.value)} rows={2} className="w-full border rounded-md px-3 py-2 text-sm"/></div>
                        </div>
                        <div><label className="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" checked={!!data.is_default} onChange={e=>setData('is_default',e.target.checked)} className="rounded"/>Set as default header</label></div>
                        <div className="flex gap-3"><Button type="submit" disabled={processing}>Save</Button><Button type="button" variant="outline" onClick={()=>setEditing(null)}>Cancel</Button></div>
                    </form>
                )}
                <div className="bg-white rounded-lg border border-border shadow-sm overflow-hidden">
                    <table className="w-full text-sm">
                        <thead className="bg-muted/50 border-b"><tr><th className="text-left px-4 py-3 font-medium">Name</th><th className="text-left px-4 py-3 font-medium hidden md:table-cell">Company</th><th className="text-left px-4 py-3 font-medium">Color</th><th className="w-24 px-4 py-3"></th></tr></thead>
                        <tbody className="divide-y">{templates.map((t:any)=><tr key={t.id} className="hover:bg-muted/30"><td className="px-4 py-3 font-medium">{t.name}{t.is_default&&<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">Default</span>}</td><td className="px-4 py-3 text-muted-foreground hidden md:table-cell">{t.company_name||'—'}</td><td className="px-4 py-3"><div className="flex items-center gap-2"><div className="w-5 h-5 rounded border" style={{background:t.header_color??'#0f172a'}}/><span className="text-xs text-muted-foreground">{t.header_color}</span></div></td><td className="px-4 py-3"><div className="flex gap-2 justify-end"><button onClick={()=>openEdit(t)}><Edit className="w-4 h-4 text-muted-foreground hover:text-primary"/></button><button onClick={()=>{if(confirm('Delete?'))router.delete(`/settings/header-templates/${t.id}`)}}><Trash2 className="w-4 h-4 text-muted-foreground hover:text-destructive"/></button></div></td></tr>)}</tbody>
                    </table>
                    {templates.length===0&&<p className="text-center py-12 text-muted-foreground">No header templates yet.</p>}
                </div>
            </div>
        </AuthenticatedLayout>
    );
}