<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 style="color: blue">2022-01-01 00:00</span><span>~</span>
        <span style="color: blue">2022-06-21 23:59</span>
        <span
          >까지의 총 유효배팅:<span style="color: red">12,440,000</span>원</span
        >&nbsp;&nbsp;
        <span>배팅금액:<span style="color: red">12,751,000</span>원</span
        >&nbsp;&nbsp;
        <span>당첨:<span style="color: red">12,199,950</span>원</span
        >&nbsp;&nbsp;
        <span>취소:<span style="color: red">10,000</span>원</span>&nbsp;&nbsp;
        <span>배팅-당첨-취소:<span style="color: red">542,050</span>원</span
        >&nbsp;&nbsp;
        <span>본사롤링:<span style="color: red">60,202</span>원</span
        >&nbsp;&nbsp;
        <span>대본롤링:<span style="color: red">36,390</span>원</span
        >&nbsp;&nbsp;
        <span>부본롤링:<span style="color: red">24,828</span>원</span
        >&nbsp;&nbsp;
        <span>총판롤링:<span style="color: red">24,752</span>원</span
        >&nbsp;&nbsp;
        <span>매장롤링:<span style="color: red">13,451</span>원</span
        >&nbsp;&nbsp;
        <span>회원롤링:<span style="color: red">81,037</span>원</span
        >&nbsp;&nbsp;
        <span>롤링합계:<span style="color: red">240,660</span>원</span>
      </div>
      <button mat-icon-button (click)="__onClickSearch()">
        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
      </button>
    </div>
  </div>

  <!-- Memo -->
  <div
    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"
  >
    <!-- <mat-form-field
      class="bet-mat-form-field-wrapper-mb-0 mr-2"
      style="width: 100%"
    >
      <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
    </mat-form-field>
    <button mat-flat-button [color]="'primary'">메모저장</button> -->
  </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"
  >
    <!-- 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="">카지노</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="">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 fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
        <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 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-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
        fxFlex
        mat-flat-button
        style="position: fixed; margin-top: 4px"
        [color]="'primary'"
        (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="casinos$ | async as casinos">
        <ng-container *ngIf="casinos.length > 0; else noCasino">
          <div class="grid">
            <!-- Header -->
            <div
              class="casino-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>게임</div>
              <div>형식</div>
              <div class="hidden sm:block">금액</div>
              <div class="hidden md:block">배팅</div>
              <div class="hidden md:block">데이터</div>
              <div class="hidden md:block">콤프</div>
              <div class="hidden lg:block">롤링</div>
              <div class="hidden lg:block">
                배팅시간
                <hr style="margin: 7px 0px" />
                등록시간
              </div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="casinos$ | async as casinos">
              <ng-container
                *ngFor="let casino of casinos; trackBy: __trackByFn"
              >
                <div
                  class="casino-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <div>{{ casino.highRank }}</div>
                  <div>
                    게임ID{{ casino.gameId }}
                    <hr style="margin: 7px 0px" />
                    사이트ID{{ casino.signinId }}
                    <hr style="margin: 7px 0px" />
                    닉네임{{ casino.nickname }}
                  </div>
                  <div>
                    {{ casino.gameName }}
                    <hr style="margin: 7px 0px" />
                    {{ casino.gameInfo1 }}
                    <hr style="margin: 7px 0px" />
                    {{ casino.gameInfo2 }}
                    <hr style="margin: 7px 0px" />
                    {{ casino.gameInfo3 }}
                  </div>
                  <div>
                    {{ casino.gameType }}
                  </div>
                  <div class="hidden sm:block">
                    당첨전{{ casino.beforeWinning }}
                    <hr style="margin: 7px 0px" />
                    당첨{{ casino.winning }}
                    <hr style="margin: 7px 0px" />
                    당첨후{{ casino.afterWinning }}
                  </div>
                  <div class="hidden md:block">
                    {{ casino.bettingInfo1 }}
                    <hr style="margin: 7px 0px" />
                    {{ casino.bettingInfo2 }}
                    <hr style="margin: 7px 0px" />
                    {{ casino.bettingInfo3 }}
                  </div>
                  <div class="hidden md:block">
                    <button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'warn'"
                    >
                      데이터확인
                    </button>
                  </div>
                  <div class="hidden md:block">
                    {{ casino.comp }}
                  </div>
                  <div class="hidden lg:block">
                    본사{{ casino.mainofficeName }}({{
                      casino.mainofficePercent
                    }}%&nbsp;:&nbsp;{{ casino.mainofficePoint }}P)
                    <hr style="margin: 7px 0px" />
                    대본{{ casino.branchName }}({{
                      casino.branchPercent
                    }}%&nbsp;:&nbsp;{{ casino.branchPoint }}P)
                    <hr style="margin: 7px 0px" />
                    부본{{ casino.divisionName }}({{
                      casino.divisionPercent
                    }}%&nbsp;:&nbsp;{{ casino.divisionPoint }}P)
                    <hr style="margin: 7px 0px" />
                    총판{{ casino.officeName }}({{
                      casino.officePercent
                    }}%&nbsp;:&nbsp;{{ casino.officePoint }}P)
                    <hr style="margin: 7px 0px" />
                    매장{{ casino.storeName }}({{
                      casino.storePercent
                    }}%&nbsp;:&nbsp;{{ casino.storePoint }}P)
                    <hr style="margin: 7px 0px" />
                    회원{{ casino.memberName }}({{
                      casino.memberPercent
                    }}%&nbsp;:&nbsp;{{ casino.memberPoint }}P)
                  </div>
                  <div class="hidden lg:block">
                    {{ casino.bettingTime }}
                    <hr style="margin: 7px 0px" />
                    {{ casino.registrationDate }}
                  </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 data!
        </div>
      </ng-template>
    </div>
  </div>
</div>
