<div class="flex flex-wrap items-end gap-3 mb-4">
  <label class="flex flex-col gap-1"><span>From / 起</span>
    <kendo-datepicker [(value)]="from"></kendo-datepicker></label>
  <label class="flex flex-col gap-1"><span>To / 迄</span>
    <kendo-datepicker [(value)]="to"></kendo-datepicker></label>
  <button kendoButton themeColor="primary" (click)="load()">Apply / 套用</button>
</div>

<div *ngIf="statement?.unmappedExpenseCount" class="mb-3 p-2 rounded bg-amber-50 text-amber-800 text-sm">
  {{ statement?.unmappedExpenseCount }} expense(s) have no Form 990 mapping — counted under line 24.
  尚有支出未對應 990 行，已暫計入 line 24。
</div>

<div class="hidden md:block">
  <kendo-grid [data]="statement?.rows ?? []">
    <kendo-grid-column field="lineCode" title="Line" [width]="80"></kendo-grid-column>
    <kendo-grid-column field="name_en" title="Description / 說明"></kendo-grid-column>
    <kendo-grid-column field="program" title="Program" format="{0:c2}" [width]="140"></kendo-grid-column>
    <kendo-grid-column field="managementGeneral" title="Mgmt & General" format="{0:c2}" [width]="150"></kendo-grid-column>
    <kendo-grid-column field="fundraising" title="Fundraising" format="{0:c2}" [width]="140"></kendo-grid-column>
    <kendo-grid-column field="total" title="Total" format="{0:c2}" [width]="140"></kendo-grid-column>
  </kendo-grid>
  <div class="flex justify-end gap-8 mt-2 font-semibold" *ngIf="statement">
    <span>Program: {{ statement.programTotal | currency }}</span>
    <span>M&amp;G: {{ statement.managementGeneralTotal | currency }}</span>
    <span>Fundraising: {{ statement.fundraisingTotal | currency }}</span>
    <span>Total: {{ statement.grandTotal | currency }}</span>
  </div>
</div>

<div class="md:hidden flex flex-col gap-3">
  <div *ngFor="let row of statement?.rows ?? []" class="rounded border p-3">
    <div class="font-semibold">{{ row.lineCode }} — {{ row.name_en }}</div>
    <div class="text-sm flex justify-between"><span>Program</span><span>{{ row.program | currency }}</span></div>
    <div class="text-sm flex justify-between"><span>M&amp;G</span><span>{{ row.managementGeneral | currency }}</span></div>
    <div class="text-sm flex justify-between"><span>Fundraising</span><span>{{ row.fundraising | currency }}</span></div>
    <div class="text-sm flex justify-between font-semibold"><span>Total</span><span>{{ row.total | currency }}</span></div>
  </div>
</div>
