<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">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>
    </div>
  </div>

  <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 overflow-x-auto overflow-y-hidden"
    >
      <ng-container *ngIf="listPartner$ | async as listPartner">
        <ng-container *ngIf="listPartner.length > 0; else noPartner">
          <div class="grid">
            <!-- Header -->
            <div
              matSort
              matSortDisableClear
              class="partner-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 class="hidden lg:block">
                관리
                <hr style="margin: 7px 0px" />
                요율
                <hr style="margin: 7px 0px" />
                매장수
              </div>
              <!-- <div>요율</div>
              <div>매장수</div> -->
              <div class="hidden lg:block">
                <div [mat-sort-header]="'signinId'">아이디</div>

                <hr style="margin: 7px 0px" />
                닉네임
                <hr style="margin: 7px 0px" />
                연락처
              </div>
              <div class="hidden lg:block">
                등급
                <hr style="margin: 7px 0px" />
                레벨
                <hr style="margin: 7px 0px" />
                상태
              </div>
              <div class="hidden lg:block">예금주</div>
              <div class="hidden lg:block">정산종류</div>
              <div class="hidden lg:block">보유금</div>
              <div class="hidden lg:block">충전금</div>
              <div class="hidden lg: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="listPartner$ | async as listPartner">
              <ng-container
                *ngFor="let partner of listPartner; trackBy: __trackByFn"
              >
                <div
                  class="partner-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <div class="hidden lg:block">
                    <div>
                      <div
                        mat-button
                        [matMenuTriggerFor]="menu"
                        style="cursor: pointer"
                      >
                        관리
                      </div>
                      <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="__onClickCash($event)">
                          보유금지급/회수
                        </button>
                        <button
                          mat-menu-item
                          (click)="__onClickCommission($event)"
                        >
                          수수료설정
                        </button>
                        <button mat-menu-item (click)="__onClickComp($event)">
                          콤프지급/회수
                        </button>
                        <button mat-menu-item>쿠폰머니지급/회수</button>
                        <button mat-menu-item>쪽지보내기</button>
                        <button mat-menu-item>배팅리스트</button>
                      </mat-menu>
                    </div>
                    <hr style="margin: 7px 0px" />
                    <div [matTooltip]="__getRateTooltop()">요율</div>
                    <hr style="margin: 7px 0px" />
                    <div>
                      <div>2 3 2 1 5</div>
                    </div>
                  </div>

                  <!-- 아이디/닉네임/연락처 -->
                  <div
                    class="hidden lg:block"
                    (click)="viewUserDetail(partner.getId())"
                    style="cursor: pointer"
                  >
                    {{ partner.getUsername() }}
                    <hr style="margin: 7px 0px" />
                    {{ partner.getNickname() }}
                    <hr style="margin: 7px 0px" />
                    {{ partner.getMobilePhoneNumber() }}
                  </div>
                  <!-- 등급/레벨/상태 -->
                  <div class="hidden lg:block">
                    {{ partner.getMemberClass()?.getName() }}
                    <hr style="margin: 7px 0px" />
                    LV{{ partner.getMemberLevel()?.getName() }}
                    <hr style="margin: 7px 0px" />
                    {{ partner.getState() }}
                  </div>
                  <!-- 예금주 -->
                  <div class="hidden lg:block">예금주</div>
                  <!-- 정산종류 -->
                  <div class="hidden lg:block">정산종류</div>
                  <!-- 보유금 -->
                  <div class="hidden lg:block">
                    캐쉬: 2,900
                    <hr style="margin: 7px 0px" />
                    콤프: 3,000P
                    <hr style="margin: 7px 0px" />
                    쿠폰: 2,000
                  </div>
                  <!-- 충전금 -->
                  <div class="hidden lg:block">
                    본인: 2,900
                    <hr style="margin: 7px 0px" />
                    하부 1,900
                  </div>
                  <!-- 환전금 -->
                  <div class="hidden lg:block">
                    본인: 2,900
                    <hr style="margin: 7px 0px" />
                    하부: 2,800
                  </div>
                  <!-- 수익금 -->
                  <div class="hidden lg:block">
                    본인: 2,900
                    <hr style="margin: 7px 0px" />
                    하부: 2,800
                  </div>
                  <!-- 가입날짜 -->
                  <div class="hidden lg:block">
                    <!-- {{ partner.getCreatedAt() }} -->
                    {{ partner.getCreatedAt() | date: "yyyy/MM/dd" }}
                  </div>
                  <!-- 비고 -->
                  <div class="hidden lg:block">
                    <button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'primary'"
                      (click)="__onClickRegist($event, partner)"
                    >
                      대본등록
                    </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 #noPartner>
        <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>
