{{template "base" .}}

{{define "content"}}
{{$d := .}}
<style>
.hh-hero { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.hh-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 24px; flex:1; min-width:160px; }
.hh-card h3 { margin:0 0 4px; font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.hh-card .val { font-size:1.5rem; font-weight:700; }
.section-title { font-size:1rem; font-weight:700; margin:24px 0 12px; }
.partner-form { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:480px; }
.partner-form label { display:block; font-size:0.85rem; color:var(--muted); margin-bottom:6px; }
.partner-form input { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.9rem; box-sizing:border-box; }
.btn { padding:8px 20px; border:none; border-radius:8px; font-size:0.9rem; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger { background:#f44336; color:#fff; }
.goals-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.goal-row { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); font-size:0.9rem; }
.goal-row:last-child { border-bottom:none; }
.badge { padding:2px 8px; border-radius:20px; font-size:0.72rem; font-weight:600; }
.badge-committed { background:rgba(76,175,80,0.15); color:#4caf50; }
</style>

<h1 style="margin:0 0 24px;">Household</h1>

{{if not $d.HasHousehold}}
<div class="partner-form">
  <h2 style="margin:0 0 16px; font-size:1.1rem;">Link a partner account</h2>
  <p style="font-size:0.85rem; color:var(--muted); margin:0 0 20px;">
    Combine your finances with a partner to see a shared dashboard. Enter their account email address below.
  </p>
  <form method="post" action="/household">
    <label for="partner_email">Partner email</label>
    <input type="email" id="partner_email" name="partner_email" placeholder="partner@example.com" required style="margin-bottom:16px;">
    <button type="submit" class="btn btn-primary" style="width:100%;">Link Partner</button>
  </form>
</div>
{{else}}

<div style="display:flex; align-items:center; gap:12px; margin-bottom:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 20px;">
  <div style="flex:1;">
    <div style="font-size:0.8rem; color:var(--muted);">Linked partner</div>
    <div style="font-weight:600;">{{$d.PartnerEmail}}</div>
  </div>
  <button class="btn btn-danger" onclick="unlinkHousehold()" style="font-size:0.8rem; padding:6px 14px;">Unlink</button>
</div>

<div class="section-title">This Month — Combined View</div>
<div class="hh-hero">
  <div class="hh-card">
    <h3>Combined Income</h3>
    <div class="val" style="color:#4caf50;">€{{cents $d.CombinedIncomeCents}}</div>
  </div>
  <div class="hh-card">
    <h3>My Income</h3>
    <div class="val">€{{cents $d.MyIncomeCents}}</div>
  </div>
  <div class="hh-card">
    <h3>Partner Income</h3>
    <div class="val">€{{cents $d.PartnerIncomeCents}}</div>
  </div>
  <div class="hh-card">
    <h3>Combined Expenses</h3>
    <div class="val" style="color:#f44336;">€{{cents $d.CombinedExpenseCents}}</div>
  </div>
  <div class="hh-card">
    <h3>Disposable</h3>
    {{if ge $d.CombinedDisposable 0}}
    <div class="val" style="color:#4caf50;">€{{cents $d.CombinedDisposable}}</div>
    {{else}}
    <div class="val" style="color:#f44336;">-€{{cents (centsAbs $d.CombinedDisposable)}}</div>
    {{end}}
  </div>
</div>

{{if or $d.MyGoals $d.PartnerGoals}}
<div class="section-title">Goals</div>
<div class="goals-grid">
  <div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
    <div style="padding:12px 16px; font-weight:600; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--muted);">YOUR GOALS</div>
    {{range $d.MyGoals}}
    <div class="goal-row">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge badge-committed">committed</span>{{end}}
    </div>
    {{else}}
    <div style="padding:16px; color:var(--muted); font-size:0.85rem;">No goals</div>
    {{end}}
  </div>
  <div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
    <div style="padding:12px 16px; font-weight:600; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--muted);">PARTNER GOALS</div>
    {{range $d.PartnerGoals}}
    <div class="goal-row">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge badge-committed">committed</span>{{end}}
    </div>
    {{else}}
    <div style="padding:16px; color:var(--muted); font-size:0.85rem;">No goals</div>
    {{end}}
  </div>
</div>
{{end}}

{{end}}

<script>
function unlinkHousehold() {
  if (!confirm('Unlink household? This only removes the link, not any data.')) return;
  fetch('/household', { method: 'DELETE' })
    .then(r => { if (r.ok) location.reload(); });
}
</script>
{{end}}