<kendo-dialog title="Receipt Acknowledgement / 簽收" [width]="'95vw'" [maxWidth]="480" (close)="onClose()">
  <div class="p-2 flex flex-col gap-3">
    <div class="text-sm" style="color:#374151;">
      Check #{{ check.checkNumber }} · {{ check.payeeName }} · {{ check.amount | currency }}
    </div>

    <label class="flex flex-col gap-1">
      Signed Name / 簽收人姓名
      <kendo-textbox [(ngModel)]="signedName" placeholder="Recipient name"></kendo-textbox>
    </label>

    <div class="flex flex-col gap-1">
      <span class="text-sm">Signature / 簽名</span>
      <canvas #pad width="440" height="180"
        class="border rounded touch-none w-full"
        style="border-color:#9ca3af; background:#fff; touch-action:none; height:auto; aspect-ratio:440 / 180;"
        (pointerdown)="onDown($event)"
        (pointermove)="onMove($event)"
        (pointerup)="onUp()"
        (pointerleave)="onUp()">
      </canvas>
      <button kendoButton fillMode="flat" class="self-start" (click)="clear()">Clear / 清除</button>
    </div>
  </div>

  <kendo-dialog-actions>
    <button kendoButton (click)="onClose()">Cancel</button>
    <button kendoButton themeColor="primary" [disabled]="!hasInk || !signedName.trim() || submitting"
      (click)="confirm()">Confirm / 確認簽收</button>
  </kendo-dialog-actions>
</kendo-dialog>
