{{define "content"}}
{{$d := .}}

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px;">
  <div>
    <div style="font-size:12px; color:var(--text3); margin-bottom:4px;">
      <a href="/orgs" style="color:var(--text3); text-decoration:none;">Orgs</a> /
      <a href="/orgs/{{$d.Org.Slug}}" style="color:var(--text3); text-decoration:none;">{{$d.Org.Name}}</a> /
      <a href="/orgs/{{$d.Org.Slug}}/years/{{$d.FiscalYear.ID}}/events" style="color:var(--text3); text-decoration:none;">{{$d.FiscalYear.Label}}</a> / Report
    </div>
    <h1>{{$d.FiscalYear.Label}} Year-End Report</h1>
  </div>
  <div style="display:flex; gap:8px;">
    <a href="/orgs/{{$d.Org.Slug}}/years/{{$d.FiscalYear.ID}}/analysis" class="btn btn-outline btn-sm">Analysis</a>
  </div>
</div>

<!-- Year selector -->
<div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;">
  {{range $d.FiscalYears}}
  <a href="/orgs/{{$d.Org.Slug}}/years/{{.ID}}/report" style="padding:5px 12px; border-radius:20px; text-decoration:none; font-size:12px; font-weight:600;
    {{if eq $d.FiscalYear.ID .ID}}background:var(--accent);color:#000;{{else}}background:var(--bg3);color:var(--text3);{{end}}">
    {{.Label}}
  </a>
  {{end}}
</div>

<!-- Executive summary -->
<div class="card animate-on-scroll" style="margin-bottom:28px;">
  <h2 style="margin-bottom:16px;">Executive Summary</h2>
  <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:16px;">
    <div>
      <div style="font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:6px;">PLANNED INCOME</div>
      <div style="font-size:20px; font-weight:700; color:var(--green);">{{cents $d.TotalPlannedIncome}}</div>
    </div>
    <div>
      <div style="font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:6px;">ACTUAL INCOME</div>
      <div style="font-size:20px; font-weight:700; color:{{varColor $d.TotalPlannedIncome $d.TotalActualIncome}};">{{cents $d.TotalActualIncome}}</div>
    </div>
    <div>
      <div style="font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:6px;">PLANNED EXPENSE</div>
      <div style="font-size:20px; font-weight:700; color:var(--red);">{{cents $d.TotalPlannedExpense}}</div>
    </div>
    <div>
      <div style="font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:6px;">ACTUAL EXPENSE</div>
      <div style="font-size:20px; font-weight:700; color:{{varColor $d.TotalPlannedExpense $d.TotalActualExpense}};">{{cents $d.TotalActualExpense}}</div>
    </div>
  </div>
  <div style="margin-top:16px; padding-top:16px; border-top:1px solid var(--border); display:flex; gap:32px;">
    <div>
      <span style="font-size:12px; color:var(--text3);">Planned net: </span>
      <span style="font-weight:600;">{{cents (sub $d.TotalPlannedIncome $d.TotalPlannedExpense)}}</span>
    </div>
    <div>
      <span style="font-size:12px; color:var(--text3);">Actual net: </span>
      <span style="font-weight:600; color:{{varColor (sub $d.TotalPlannedIncome $d.TotalPlannedExpense) (sub $d.TotalActualIncome $d.TotalActualExpense)}};">
        {{cents (sub $d.TotalActualIncome $d.TotalActualExpense)}}
      </span>
    </div>
    <div>
      <span style="font-size:12px; color:var(--text3);">Events: </span>
      <span style="font-weight:600;">{{len $d.EventReports}}</span>
    </div>
    <div>
      <span style="font-size:12px; color:var(--text3);">Period: </span>
      <span style="font-weight:600;">{{dateShort $d.FiscalYear.StartDate}} — {{dateShort $d.FiscalYear.EndDate}}</span>
    </div>
  </div>
</div>

<!-- Event reports -->
{{range $d.EventReports}}
{{$ev := .Event}}
<div class="card animate-on-scroll" style="margin-bottom:20px;">
  <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:16px;">
    <div>
      <h2 style="margin-bottom:4px;">{{$ev.Name}}</h2>
      <div style="font-size:12px; color:var(--text3);">{{dateShort $ev.DateStart}} — {{dateShort $ev.DateEnd}}</div>
      {{if .Teams}}
      <div style="margin-top:6px;">
        {{range .Teams}}<span style="display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:4px; background:var(--bg3); margin-right:3px; font-size:11px; color:var(--text2);"><span style="font-size:13px;">{{if .Avatar}}{{.Avatar}}{{else}}👥{{end}}</span>{{.Name}}</span>{{end}}
      </div>
      {{end}}
    </div>
    <div style="display:grid; grid-template-columns:repeat(4,auto); gap:16px; text-align:right;">
      <div>
        <div style="font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:3px;">PLAN INC</div>
        <div style="font-size:14px; font-weight:600; color:var(--green);">{{cents .PlannedIncome}}</div>
      </div>
      <div>
        <div style="font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:3px;">ACT INC</div>
        <div style="font-size:14px; font-weight:600; color:{{varColor .PlannedIncome .ActualIncome}};">{{cents .ActualIncome}}</div>
      </div>
      <div>
        <div style="font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:3px;">PLAN EXP</div>
        <div style="font-size:14px; font-weight:600; color:var(--red);">{{cents .PlannedExpense}}</div>
      </div>
      <div>
        <div style="font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:3px;">ACT EXP</div>
        <div style="font-size:14px; font-weight:600; color:{{varColor .PlannedExpense .ActualExpense}};">{{cents .ActualExpense}}</div>
      </div>
    </div>
  </div>

  {{if $ev.Description}}
  <p style="font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:14px;">{{$ev.Description}}</p>
  {{end}}

  {{if .BudgetLines}}
  <details style="margin-bottom:14px;">
    <summary style="font-size:12px; font-weight:700; color:var(--text3); cursor:pointer; letter-spacing:.04em;">BUDGET LINES ({{len .BudgetLines}})</summary>
    <table style="margin-top:10px;">
      <thead>
        <tr>
          <th>Category</th>
          <th>Description</th>
          <th>Type</th>
          <th style="text-align:right;">Planned</th>
        </tr>
      </thead>
      <tbody>
        {{range .BudgetLines}}
        <tr>
          <td style="font-size:13px; font-weight:600;">{{.Category}}</td>
          <td style="font-size:12px; color:var(--text3);">{{.Description}}</td>
          <td style="font-size:11px; font-weight:700; {{if eq (print .Type) "income"}}color:var(--green);{{else}}color:var(--red);{{end}}">{{.Type}}</td>
          <td style="text-align:right; font-size:13px;">{{cents .PlannedCents}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </details>
  {{end}}

  {{if .Comments}}
  <div>
    <div style="font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text3); margin-bottom:10px;">TEAM FEEDBACK</div>
    <div style="display:flex; flex-direction:column; gap:10px;">
      {{range .Comments}}
      <div style="padding:10px 14px; border-radius:var(--radius-sm); background:var(--bg3); border-left:3px solid var(--accent2);">
        <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
          <span style="font-size:12px; font-weight:600;">{{.UserEmail}}</span>
          <span style="font-size:11px; color:var(--text3);">{{dateShort .CreatedAt}}</span>
        </div>
        <p style="font-size:13px; color:var(--text2); line-height:1.5; margin:0;">{{.Body}}</p>
      </div>
      {{end}}
    </div>
  </div>
  {{else if eq (print $d.FiscalYear.Status) "closed"}}
  <p style="font-size:12px; color:var(--text3); font-style:italic;">No team feedback submitted for this event.</p>
  {{end}}
</div>
{{else}}
<div class="card empty-state animate-on-scroll">
  <div style="font-size:36px; margin-bottom:12px;">📊</div>
  <h3>No events in this fiscal year</h3>
  <p>Events and their outcomes will appear here once created.</p>
</div>
{{end}}

{{if eq (print $d.FiscalYear.Status) "active"}}
<div style="margin-top:24px; padding:16px 20px; border-radius:var(--radius); background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.3);">
  <p style="font-size:13px; color:#fbbf24; margin:0;">⚠ This fiscal year is still active. The report will be final once the year is closed. Team feedback can be added after closing.</p>
</div>
{{end}}
{{end}}