<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">
      <!-- Memo -->
      <!-- <mat-form-field>
        <ng-container *ngIf="partnerDivisions$ | async as partnerDivisions">
          <ng-container
            *ngFor="let partnerDivision of partnerDivisions; trackBy: __trackByFn"
          >
            <div
              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
            >
              <fieldset>
                총 파트너수:{{ partnerDivision.totalPartnerCount }} 총 보유머니:{{
                  partnerDivision.totalHoldingMoney
                }}
                총 콤프:{{ partnerDivision.totalComp }} 총 합계:{{
                  partnerDivision.total
                }}
              </fieldset>
            </div>
          </ng-container>
        </ng-container>
      </mat-form-field> -->

      <!-- SelectBox -->
      <mat-form-field>
        <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>
        <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>
        <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>
        <mat-select placeholder="제한">
          <mat-option value="">카지노제한</mat-option>
          <mat-option value="">슬롯제한</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-select placeholder="입금">
          <mat-option value="">계좌입금</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-select placeholder="내용">
          <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>
        <mat-select placeholder="입금">
          <mat-option value="">계좌입금</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <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>
        <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>
        <mat-select placeholder="내림차순">
          <mat-option value="">내림차순</mat-option>
          <mat-option value="">오름차순</mat-option>
        </mat-select>
      </mat-form-field> -->
      <!-- Search -->
      <mat-form-field
        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
      >
        <mat-icon
          class="icon-size-5"
          matPrefix
          [svgIcon]="'heroicons_solid:search'"
        ></mat-icon>
        <input
          matInput
          [formControl]="searchInputControl"
          [autocomplete]="'off'"
          [placeholder]="'Search'"
        />
      </mat-form-field>
      <!-- Add user button -->
      <button
        class="ml-4"
        mat-flat-button
        [color]="'primary'"
        (click)="__createProduct()"
      >
        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
        <span class="ml-2 mr-1">검색하기</span>
      </button>
      <button>엑셀저장</button>
      <button>카지노머니확인</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="partnerDivisions$ | async as partnerDivisions">
        <ng-container
          *ngIf="partnerDivisions.length > 0; else noPartnerDivision"
        >
          <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 class="hidden sm:block"><mat-checkbox></mat-checkbox></div>
              <div class="hidden sm:block">요율</div>
              <div class="hidden sm:block">상부트리</div>
              <div class="hidden sm:block">관리</div>
              <div class="hidden sm:block">매장수</div>
              <div class="hidden sm:block">회원수</div>
              <div class="hidden sm:block">아이디</div>
              <div class="hidden sm:block">닉네임</div>
              <div class="hidden sm:block">예금주</div>
              <div class="hidden sm:block">연락처</div>
              <div class="hidden sm:block">정산</div>
              <div class="hidden sm:block">보유금</div>
              <div class="hidden sm:block">게임중머니</div>
              <div class="hidden sm:block">카지노->캐쉬</div>
              <div class="hidden sm:block">금일콤프</div>
              <div class="hidden sm:block">총입출</div>
              <div class="hidden sm:block">로그</div>
              <div class="hidden sm:block">상태</div>
              <div class="hidden sm:block">회원수</div>
              <div class="hidden sm:block">비고</div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="partnerDivisions$ | async as partnerDivisions">
              <ng-container
                *ngFor="
                  let partnerDivision of partnerDivisions;
                  trackBy: __trackByFn
                "
              >
                <div
                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <div class="hidden sm:block truncate">
                    <mat-checkbox></mat-checkbox>
                  </div>
                  <!-- rate -->
                  <div class="hidden sm:block truncate">
                    <button
                      mat-button
                      color="primary"
                      matTooltip="요율확인
                                카지노-바카라: 0%
                                카지노-룰렛: 0%
                                카지노-드레곤타이거: 0%
                                카지노-그외: 0%
                                슬롯: 0%
                                카지노루징: 0%
                                슬롯루징: 0%"
                    >
                      요율
                    </button>
                    <div class="hidden sm:block truncate">
                      <!-- 관리 -->
                      <button mat-flat-button [color]="'primary'">
                        <mat-form-field>
                          <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-select>
                        </mat-form-field>
                      </button>
                    </div>
                  </div>
                  <!-- 매장수 -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      {{ partnerDivision.divisionCount }}
                    </button>
                    <button mat-flat-button [color]="'primary'">
                      {{ partnerDivision.divisionCount }}
                    </button>
                    <button mat-flat-button [color]="'primary'">
                      {{ partnerDivision.officeCount }}
                    </button>
                    <button mat-flat-button [color]="'primary'">
                      {{ partnerDivision.storeCount }}
                    </button>
                  </div>
                  <!-- 회원수 -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      {{ partnerDivision.memberCount }}
                    </button>
                  </div>
                  <!-- id -->
                  <ng-container *ngIf="users$ | async as users">
                    <ng-container
                      *ngFor="let user of users; trackBy: __trackByFn"
                    >
                      <div
                        class="hidden sm:block truncate"
                        (click)="viewUserDetail(user.id!)"
                      >
                        {{ partnerDivision.id }}
                      </div>
                    </ng-container>
                  </ng-container>
                  <!-- nickname -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.nickname }}
                  </div>
                  <!-- accountHolder -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.accountHolder }}
                  </div>
                  <!-- 연락처 -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.phoneNumber }}
                  </div>
                  <!-- 정산 -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.calculateType }}
                  </div>
                  <!-- 보유금 -->
                  <div class="hidden sm:block truncate">
                    캐쉬{{ partnerDivision.ownCash }} 콤프{{
                      partnerDivision.ownComp
                    }}
                    쿠폰{{ partnerDivision.ownCoupon }}
                  </div>
                  <!-- gameMoney -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.gameMoney }}
                  </div>
                  <!-- casinoCash -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      게임머니확인
                    </button>
                    <button mat-flat-button [color]="'primary'">
                      게임머니회수
                    </button>
                  </div>
                  <!-- todayComp -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.todayComp }}P
                  </div>
                  <!-- 총입출 -->
                  <div class="hidden sm:block truncate">
                    입금{{ partnerDivision.totalDeposit }} 출금{{
                      partnerDivision.totalWithdraw
                    }}
                    차익{{ partnerDivision.balance }}
                  </div>
                  <!-- log -->
                  <div class="hidden sm:block truncate">
                    가입{{ partnerDivision.registDate }} 최종{{
                      partnerDivision.finalSigninDate
                    }}
                    IP{{ partnerDivision.ip }}
                  </div>
                  <!-- state -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.state }}
                  </div>
                  <!-- 회원수 -->
                  <div class="hidden sm:block truncate">
                    {{ partnerDivision.memberCount }}
                  </div>
                  <!-- 비고 -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      {{ partnerDivision.note }}
                    </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 #noPartnerDivision>
        <div
          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
        >
          There are no partnerdivisions!
        </div>
      </ng-template>
    </div>
  </div>
</div>
