<div class="flex flex-col flex-auto min-w-0">
  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
    <div class="w-full max-w-screen-xl mx-auto">
      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
        <!-- Budget distribution -->
        <div
          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
        >
          <div class="text-lg font-medium tracking-tight leading-6 truncate">
            대본별 계좌 설정
          </div>
          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
            <form [formGroup]="branchForm" autocomplete="off">
              <table
                class="min-w-240 overflow-y-visible"
                mat-table
                [dataSource]="branchSettingDataSource"
              >
                <!-- Total -->
                <ng-container matColumnDef="highRank">
                  <th mat-header-cell *matHeaderCellDef>상부</th>
                  <td mat-cell *matCellDef="let info">
                    <span class="font-medium text-right">
                      {{ info.hignRank }}
                    </span>
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="signinId">
                  <th mat-header-cell *matHeaderCellDef>대본사아이디</th>
                  <td mat-cell *matCellDef="let info">{{ info.signinId }}</td>
                </ng-container>

                <ng-container matColumnDef="nickname">
                  <th mat-header-cell *matHeaderCellDef>대본사닉네임</th>
                  <td mat-cell *matCellDef="let info">{{ info.nickname }}</td>
                </ng-container>

                <ng-container matColumnDef="bankName">
                  <th mat-header-cell *matHeaderCellDef>은행명</th>
                  <!-- <td mat-cell *matCellDef="let info">{{ info.bankName }}</td> -->
                  <td mat-cell *matCellDef="let info">
                    <mat-form-field class="">
                      <input
                        id="bankName"
                        matInput
                        value="{{ info.bankName }}"
                      />
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="accountNumber">
                  <th mat-header-cell *matHeaderCellDef>계좌번호</th>
                  <td mat-cell *matCellDef="let info">
                    <mat-form-field class="">
                      <input
                        id="accountNumber"
                        matInput
                        value="{{ info.accountNumber }}"
                      />
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="accountHolder">
                  <th mat-header-cell *matHeaderCellDef>예금주</th>
                  <td mat-cell *matCellDef="let info">
                    <mat-form-field class="">
                      <input
                        id="accountHolder"
                        matInput
                        value="{{ info.accountHolder }}"
                      />
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="reditDate">
                  <th mat-header-cell *matHeaderCellDef>등록/수정일</th>
                  <td mat-cell *matCellDef="let info">{{ info.reditDate }}</td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="etc">
                  <th mat-header-cell *matHeaderCellDef>비고</th>
                  <td mat-cell *matCellDef="let basicSetting">
                    <div class="hidden sm:block truncate">
                      <button mat-flat-button [color]="'primary'">
                        등록/수정하기
                      </button>
                    </div>
                  </td>
                </ng-container>

                <tr
                  mat-header-row
                  *matHeaderRowDef="branchSettingTableColumns"
                ></tr>
                <tr
                  mat-row
                  *matRowDef="let row; columns: branchSettingTableColumns"
                ></tr>
              </table>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
