<div class="mx-auto max-w-6xl"><div class="grid gap-6 lg:grid-cols-[1fr_360px]"><section><div class="mb-5"><h2 class="font-display text-2xl font-extrabold">Family Profiles</h2><p class="mt-2 text-sm text-slate-500">Manage care for children, parents and other people you support.</p></div><div class="grid gap-4 sm:grid-cols-2"><?php if(!$rows): ?><div class="sm:col-span-2 rounded-2xl border border-dashed border-slate-200 bg-white py-12 text-center text-sm text-slate-400">No family profiles yet.</div><?php endif; ?><?php foreach($rows as $r): ?><div class="rounded-2xl border border-slate-100 bg-white p-5 shadow-card"><div class="flex items-center gap-3"><span class="grid h-12 w-12 place-items-center rounded-full bg-teal-50 font-bold text-teal-700"><?= initials($r['full_name']) ?></span><div><h3 class="font-display font-bold"><?= esc($r['full_name']) ?></h3><p class="text-xs text-slate-400"><?= esc($r['relationship']) ?></p></div></div><div class="mt-5 flex gap-2"><a href="/patient/request-care" class="flex-1 rounded-lg bg-teal-600 px-3 py-2 text-center text-xs font-bold text-white">Request care</a><form action="/patient/family/<?= $r['id'] ?>/archive" method="post"><?= csrf_field() ?><button class="rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold text-slate-500">Archive</button></form></div></div><?php endforeach; ?></div></section><aside class="rounded-2xl border border-slate-100 bg-white p-5 shadow-card lg:sticky lg:top-28 lg:self-start"><h3 class="font-display text-lg font-extrabold">Add family member</h3><?php if($errors=session()->getFlashdata('errors')): ?><div class="mt-4 rounded-xl bg-rose-50 p-3 text-xs text-rose-700"><?php foreach($errors as $e): ?><div><?= esc($e) ?></div><?php endforeach; ?></div><?php endif; ?><form action="/patient/family" method="post" class="mt-5 space-y-3"><?= csrf_field() ?><input name="full_name" required class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm" placeholder="Full name"><input name="relationship" required class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm" placeholder="Relationship"><input name="date_of_birth" type="date" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm"><select name="gender" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm"><option value="">Gender (optional)</option><option>Female</option><option>Male</option><option>Other</option></select><button class="w-full rounded-xl bg-navy px-4 py-3 text-sm font-extrabold text-white">Add profile</button></form></aside></div></div>
