<div
  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
>
  <!-- Header -->
  <div
    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
  >
    <!-- Loader -->
    <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
      <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
    </div>
    <!-- Title -->
    <div class="text-4xl font-extrabold tracking-tight">
      현재접속자 & 쪽지전송
    </div>
    <!-- Actions -->
    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"></div>
  </div>
  <!-- Main -->
  <div class="flex flex-auto overflow-hidden">
    <!-- Products list -->
    <div
      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
    >
      <ng-container *ngIf="currentUsers$ | async as currentUsers">
        <ng-container *ngIf="currentUsers.length > 0; else noCurrentUser">
          <div class="grid">
            <!-- Header -->
            <div
              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
              matSort
              matSortDisableClear
            >
              <div></div>
              <div class="hidden sm:block" [mat-sort-header]="'index'">
                번호
              </div>
              <div class="hidden sm:block" [mat-sort-header]="'highRank'">
                상위
              </div>
              <div class="hidden sm:block" [mat-sort-header]="'rank'">등급</div>
              <div class="hidden sm:block" [mat-sort-header]="'level'">
                레벨
              </div>
              <div class="hidden sm:block" [mat-sort-header]="'id'">아이디</div>
              <div class="hidden sm:block" [mat-sort-header]="'nickname'">
                닉네임
              </div>
              <div
                class="hidden sm:block"
                [mat-sort-header]="'currentLocation'"
              >
                현재위치
              </div>
              <div class="hidden sm:block" [mat-sort-header]="'cash'">캐쉬</div>
              <div class="hidden sm:block" [mat-sort-header]="'gameMoney'">
                게임중머니
              </div>
              <div class="hidden sm:block">카지노->캐쉬</div>
              <div class="hidden sm:block" [mat-sort-header]="'comp'">콤프</div>
              <div class="hidden sm:block" [mat-sort-header]="'siteAddress'">
                사이트
              </div>
              <div class="hidden sm:block">쪽지보내기</div>
              <div class="hidden sm:block">배팅내역</div>
              <div class="hidden sm:block">로그아웃</div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="currentUsers$ | async as currentUsers">
              <ng-container
                *ngFor="let currentUser of currentUsers; trackBy: __trackByFn"
              >
                <div
                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <!-- index -->
                  <div class="hidden sm:block truncate">
                    {{ currentUser.index }}
                  </div>
                  <!-- highRank -->
                  <div class="hidden sm:block truncate">
                    {{ currentUser.highRank }}
                  </div>
                  <!-- rank -->
                  <div class="hidden sm:block truncate">
                    {{ currentUser.rank }}
                  </div>
                  <!-- level -->
                  <div class="hidden sm:block truncate">
                    LV.{{ currentUser.level }}
                  </div>
                  <!-- id -->
                  <div
                    class="hidden sm:block truncate"
                    (click)="viewUserDetail(currentUser.id!)"
                  >
                    {{ currentUser.id }}
                  </div>
                  <!-- nickname -->
                  <div class="hidden sm:block truncate">
                    {{ currentUser.nickname }}
                  </div>

                  <!-- currentLocation -->
                  <div class="hidden sm:block truncate">
                    {{ currentUser.currentLocation }}
                  </div>
                  <!-- cash -->
                  <div class="hidden sm:block truncate">
                    캐쉬{{ currentUser.cash }}
                  </div>
                  <!-- casinoCash -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      게임머니확인
                    </button>
                    <button mat-flat-button [color]="'primary'">
                      게임머니회수
                    </button>
                  </div>
                  <!-- comp -->
                  <div class="hidden sm:block truncate">
                    {{ currentUser.comp }}
                  </div>
                  <!-- site -->
                  <div class="hidden sm:block truncate">
                    {{ currentUser.siteAddress }}
                  </div>

                  <!-- message -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      <mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
                    </button>
                  </div>

                  <!-- bettinglist -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      배팅리스트
                    </button>
                  </div>
                  <!-- logout -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      로그아웃
                    </button>
                  </div>
                </div>
              </ng-container>
            </ng-container>
          </div>

          <mat-paginator
            class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
            [ngClass]="{ 'pointer-events-none': isLoading }"
            [length]="pagination?.length"
            [pageIndex]="pagination?.page"
            [pageSize]="pagination?.size"
            [pageSizeOptions]="[5, 10, 25, 100]"
            [showFirstLastButtons]="true"
          ></mat-paginator>
        </ng-container>
      </ng-container>

      <ng-template #noCurrentUser>
        <div
          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
        >
          There are no currentUser!
        </div>
      </ng-template>
    </div>
  </div>
</div>

<div>
  <div class="flex flex-auto">
    <mat-card>
      <mat-card-header>
        <span><b>현재 접속자 & 전체회원 쪽지보내기</b></span>
      </mat-card-header>
      <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>
