<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">
      <!-- Search -->
      <!-- <div>
        <span>총회원수:<span style="color: red">38</span>명</span>&nbsp;&nbsp;
        <span>진행중금액:<span style="color: red">0</span>원</span>&nbsp;&nbsp;
        <span>총 보유머니:<span style="color: red">21,437,873</span>원</span
        >&nbsp;&nbsp;
        <span>총 콤프:<span style="color: red">394,860</span>원</span
        >&nbsp;&nbsp;
        <span>총 합계:<span style="color: blue">21,832,733</span>원</span>
      </div> -->
      <button mat-icon-button (click)="__onClickSearch()">
        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
      </button>
    </div>
  </div>
  <!-- Search -->
  <div
    *ngIf="__isSearchOpened"
    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
  >
    <!-- Buttons -->
    <div>
      <button mat-flat-button [color]="'primary'">15일</button>
      <button mat-flat-button [color]="'primary'">30일</button>
      <button mat-flat-button [color]="'primary'">60일</button>
      <button mat-flat-button [color]="'primary'">90일</button>
      <button mat-flat-button [color]="'primary'">120일</button>
      <button mat-flat-button [color]="'primary'">가입후 미접속</button>
    </div>
    <!-- Actions -->
    <!-- <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0"> -->
    <!-- SelectBox -->
    <!-- <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
        <mat-select placeholder="리스트수">
          <mat-option value="40">40</mat-option>
          <mat-option value="60">60</mat-option>
          <mat-option value="80">80</mat-option>
          <mat-option value="100">100</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
        <mat-select placeholder="레벨">
          <mat-option value="level1">LV.1</mat-option>
          <mat-option value="level2">LV.2</mat-option>
          <mat-option value="level3">LV.3</mat-option>
          <mat-option value="level4">LV.4</mat-option>
        </mat-select>
      </mat-form-field>
      <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="">대기</mat-option>
          <mat-option value="">탈퇴</mat-option>
          <mat-option value="">휴면</mat-option>
          <mat-option value="">블랙</mat-option>
          <mat-option value="">정지</mat-option>
        </mat-select>
      </mat-form-field>
      <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="">슬롯제한</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
        <mat-select placeholder="입금">
          <mat-option value="">계좌입금</mat-option>
        </mat-select>
      </mat-form-field>
      <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="">닉네임</mat-option>
          <mat-option value="">이름</mat-option>
          <mat-option value="">사이트</mat-option>
          <mat-option value="">파트너수동지급</mat-option>
        </mat-select>
      </mat-form-field>
      <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="">아이디 정렬</mat-option>
          <mat-option value="">닉네임 정렬</mat-option>
          <mat-option value="">캐쉬 정렬</mat-option>
          <mat-option value="">콤프 정렬</mat-option>
          <mat-option value="">쿠폰 정렬</mat-option>
          <mat-option value="">입금 정렬</mat-option>
          <mat-option value="">출금 정렬</mat-option>
          <mat-option value="">차익 정렬</mat-option>
        </mat-select>
      </mat-form-field>
      <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="">오름차순</mat-option>
        </mat-select>
      </mat-form-field> -->
    <!-- Search -->
    <!-- <mat-form-field
        fxFlex
        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
      >
        <mat-icon
          class="icon-size-5"
          matPrefix
          [svgIcon]="'heroicons_solid:search'"
        ></mat-icon>
        <input
          matInput
          [formControl]="searchInputControl"
          [autocomplete]="'off'"
          [placeholder]="'Search user'"
        />
      </mat-form-field>
      Add user button
      <button
        mat-flat-button
        [color]="'primary'"
        fxFlex
        (click)="__createProduct()"
      >
        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
        <span class="ml-2 mr-1">Search</span>
      </button>
    </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="unconnecteds$ | async as unconnecteds">
        <ng-container *ngIf="unconnecteds.length > 0; else noUnconnected">
          <div class="grid">
            <!-- Header -->
            <div
              class="unconnected-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>
                <mat-checkbox></mat-checkbox>
              </div>
              <div>상부</div>
              <div class="hidden lg:block">회원수</div>
              <div>
                아이디
                <hr style="margin: 7px 0px" />
                닉네임
                <hr style="margin: 7px 0px" />
                연락처
              </div>
              <div>
                등급
                <hr style="margin: 7px 0px" />
                레벨
                <hr style="margin: 7px 0px" />
                상태
              </div>
              <div class="hidden sm:block">예금주</div>
              <div class="hidden md:block">정산종류</div>
              <div class="hidden md:block">보유금</div>
              <div class="hidden md:block">
                충전금
                <hr style="margin: 7px 0px" />
                환전금
                <hr style="margin: 7px 0px" />
                수익금
              </div>
              <div class="hidden lg:block">로그</div>
              <div class="hidden md:block">쪽지</div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="unconnecteds$ | async as unconnecteds">
              <ng-container
                *ngFor="let unconnected of unconnecteds; trackBy: __trackByFn"
              >
                <div
                  class="unconnected-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <div>
                    <mat-checkbox></mat-checkbox>
                  </div>
                  <div>
                    최상부{{ unconnected.highstRank }}
                    <hr style="margin: 7px 0px" />
                    상부{{ unconnected.highRank }}
                  </div>
                  <div class="hidden lg:block">
                    {{ unconnected.memberCount }}
                  </div>
                  <div>
                    {{ unconnected.signinId }}
                    <hr style="margin: 7px 0px" />
                    {{ unconnected.nickname }}
                    <hr style="margin: 7px 0px" />
                    {{ unconnected.phoneNumber }}
                  </div>
                  <div>
                    {{ unconnected.rank }}
                    <hr style="margin: 7px 0px" />
                    LV{{ unconnected.level }}
                    <hr style="margin: 7px 0px" />
                    {{ unconnected.state }}
                  </div>
                  <div class="hidden sm:block">
                    {{ unconnected.accountHolder }}
                  </div>
                  <div class="hidden md:block">
                    {{ unconnected.calculateType }}
                  </div>
                  <div class="hidden md:block">
                    캐쉬{{ unconnected.ownCash }}
                    <hr style="margin: 7px 0px" />
                    콤프{{ unconnected.ownComp }}P
                  </div>
                  <div class="hidden md:block">
                    충전금{{ unconnected.ownCharge }}
                    <hr style="margin: 7px 0px" />
                    환전금{{ unconnected.ownExchange }}
                    <hr style="margin: 7px 0px" />
                    수익금{{ unconnected.balance }}
                  </div>
                  <div class="hidden lg:block">
                    가입{{ unconnected.registrationDate }}
                    <hr style="margin: 7px 0px" />
                    최종{{ unconnected.finalSigninDate }}
                    <hr style="margin: 7px 0px" />
                  </div>
                  <div class="hidden md:block">
                    <button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'primary'"
                    >
                      <mat-icon svgIcon="email-outline"></mat-icon>
                    </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 #noUnconnected>
        <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>
      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
        탈퇴
      </button>
    </div>
    <div>
      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
        휴면
      </button>
    </div>
  </div>
</div>
