<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]="currentUserDataSource"
            >
              <!-- Type -->
              <ng-container matColumnDef="id" sticky>
                <th mat-header-cell *matHeaderCellDef>번호</th>
                <td mat-cell *matCellDef="let user; let idx = index">
                  <span class="flex items-center">
                    <span class="w-2 h-2 rounded-full"></span>
                    <span class="ml-3 leading-4">{{ idx + 1 }}</span>
                  </span>
                </td>
              </ng-container>

              <!-- Total -->
              <ng-container matColumnDef="highRank">
                <th mat-header-cell *matHeaderCellDef>상위</th>
                <td mat-cell *matCellDef="let user">
                  <span class="font-medium text-right">
                    {{ user.highRank }}
                  </span>
                </td>
              </ng-container>

              <!-- Expenses amount -->
              <ng-container matColumnDef="rank">
                <th mat-header-cell *matHeaderCellDef>등급</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.rank }}
                </td>
              </ng-container>

              <!-- Expenses percentage -->
              <ng-container matColumnDef="level">
                <th mat-header-cell *matHeaderCellDef>레벨</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.level }}
                </td>
              </ng-container>

              <!-- Remaining amount -->
              <ng-container matColumnDef="signinId">
                <th mat-header-cell *matHeaderCellDef>아이디</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.signinId }}
                </td>
              </ng-container>

              <!-- Remaining percentage -->
              <ng-container matColumnDef="nickname">
                <th mat-header-cell *matHeaderCellDef>닉네임</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.nickname }}
                </td>
              </ng-container>

              <ng-container matColumnDef="currentLocation">
                <th mat-header-cell *matHeaderCellDef>현재위치</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.currentLocation }}
                </td>
              </ng-container>

              <ng-container matColumnDef="cash">
                <th mat-header-cell *matHeaderCellDef>캐쉬</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.cash }}
                </td>
              </ng-container>

              <ng-container matColumnDef="gameMoney">
                <th mat-header-cell *matHeaderCellDef>게임중머니</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.gameMoney }}
                </td>
              </ng-container>

              <ng-container matColumnDef="casinoMoney">
                <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>
                    <button mat-flat-button [color]="'primary'">
                      게임머니회수
                    </button>
                  </div>
                </td>
              </ng-container>

              <ng-container matColumnDef="comp">
                <th mat-header-cell *matHeaderCellDef>콤프</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.comp }}
                </td>
              </ng-container>
              <ng-container matColumnDef="siteAddress">
                <th mat-header-cell *matHeaderCellDef>사이트</th>
                <td mat-cell *matCellDef="let user">
                  {{ user.siteAddress }}
                </td>
              </ng-container>
              <ng-container matColumnDef="sendMessageBtn">
                <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>
              <ng-container matColumnDef="betHistoryBtn">
                <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>
              <ng-container matColumnDef="forceSignOutBtn">
                <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="currentUserTableColumns"
              ></tr>
              <tr
                mat-row
                *matRowDef="let row; columns: currentUserTableColumns"
              ></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">
            <mat-card>
              <mat-card-content>
                <!-- 구분 -->

                <div class="flex">
                  <mat-form-field class="w-1/3 pr-2">
                    <mat-label>제목</mat-label>
                    <input matInput />
                  </mat-form-field>
                </div>
                <div class="flex">
                  <mat-form-field class="w-1/3 pr-2">
                    <mat-label>글쓴이</mat-label>
                    <input matInput placeholder="관리자" />
                  </mat-form-field>
                </div>
                <div class="flex">
                  <mat-form-field class="w-1/3 pr-2">
                    <mat-label>내용</mat-label>
                    <input matInput />
                  </mat-form-field>
                </div>
                <div class="flex">
                  <mat-form-field class="w-1/3 pr-2">
                    <input matInput />
                  </mat-form-field>
                </div>
              </mat-card-content>
            </mat-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
