{{template "base" .}}

{{define "content"}}
{{$d := .}}
<style>
.tax-hero { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.tax-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 24px; flex:1; min-width:180px; }
.tax-card h3 { margin:0 0 4px; font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.tax-card .val { font-size:1.6rem; font-weight:700; }
.gain  { color:#4caf50; }
.loss  { color:#f44336; }
.neutral { color:var(--text); }
.year-form { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.year-form select { padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); }
table { width:100%; border-collapse:collapse; font-size:0.9rem; }
th { text-align:left; padding:8px 12px; color:var(--muted); font-weight:600; border-bottom:2px solid var(--border); }
td { padding:8px 12px; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
.section-title { font-size:1rem; font-weight:700; margin:24px 0 12px; }
.export-btn { display:inline-block; padding:8px 18px; background:var(--accent); color:#fff; border-radius:8px; text-decoration:none; font-size:0.85rem; font-weight:600; }
</style>

<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:8px;">
  <h1 style="margin:0;">{{$d.T.Get "tax.title"}}</h1>
  <a href="/tax/export.csv?year={{$d.Year}}" class="export-btn">{{$d.T.Get "tax.btn_export"}}</a>
</div>

<form class="year-form" method="get" action="/tax">
  <label for="year-sel" style="font-size:0.85rem; color:var(--muted);">{{$d.T.Get "tax.year_label"}}</label>
  <select id="year-sel" name="year" onchange="this.form.submit()">
    {{range $d.AvailableYears}}
    <option value="{{.}}" {{if eq . $d.Year}}selected{{end}}>{{.}}</option>
    {{end}}
  </select>
</form>

<div class="tax-hero">
  <div class="tax-card">
    <h3>{{$d.T.Get "tax.gross_income"}}</h3>
    <div class="val gain">€{{cents $d.GrossIncomeCents}}</div>
    <div style="font-size:0.78rem; color:var(--muted); margin-top:4px;">{{$d.T.Get "tax.gross_income_sub"}}</div>
  </div>
  <div class="tax-card">
    <h3>{{$d.T.Get "tax.total_expenses"}}</h3>
    <div class="val neutral">€{{cents $d.TotalDeductCents}}</div>
    <div style="font-size:0.78rem; color:var(--muted); margin-top:4px;">{{$d.T.Get "tax.total_expenses_sub"}}</div>
  </div>
  <div class="tax-card">
    <h3>{{$d.T.Get "tax.capital_gains"}}</h3>
    <div class="val gain">€{{cents $d.CapitalGainsCents}}</div>
    <div style="font-size:0.78rem; color:var(--muted); margin-top:4px;">{{$d.T.Get "tax.capital_gains_sub"}}</div>
  </div>
  <div class="tax-card">
    <h3>{{$d.T.Get "tax.capital_losses"}}</h3>
    <div class="val loss">€{{cents $d.CapitalLossesCents}}</div>
    <div style="font-size:0.78rem; color:var(--muted); margin-top:4px;">{{$d.T.Get "tax.capital_losses_sub"}}</div>
  </div>
  <div class="tax-card">
    <h3>{{$d.T.Get "tax.net_capital"}}</h3>
    {{if ge $d.NetCapitalCents 0}}
    <div class="val gain">€{{cents $d.NetCapitalCents}}</div>
    {{else}}
    <div class="val loss">-€{{cents (centsAbs $d.NetCapitalCents)}}</div>
    {{end}}
    <div style="font-size:0.78rem; color:var(--muted); margin-top:4px;">{{$d.T.Get "tax.net_capital_sub"}}</div>
  </div>
</div>

{{if $d.CapitalEntries}}
<div class="section-title">{{$d.T.Get "tax.capital_table.section_title"}}</div>
<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:24px;">
<table>
  <thead>
    <tr>
      <th>{{$d.T.Get "tax.capital_table.col_name"}}</th>
      <th>{{$d.T.Get "tax.capital_table.col_isin"}}</th>
      <th style="text-align:right">{{$d.T.Get "tax.capital_table.col_cost_basis"}}</th>
      <th style="text-align:right">{{$d.T.Get "tax.capital_table.col_proceeds"}}</th>
      <th style="text-align:right">{{$d.T.Get "tax.capital_table.col_gain_loss"}}</th>
      <th style="text-align:right">{{$d.T.Get "tax.capital_table.col_pct"}}</th>
    </tr>
  </thead>
  <tbody>
  {{range $d.CapitalEntries}}
  <tr>
    <td>{{.Name}}</td>
    <td style="font-family:monospace; font-size:0.8rem; color:var(--muted);">{{.ISIN}}</td>
    <td style="text-align:right">€{{cents .BuyCents}}</td>
    <td style="text-align:right">€{{cents .SellCents}}</td>
    <td style="text-align:right; {{if ge .GainCents 0}}color:#4caf50{{else}}color:#f44336{{end}}">
      {{if ge .GainCents 0}}+{{end}}€{{cents .GainCents}}
    </td>
    <td style="text-align:right; {{if ge .GainPct 0.0}}color:#4caf50{{else}}color:#f44336{{end}}">
      {{pctSign .GainPct}}{{printf "%.1f" .GainPct}}%
    </td>
  </tr>
  {{end}}
  </tbody>
</table>
</div>
{{end}}

<div class="section-title">{{$d.T.Get "tax.expenses_table.section_title"}}</div>
<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
{{if $d.Deductibles}}
<table>
  <thead>
    <tr>
      <th>{{$d.T.Get "tax.expenses_table.col_category"}}</th>
      <th style="text-align:right">{{$d.T.Get "tax.expenses_table.col_total_spent"}}</th>
    </tr>
  </thead>
  <tbody>
  {{range $d.Deductibles}}
  <tr>
    <td>{{.Category}}</td>
    <td style="text-align:right">€{{cents .TotalCents}}</td>
  </tr>
  {{end}}
  <tr style="font-weight:700; background:var(--bg);">
    <td>{{$d.T.Get "tax.expenses_table.row_total"}}</td>
    <td style="text-align:right">€{{cents $d.TotalDeductCents}}</td>
  </tr>
  </tbody>
</table>
{{else}}
<div style="padding:32px; text-align:center; color:var(--muted);">{{$d.T.Get "tax.expenses_table.empty_msg"}} {{$d.Year}}</div>
{{end}}
</div>
{{end}}