<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">
            사이트 ON/OFF
          </div>
          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
            <table
              class="min-w-240 overflow-y-visible"
              mat-table
              [dataSource]="basicInfoSettingDataSource"
            >
              <!-- Total -->
              <ng-container matColumnDef="info">
                <th mat-header-cell *matHeaderCellDef>정보</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.name }}
                  </span>
                </td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="description">
                <th mat-header-cell *matHeaderCellDef>내용</th>
                <td mat-cell *matCellDef="let info">{{ info.content }}</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="siteSettingTableColumns"
              ></tr>
              <tr
                mat-row
                *matRowDef="let row; columns: siteSettingTableColumns"
              ></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]="basicEarnSettingDataSource"
            >
              <!-- Type -->
              <ng-container matColumnDef="level" sticky>
                <th mat-header-cell *matHeaderCellDef>레벨</th>
                <td mat-cell *matCellDef="let earn">
                  <span class="flex items-center">
                    {{ earn.level }}
                  </span>
                </td>
              </ng-container>

              <!-- Total -->
              <ng-container matColumnDef="firstRate">
                <th mat-header-cell *matHeaderCellDef>요율</th>
                <td mat-cell *matCellDef="let earn">
                  <span class="font-medium text-right">
                    {{ earn.firstRate }}
                  </span>
                </td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="firstIsUse">
                <th mat-header-cell *matHeaderCellDef>사용여부</th>
                <td mat-cell *matCellDef="let earn">
                  <div class="sm:col-span-4 flex items-center justify-between">
                    <mat-slide-toggle
                      class="ml-4"
                      [color]="'primary'"
                      #twoStepToggle
                    >
                    </mat-slide-toggle>
                  </div>
                </td>
              </ng-container>

              <!-- Expenses percentage -->
              <ng-container matColumnDef="firstMaxMoney">
                <th mat-header-cell *matHeaderCellDef>최대금액</th>
                <td mat-cell *matCellDef="let earn">
                  {{ earn.firstMaxEarnMoney }}
                </td>
              </ng-container>

              <!-- Remaining amount -->
              <ng-container matColumnDef="everyRate">
                <th mat-header-cell *matHeaderCellDef>요율</th>
                <td mat-cell *matCellDef="let earn">
                  {{ earn.everyRate }}
                </td>
              </ng-container>

              <!-- Remaining percentage -->
              <ng-container matColumnDef="everyIsUse">
                <th mat-header-cell *matHeaderCellDef>사용여부</th>
                <td mat-cell *matCellDef="let earn">
                  {{ earn.everyIsUse }}
                </td>
              </ng-container>

              <ng-container matColumnDef="everyMaxMoney">
                <th mat-header-cell *matHeaderCellDef>최대금액</th>
                <td mat-cell *matCellDef="let earn">
                  {{ earn.everyMaxEarnMoney }}
                </td>
              </ng-container>

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

              <tr
                mat-header-row
                *matHeaderRowDef="siteEarnSettingTableColumns"
              ></tr>
              <tr
                mat-row
                *matRowDef="let row; columns: siteEarnSettingTableColumns"
              ></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">
            시스템 ON/OFF
          </div>
          <div class="flex flex-col flex-auto">
            <table
              class="min-w-240 overflow-y-visible"
              mat-table
              [dataSource]="basicGameSettingDataSource"
            >
              <!-- Type -->
              <ng-container matColumnDef="title" sticky>
                <th mat-header-cell *matHeaderCellDef>제목</th>
                <td mat-cell *matCellDef="let game">
                  <span class="flex items-center">
                    <span class="w-2 h-2 rounded-full"></span>
                    <span class="ml-3 leading-4">{{ game.name }}</span>
                  </span>
                </td>
              </ng-container>

              <!-- Total -->
              <ng-container matColumnDef="isUse">
                <th mat-header-cell *matHeaderCellDef>사용여부</th>
                <td mat-cell *matCellDef="let game">
                  <div class="sm:col-span-4 flex items-center justify-between">
                    <mat-slide-toggle class="ml-4" [color]="'primary'">
                    </mat-slide-toggle>
                  </div>
                </td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="memo">
                <th mat-header-cell *matHeaderCellDef>메모</th>
                <td mat-cell *matCellDef="let game">
                  {{ game.memo }}
                </td>
              </ng-container>

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

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

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