{{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;">{{$d.T.Get "household.title"}}</h1>

{{if not $d.HasHousehold}}
<div class="partner-form">
  <h2 style="margin:0 0 16px; font-size:1.1rem;">{{$d.T.Get "household.link_title"}}</h2>
  <p style="font-size:0.85rem; color:var(--muted); margin:0 0 20px;">
    {{$d.T.Get "household.link_desc"}}
  </p>
  <form method="post" action="/household">
    <label for="partner_email">{{$d.T.Get "household.label_partner_email"}}</label>
    <input type="email" id="partner_email" name="partner_email" placeholder="{{$d.T.Get "household.placeholder_email"}}" required style="margin-bottom:16px;">
    <button type="submit" class="btn btn-primary" style="width:100%;">{{$d.T.Get "household.btn_link"}}</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);">{{$d.T.Get "household.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;">{{$d.T.Get "household.btn_unlink"}}</button>
</div>

<div class="section-title">{{$d.T.Get "household.this_month_title"}}</div>
<div class="hh-hero">
  <div class="hh-card">
    <h3>{{$d.T.Get "household.combined_income"}}</h3>
    <div class="val" style="color:#4caf50;">€{{cents $d.CombinedIncomeCents}}</div>
  </div>
  <div class="hh-card">
    <h3>{{$d.T.Get "household.my_income"}}</h3>
    <div class="val">€{{cents $d.MyIncomeCents}}</div>
  </div>
  <div class="hh-card">
    <h3>{{$d.T.Get "household.partner_income"}}</h3>
    <div class="val">€{{cents $d.PartnerIncomeCents}}</div>
  </div>
  <div class="hh-card">
    <h3>{{$d.T.Get "household.combined_expenses"}}</h3>
    <div class="val" style="color:#f44336;">€{{cents $d.CombinedExpenseCents}}</div>
  </div>
  <div class="hh-card">
    <h3>{{$d.T.Get "household.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">{{$d.T.Get "household.goals_title"}}</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);">{{$d.T.Get "household.your_goals"}}</div>
    {{range $d.MyGoals}}
    <div class="goal-row">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge badge-committed">{{$d.T.Get "household.committed_badge"}}</span>{{end}}
    </div>
    {{else}}
    <div style="padding:16px; color:var(--muted); font-size:0.85rem;">{{$d.T.Get "household.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);">{{$d.T.Get "household.partner_goals"}}</div>
    {{range $d.PartnerGoals}}
    <div class="goal-row">
      <span>{{.Name}}</span>
      {{if .Committed}}<span class="badge badge-committed">{{$d.T.Get "household.committed_badge"}}</span>{{end}}
    </div>
    {{else}}
    <div style="padding:16px; color:var(--muted); font-size:0.85rem;">{{$d.T.Get "household.no_goals"}}</div>
    {{end}}
  </div>
</div>
{{end}}

{{end}}

<script>
const CONFIRM_UNLINK = {{$d.T.Get "household.confirm_unlink" | printf "%q"}};
function unlinkHousehold() {
  if (!confirm(CONFIRM_UNLINK)) return;
  fetch('/household', { method: 'DELETE' })
    .then(r => { if (r.ok) location.reload(); });
}
</script>
{{end}}