<div class="page">
  <ng-template appPageHeaderActions>
    <button kendoButton themeColor="primary" [disabled]="selectedCount === 0" (click)="openIssue()">
      Issue Checks ({{ selectedCount }})
    </button>
  </ng-template>

  <p class="text-sm mb-3" style="color:#6b7280;">
    Approved expenses awaiting payment, grouped by payee. Select payees and issue one check each.
    / 已核准待付款支出，依收款人彙整，每位收款人開立一張支票。
  </p>

  <kendo-grid
    [kendoGridBinding]="rows"
    [loading]="loading"
    kendoGridSelectBy="key"
    [(selectedKeys)]="selectedKeys"
    [selectable]="{ checkboxOnly: true, mode: 'multiple' }"
    [sortable]="true">

    <kendo-grid-checkbox-column [width]="44" [showSelectAll]="true"></kendo-grid-checkbox-column>

    <kendo-grid-column field="payeeName" title="Payee / 收款人"></kendo-grid-column>
    <kendo-grid-column field="payeeType" title="Type" [width]="120"></kendo-grid-column>
    <kendo-grid-column title="# Expenses" [width]="120">
      <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.lines.length }}</ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="totalAmount" title="Total" [width]="140" format="c2"></kendo-grid-column>

    <ng-template kendoGridDetailTemplate let-dataItem>
      <table class="w-full text-sm">
        <thead>
          <tr class="text-left" style="border-bottom:1px solid #e5e7eb;">
            <th class="py-1">Date</th><th>Description</th><th>Ministry</th>
            <th>Category</th><th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let l of dataItem.lines" style="border-bottom:1px solid #f3f4f6;">
            <td class="py-1">{{ l.expenseDate }}</td>
            <td>{{ l.description }}</td>
            <td>{{ l.ministryName }}</td>
            <td>{{ l.categoryName }}</td>
            <td class="text-right">{{ l.amount | currency }}</td>
          </tr>
        </tbody>
      </table>
    </ng-template>
  </kendo-grid>

  <app-issue-check-dialog
    *ngIf="issueDialogGroups"
    [groups]="issueDialogGroups"
    [nextCheckNumber]="nextCheckNumber"
    (save)="onIssue($event)"
    (cancel)="issueDialogGroups = null">
  </app-issue-check-dialog>
</div>
