<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">Casino</div>
    <!-- Actions -->
    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
      <!-- Memo -->
      <!-- <mat-form-field>
        <ng-container *ngIf="casinos$ | async as casinos">
          <ng-container *ngFor="let casino of casinos; trackBy: __trackByFn">
            <div
              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
            >
              <fieldset>
                {{ casino.startDate }}~{{ casino.finishDate }}까지의 총
                유효배팅:{{ casino.availableBetting }}원, 배팅금액:{{
                  casino.bettingMoney
                }}원, 당첨:{{ casino.winning }}원, 취소:{{ casino.cancelMoney }}원,
                배팅-당첨-취소:{{ casino.betWinCancel }}원, 본사롤링:{{
                  casino.mainofficeRolling
                }}원, 대본롤링:{{ casino.branchRolling }}원, 부본롤링:{{
                  casino.divisionRolling
                }}원, 총판롤링:{{ casino.officeRolling }}원, 매장롤링:{{
                  casino.storeRolling
                }}원, 회원롤링:{{ casino.memberRolling }}원, 롤링합계:{{
                  casino.totalrolling
                }}원
              </fieldset>
            </div>
          </ng-container>
        </ng-container>
      </mat-form-field> -->

      <!-- SelectBox -->
      <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-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="">CQ9 카지노</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="">배팅100만미만</mat-option>
          <mat-option value="">배팅100-300만</mat-option>
          <mat-option value="">배팅300-500만</mat-option>
          <mat-option value="">배팅500만이상</mat-option>
          <mat-option value="">당첨1000만초과</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>
      <!-- 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>
      <!-- Search 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>
    </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="casinos$ | async as casinos">
        <ng-container *ngIf="casinos.length > 0; else noCasino">
          <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">상위</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 md:block" [mat-sort-header]="'sku'">SKU</div>
              <div [mat-sort-header]="'name'">Name</div>
              <div class="hidden sm:block" [mat-sort-header]="'price'">
                Price
              </div>
              <div class="hidden lg:block" [mat-sort-header]="'stock'">
                Stock
              </div>
              <div class="hidden lg:block" [mat-sort-header]="'active'">
                Active
              </div>
              <div class="hidden sm:block">Details</div> -->
            </div>
            <!-- Rows -->
            <ng-container *ngIf="casinos$ | async as casinos">
              <ng-container
                *ngFor="let casino of casinos; trackBy: __trackByFn"
              >
                <div
                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <!-- highRank -->
                  <div class="hidden sm:block truncate">
                    {{ casino.highRank }}
                  </div>
                  <!-- userInfo -->
                  <div class="hidden sm:block truncate">
                    {{ casino.gameId }}
                    {{ casino.id }}
                    {{ casino.nickname }}
                  </div>
                  <!-- game -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      {{ casino.gameName }}
                    </button>
                    {{ casino.gameInfo1 }}
                    {{ casino.gameInfo2 }}
                    {{ casino.gameInfo3 }}
                  </div>

                  <!-- way -->
                  <div class="hidden sm:block truncate">
                    {{ casino.way }}
                  </div>

                  <!-- money -->
                  <div class="hidden sm:block truncate">
                    당첨전{{ casino.beforeWinning }} 당첨{{
                      casino.winning
                    }}
                    당첨후{{ casino.afterWinning }}
                  </div>

                  <!-- betting -->
                  <div class="hidden sm:block truncate">
                    {{ casino.bettingInfo1 }}
                    {{ casino.bettingInfo2 }}
                    {{ casino.bettingInfo3 }}
                  </div>

                  <!-- data -->
                  <div class="hidden sm:block truncate">
                    <button mat-flat-button [color]="'primary'">
                      데이터확인
                    </button>
                  </div>

                  <!-- compY -->
                  <div class="hidden sm:block truncate">
                    {{ casino.compY }}
                  </div>

                  <!-- rolling -->
                  <div class="hidden sm:block truncate">
                    본사:{{ casino.mainofficeName }}({{
                      casino.mainofficePercent
                    }}%,{{ casino.mainofficePoint }}P) 대본:{{
                      casino.branchName
                    }}({{ casino.branchPercent }}%,{{ casino.branchPoint }}P)
                    부본:{{ casino.divisionName }}({{
                      casino.divisionPercent
                    }}%,{{ casino.divisionPoint }}P) 총판:{{
                      casino.officeName
                    }}({{ casino.officePercent }}%,{{ casino.officePoint }}P)
                    매장:{{ casino.storeName }}({{ casino.storePercent }}%,{{
                      casino.storePoint
                    }}P) 회원:{{ casino.memberName }}({{
                      casino.memberPercent
                    }}%,{{ casino.memberPoint }}P)
                  </div>

                  <!-- bettingTime -->
                  <div class="hidden sm:block truncate">
                    {{ casino.bettingTime }}
                    {{ casino.registrationDate }}
                  </div>

                  <!-- Image -->
                  <!-- <div class="flex items-center">
                    <div
                      class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border"
                    >
                      <img
                        class="w-8"
                        *ngIf="user.thumbnail"
                        [alt]="'Product thumbnail image'"
                        [src]="user.thumbnail"
                      />
                      <div
                        class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase"
                        *ngIf="!user.thumbnail"
                      >
                        NO THUMB
                      </div>
                    </div>
                  </div> -->

                  <!-- SKU -->
                  <!-- <div class="hidden md:block truncate">
                    {{ user.sku }}
                  </div> -->

                  <!-- Name -->
                  <!-- <div class="truncate">
                    {{ user.name }}
                  </div> -->

                  <!-- Price -->
                  <!-- <div class="hidden sm:block">
                    {{ user.price | currency: "USD":"symbol":"1.2-2" }}
                  </div> -->

                  <!-- Stock -->
                  <!-- <div class="hidden lg:flex items-center">
                    <div class="min-w-4">{{ user.stock }}</div> -->
                  <!-- Low stock -->
                  <!-- <div
                      class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
                      *ngIf="user.stock < 20"
                    >
                      <div class="flex w-full h-1/3 bg-red-600"></div>
                    </div> -->
                  <!-- Medium stock -->
                  <!-- <div
                      class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
                      *ngIf="user.stock >= 20 && user.stock < 30"
                    >
                      <div class="flex w-full h-2/4 bg-orange-400"></div>
                    </div> -->
                  <!-- High stock -->
                  <!-- <div
                      class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
                      *ngIf="user.stock >= 30"
                    >
                      <div class="flex w-full h-full bg-green-400"></div>
                    </div>
                  </div> -->

                  <!-- Active -->
                  <!-- <div class="hidden lg:block">
                    <ng-container *ngIf="user.active">
                      <mat-icon
                        class="text-green-400 icon-size-5"
                        [svgIcon]="'heroicons_solid:check'"
                      ></mat-icon>
                    </ng-container>
                    <ng-container *ngIf="!user.active">
                      <mat-icon
                        class="text-gray-400 icon-size-5"
                        [svgIcon]="'heroicons_solid:x'"
                      ></mat-icon>
                    </ng-container>
                  </div> -->

                  <!-- Details button -->
                  <!-- <div>
                    <button
                      class="min-w-10 min-h-7 h-7 px-2 leading-6"
                      mat-stroked-button
                      (click)="__toggleDetails(user.id)"
                    >
                      <mat-icon
                        class="icon-size-5"
                        [svgIcon]="
                          selectedUser?.id === user.id
                            ? 'heroicons_solid:chevron-up'
                            : 'heroicons_solid:chevron-down'
                        "
                      ></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 #noCasino>
        <div
          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
        >
          There are no casino!
        </div>
      </ng-template>
    </div>
  </div>
</div>
