<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">
            <table
              class="min-w-240 overflow-y-visible"
              mat-table
              [dataSource]="evoSettingDataSource"
            >
              <!-- Total -->
              <ng-container matColumnDef="level">
                <th mat-header-cell *matHeaderCellDef>레벨</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.level }}
                  </span>
                </td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="amountScope">
                <th mat-header-cell *matHeaderCellDef>게임설정</th>
                <!-- <td mat-cell *matCellDef="let info">{{ info.amountScope }}</td> -->
                <td mat-cell *matCellDef="let info">
                  <mat-form-field
                    color="accent"
                    appearance="standard"
                    class="setting-select-obj ucap-mat-input-container"
                  >
                    <mat-select
                      [value]="amountScopeOptions[0]"
                      (selectionChange)="__onSelectionAmountScope($event)"
                    >
                      <mat-option
                        *ngFor="let amountScope of amountScopeOptions"
                        [value]="amountScope"
                      >
                        {{ amountScope.value }}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </td>
              </ng-container>

              <ng-container matColumnDef="description">
                <th mat-header-cell *matHeaderCellDef>내용</th>
                <td mat-cell *matCellDef="let info">{{ info.description }}</td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="updateBtn">
                <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="evoSettingTableColumns"></tr>
              <tr
                mat-row
                *matRowDef="let row; columns: evoSettingTableColumns"
              ></tr>
            </table>
          </div>
        </div>
        <!-- Budget details -->
        <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">
            <table
              class="min-w-240 overflow-y-visible"
              mat-table
              [dataSource]="botaSettingDataSource"
            >
              <!-- Total -->
              <ng-container matColumnDef="level">
                <th mat-header-cell *matHeaderCellDef>레벨</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.level }}
                  </span>
                </td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="amountScope">
                <th mat-header-cell *matHeaderCellDef>게임설정</th>
                <td mat-cell *matCellDef="let info">
                  <mat-form-field color="accent" appearance="standard" class="">
                    <mat-select
                      [value]="amountScopeOptions[1]"
                      (selectionChange)="__onSelectionAmountScope($event)"
                    >
                      <mat-option
                        *ngFor="let amountScope of amountScopeOptions"
                        [value]="amountScope"
                      >
                        {{ amountScope.value }}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </td>
              </ng-container>

              <ng-container matColumnDef="description">
                <th mat-header-cell *matHeaderCellDef>내용</th>
                <td mat-cell *matCellDef="let info">{{ info.description }}</td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="updateBtn">
                <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="botaSettingTableColumns"
              ></tr>
              <tr
                mat-row
                *matRowDef="let row; columns: botaSettingTableColumns"
              ></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
