<div id="bank-info" class="page-layout simple fullwidth" fxLayout="column">
  <!-- <div id="orders" class="page-layout carded fullwidth inner-scroll"> -->
  <!-- HEADER -->
  <div
    class="header accent p-24 h-160"
    fxLayout="row"
    fxLayoutAlign="start center"
  >
    <div fxLayout="column" fxLayoutAlign="center start">
      <div fxLayout="row" fxLayoutAlign="start center">
        <mat-icon class="secondary-text s-18">home</mat-icon>
        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
        <span class="secondary-text">User Interface</span>
      </div>
      <div class="h1 mt-16">계좌분리 관리</div>
    </div>
  </div>
  <!-- / HEADER -->

  <!-- CONTENT -->
  <div class="content p-24">
    <div class="h1">
      계좌분리
    </div>

    <div
      class="mb-24"
      fxLayout="column"
      fxLayoutAlign="start"
      fxLayout.gt-md="row"
    >
      <div
        class="mat-elevation-z8 p-24 mr-24"
        fxFlex="3 0 auto"
        fxLayout="column"
      >
        <form
          name="bankInfoForm"
          [formGroup]="bankInfoForm"
          (ngSubmit)="bankInfoUpdate()"
          novalidate
        >
          <mat-table
            class="bank-info-table"
            #table
            [dataSource]="dataSource"
            [@animateStagger]="{ value: '50' }"
            matSort
            formArrayName="items"
          >
            <!-- Icon Column [formGroupName] -->
            <ng-container matColumnDef="id">
              <mat-header-cell *matHeaderCellDef>계좌순번</mat-header-cell>
              <mat-cell
                *matCellDef="let bankInfo; let i = index"
                [formGroupName]="i"
                >{{ bankInfo.id }}</mat-cell
              >
            </ng-container>

            <!-- KorName Column -->
            <ng-container matColumnDef="name">
              <mat-header-cell *matHeaderCellDef>은행명</mat-header-cell>
              <mat-cell *matCellDef="let bankInfo">{{
                bankInfo.name
              }}</mat-cell>
            </ng-container>

            <!-- 추가방식 Column -->
            <ng-container matColumnDef="number">
              <mat-header-cell *matHeaderCellDef>계좌번호</mat-header-cell>
              <mat-cell *matCellDef="let bankInfo">{{
                bankInfo.number
              }}</mat-cell>
            </ng-container>

            <!-- 종목 Column -->
            <ng-container matColumnDef="holder">
              <mat-header-cell *matHeaderCellDef>예금주</mat-header-cell>
              <mat-cell *matCellDef="let bankInfo">{{
                bankInfo.holder
              }}</mat-cell>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="description">
              <mat-header-cell *matHeaderCellDef>설명</mat-header-cell>
              <mat-cell *matCellDef="let bankInfo">{{
                bankInfo.description
              }}</mat-cell>
            </ng-container>

            <mat-header-row
              *matHeaderRowDef="displayedColumns"
            ></mat-header-row>
            <mat-row
              *matRowDef="let row; columns: displayedColumns"
              class="league"
              matRipple
            ></mat-row>
          </mat-table>
        </form>
      </div>
    </div>
  </div>
  <!-- / CONTENT -->
</div>
