<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]="gameForm" autocomplete="off">
              <table
                class="min-w-240 overflow-y-visible"
                mat-table
                [dataSource]="gameSettingDataSource"
              >
                <!-- Total -->
                <ng-container matColumnDef="siteName">
                  <th mat-header-cell *matHeaderCellDef>사이트명</th>
                  <td mat-cell *matCellDef="let info">
                    <mat-form-field class="">
                      <input
                        id="siteName"
                        matInput
                        value="{{ info.siteName }}"
                      />
                    </mat-form-field>
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="minBettingMoney">
                  <th mat-header-cell *matHeaderCellDef>파워볼 최소 배팅액</th>
                  <td mat-cell *matCellDef="let info">
                    <mat-form-field class="">
                      <input
                        id="minBettingMoney"
                        matInput
                        value="{{ info.minBettingMoney }}"
                      />
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="maxBettingMoney">
                  <th mat-header-cell *matHeaderCellDef>파워볼 최대 배팅액</th>
                  <td mat-cell *matCellDef="let info">
                    <mat-form-field class="">
                      <input
                        id="maxBettingMoney"
                        matInput
                        value="{{ info.maxBettingMoney }}"
                      />
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="maxWinMoney">
                  <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="maxWinMoney"
                        matInput
                        value="{{ info.maxWinMoney }}"
                      />
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="modifyBtn">
                  <th mat-header-cell *matHeaderCellDef>수정</th>
                  <td mat-cell *matCellDef="let info">
                    <div class="hidden sm:block truncate">
                      <button mat-flat-button [color]="'primary'">수정</button>
                    </div>
                  </td>
                </ng-container>

                <ng-container matColumnDef="removeBtn">
                  <th mat-header-cell *matHeaderCellDef>삭제</th>
                  <td mat-cell *matCellDef="let info">
                    <div class="hidden sm:block truncate">
                      <button mat-flat-button [color]="'primary'">삭제</button>
                    </div>
                  </td>
                </ng-container>

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