<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">
        <div
          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
        >
          <!-- 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>
          </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="current-user-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"
                    >
                      <div>번호</div>
                      <div>상부</div>
                      <div>
                        아이디
                        <hr style="margin: 7px 0px" />
                        닉네임
                      </div>
                      <div>
                        등급
                        <hr style="margin: 7px 0px" />
                        레벨
                      </div>
                      <div>현재위치</div>
                      <div class="hidden md:block">보유금</div>
                      <div class="hidden md:block">
                        게임중머니
                        <hr style="margin: 7px 0px" />
                        콤프
                      </div>
                      <div class="hidden md:block">사이트</div>
                      <div class="hidden md:block">카지노->캐쉬</div>
                      <div class="hidden lg:block">쪽지보내기</div>
                      <div class="hidden lg:block">배팅내역</div>
                      <div class="hidden lg:block">로그아웃</div>
                    </div>
                    <!-- Rows -->
                    <ng-container *ngIf="currentUsers$ | async as currentUsers">
                      <ng-container
                        *ngFor="
                          let currentUser of currentUsers;
                          trackBy: __trackByFn
                        "
                      >
                        <div
                          class="current-user-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                        >
                          <div>{{ currentUser.idx }}</div>
                          <div>{{ currentUser.highRank }}</div>
                          <div>
                            <div>
                              {{ currentUser.signinId }}
                            </div>
                            <hr style="margin: 7px 0px" />
                            {{ currentUser.nickname }}
                            <hr style="margin: 7px 0px" />
                            {{ currentUser.currentLocation }}
                          </div>
                          <div>
                            {{ currentUser.rank }}
                            <hr style="margin: 7px 0px" />
                            {{ currentUser.level }}
                          </div>
                          <div>{{ currentUser.currentLocation }}</div>
                          <div class="hidden md:block">
                            {{ currentUser.ownCash }}
                            <hr style="margin: 7px 0px" />
                            {{ currentUser.ownComp }}
                          </div>
                          <div class="hidden md:block">
                            {{ currentUser.gameMoney }}
                            <hr style="margin: 7px 0px" />
                            {{ currentUser.ownComp }}
                          </div>
                          <div class="hidden md:block">
                            {{ currentUser.siteAddress }}
                          </div>
                          <div class="hidden md:block">
                            <button
                              mat-flat-button
                              class="bet-mat-small-8"
                              [color]="'primary'"
                            >
                              게임머니확인
                            </button>
                            <hr style="margin: 7px 0px" />
                            <button
                              mat-flat-button
                              class="bet-mat-small-8"
                              [color]="'primary'"
                            >
                              게임머니회수
                            </button>
                          </div>
                          <div class="hidden lg:block">
                            <button
                              mat-flat-button
                              class="bet-mat-small-8"
                              [color]="'primary'"
                            >
                              <mat-icon svgIcon="email-outline"></mat-icon>
                            </button>
                          </div>
                          <div class="hidden lg:block">
                            <button
                              mat-flat-button
                              class="bet-mat-small-8"
                              [color]="'primary'"
                            >
                              배팅내역
                            </button>
                          </div>
                          <div class="hidden lg:block">
                            <button
                              mat-flat-button
                              class="bet-mat-small-8"
                              [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 data!
                </div>
              </ng-template>
            </div>
          </div>
          <div>
            <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">
                <form
                  [formGroup]="targetForm"
                  autocomplete="off"
                  class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
                >
                  <mat-card>
                    <mat-card-content>
                      <div>
                        <span class="font-semibold mb-2">구분</span>
                        <mat-radio-group
                          class="flex flex-col w-1/3 pr-2"
                          [color]="'primary'"
                          [value]="'b'"
                        >
                          <mat-radio-button class="mb-2" [value]="'a'">
                            전체
                          </mat-radio-button>
                          <mat-radio-button class="mb-2" [value]="'b'">
                            현재접속자
                          </mat-radio-button>
                          <mat-radio-button [value]="'c'">
                            본사
                          </mat-radio-button>
                          <mat-radio-button [value]="'d'">
                            대본
                          </mat-radio-button>
                          <mat-radio-button [value]="'e'">
                            부본
                          </mat-radio-button>
                          <mat-radio-button [value]="'f'">
                            총판
                          </mat-radio-button>
                          <mat-radio-button [value]="'g'">
                            매장
                          </mat-radio-button>
                          <mat-radio-button [value]="'h'">
                            회원
                          </mat-radio-button>
                        </mat-radio-group>
                      </div>
                      <div>
                        <span class="font-semibold mb-2">대본아이디</span>
                        <mat-radio-group
                          class="flex flex-col w-1/3 pr-2"
                          [color]="'primary'"
                          [value]="'i'"
                        >
                          <mat-radio-button class="mb-2" [value]="'i'">
                            대본하부회원
                          </mat-radio-button>
                        </mat-radio-group>
                        <mat-form-field
                          fxFlex
                          class="bet-mat-form-field-wrapper-mb-0 mr-2"
                        >
                          <mat-select placeholder="선택">
                            <mat-option value="">선택</mat-option>
                            <mat-option value="">kgon2</mat-option>
                            <mat-option value="">bbc100</mat-option>
                            <mat-option value="">test00</mat-option>
                            <mat-option value="">qwer11</mat-option>
                            <mat-option value="">zxcv123</mat-option>
                            <mat-option value="">on01</mat-option>
                          </mat-select>
                        </mat-form-field>
                      </div>
                      <div>
                        <span class="font-semibold mb-2">부본아이디</span>
                        <mat-radio-group
                          class="flex flex-col w-1/3 pr-2"
                          [color]="'primary'"
                          [value]="'j'"
                        >
                          <mat-radio-button class="mb-2" [value]="'j'">
                            부본하부회원
                          </mat-radio-button>
                        </mat-radio-group>
                        <mat-form-field
                          fxFlex
                          class="bet-mat-form-field-wrapper-mb-0 mr-2"
                        >
                          <mat-select placeholder="선택">
                            <mat-option value="">선택</mat-option>
                            <mat-option value="">kgon3</mat-option>
                            <mat-option value="">test33</mat-option>
                            <mat-option value="">aa2315</mat-option>
                            <mat-option value="">test770</mat-option>
                            <mat-option value="">zxcv12</mat-option>
                            <mat-option value="">on02</mat-option>
                          </mat-select>
                        </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="mt-8">
                        <mat-form-field
                          class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
                        >
                          <mat-label>글쓴이</mat-label>
                          <input matInput [formControlName]="'writer'" />
                        </mat-form-field>
                      </div>
                      <mat-form-field
                        class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
                      >
                        <textarea
                          matInput
                          [required]="true"
                          [rows]="5"
                          matTextareaAutosize
                          [formControlName]="'content'"
                        ></textarea>
                        <mat-label>내용</mat-label>
                      </mat-form-field>
                    </mat-card-content>
                    <div>
                      <button
                        mat-flat-button
                        class="bet-mat-small-8"
                        [color]="'primary'"
                      >
                        쪽지보내기
                      </button>
                    </div>
                    <div>
                      <button
                        mat-flat-button
                        class="bet-mat-small-8"
                        [color]="'warn'"
                      >
                        취소
                      </button>
                    </div>
                  </mat-card>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
