<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
  <!-- Header -->
  <div
    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
  >
    <div class="text-lg font-medium">입금내역</div>
    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
      <mat-icon
        class="text-current"
        [svgIcon]="'heroicons_outline:x'"
      ></mat-icon>
    </button>
  </div>
  <form
    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
    [formGroup]="composeForm"
  >
    <ng-container *ngIf="depositHistory">
      <ng-container *ngIf="depositHistory.length > 0; else noDepositHistory">
        <div class="grid">
          <div
            class="deposit-history-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
            style="font-size: x-small"
          >
            <div>상태</div>
            <div>충전금액</div>
            <div>처리날짜</div>
            <div>신청날짜</div>
          </div>
          <ng-container *ngIf="depositHistory">
            <ng-container
              *ngFor="let info of depositHistory; trackBy: __trackByFn"
            >
              <div
                class="deposit-history-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                style="font-size: small"
              >
                <div>{{ info.state }}</div>
                <div>{{ info.chargeMoney }}</div>
                <div>{{ info.processDate }}</div>
                <div>{{ info.applicationDate }}</div>
              </div>
            </ng-container>
          </ng-container>
        </div>
      </ng-container>
    </ng-container>

    <ng-template #noDepositHistory>
      <div
        class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
      >
        There are no data!
      </div>
    </ng-template>
  </form>
</div>
