<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>
    <!-- 슬롯 게임 요약 정보 -->
    <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"
    ></div>

    <!-- Actions -->
    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
      <!-- Search -->
      <button mat-icon-button (click)="__onClickSearch()">
        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
      </button>
    </div>
  </div>

  <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"
    style="font-size: small"
  >
    <div class="flex items-center justify-center px-6 py-4 space-x-3">
      <div class="grid grid-cols-2 gap-x-4 gap-y-1">
        <div class="font-medium tracking-tight text-secondary">기간</div>
        <div class="font-medium" style="color: blue">
          2022-06-01 00:00 ~ 2022-06-21 23:59 까지
        </div>
        <div class="font-medium tracking-tight text-secondary">
          총 유효배팅 | 배팅금액
        </div>
        <div class="font-medium" style="color: red">816,335원 | 816,335원</div>
        <div class="font-medium tracking-tight text-secondary">
          당첨 | 취소 | 배팅-당첨-취소
        </div>
        <div class="font-medium" style="color: red">717,335원 | 0원 98,847</div>
        <div class="font-medium tracking-tight text-secondary">
          본사롤링 | 대본롤링 | 부본롤링 | 총판 롤링 | 매장롤링 | 회원롤링
        </div>
        <div class="font-medium" style="color: red">
          6,335원 | 1,663원 | 1,633원 | 2,304원 | 5,544원 | 6,119원
        </div>
        <div class="font-medium tracking-tight text-secondary">롤링합계</div>
        <div class="font-medium">3,9041원</div>
      </div>
    </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"
  >
    <!-- Actions -->
    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
      <!-- SelectBox -->
      <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="">배팅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
          class="bet-mat-form-field-wrapper-mb-0 mr-2"
          [floatLabel]="'always'"
        >
          <input
            matInput
            [matDatepicker]="picker1"
            [placeholder]="'Choose a date'"
          />
          <mat-datepicker-toggle
            matSuffix
            [for]="picker1"
          ></mat-datepicker-toggle>
          <mat-datepicker #picker1></mat-datepicker>
        </mat-form-field>
        <mat-form-field
          class="bet-mat-form-field-wrapper-mb-0 mr-2"
          [floatLabel]="'always'"
        >
          <input
            matInput
            [matDatepicker]="picker2"
            [placeholder]="'Choose a date'"
          />
          <mat-datepicker-toggle
            matSuffix
            [for]="picker2"
          ></mat-datepicker-toggle>
          <mat-datepicker #picker2></mat-datepicker>
        </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>
  </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="evolutions$ | async as evolutions">
        <ng-container *ngIf="evolutions.length > 0; else noUser">
          <div class="grid">
            <!-- Header -->
            <div
              class="evolution-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" style="font-size: x-small">상위</div>
              <div class="hidden lg:block" style="font-size: x-small">
                게임코드ID
                <hr style="margin: 7px 0px" />
                사이트ID
                <hr style="margin: 7px 0px" />
                닉네임
              </div>
              <div class="hidden lg:block" style="font-size: x-small">
                게임사이름
                <hr style="margin: 7px 0px" />
                게임 이름
                <hr style="margin: 7px 0px" />
                배팅고유코드
              </div>
              <div class="hidden lg:block" style="font-size: x-small">
                배팅
                <hr style="margin: 7px 0px" />
                당첨
                <hr style="margin: 7px 0px" />
                손익
              </div>
              <div class="hidden lg:block" style="font-size: x-small">
                배팅 전
                <hr style="margin: 7px 0px" />
                배팅 후
                <hr style="margin: 7px 0px" />
                최종금액
              </div>
              <div class="hidden lg:block" style="font-size: x-small">베팅</div>
              <div class="hidden lg:block" style="font-size: x-small">
                데이터
                <hr style="margin: 7px 0px" />
                콤프
              </div>
              <div class="hidden lg:block" style="font-size: x-small">롤링</div>
              <div class="hidden lg:block" style="font-size: x-small">
                배팅시간
                <hr style="margin: 7px 0px" />
                등록시간
              </div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="evolutions$ | async as evolutions">
              <ng-container
                *ngFor="let info of evolutions; trackBy: __trackByFn"
              >
                <div
                  class="evolution-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                  style="font-size: x-small"
                >
                  <div class="hidden lg:block">
                    {{ info.highRank }}
                  </div>
                  <div class="hidden lg:block">
                    {{ info.gameId }}
                    <hr style="margin: 7px 0px" />
                    {{ info.signinId }}
                    <hr style="margin: 7px 0px" />
                    {{ info.nickname }}
                  </div>
                  <div class="hidden lg:block">
                    {{ info.vendorName }}
                    <hr style="margin: 7px 0px" />
                    {{ info.gameName }}
                    <hr style="margin: 7px 0px" />
                    {{ info.bettingId }}
                  </div>
                  <div class="hidden lg:block">
                    {{ info.betMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.betWinMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.betProfitLossMoney }}
                  </div>
                  <div class="hidden lg:block">
                    {{ info.betBeforeMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.betAfterMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.totalMoney }}
                  </div>
                  <div>
                    <div
                      *ngFor="let betHistory of info.betHistorys"
                      style="display: flex; flex-wrap: wrap; padding-left: 0"
                    >
                      <span style="flex: 0 0 33.33%">{{
                        betHistory.pickBetType
                      }}</span>
                      <span style="flex: 0 0 33.33%">{{
                        betHistory.betMoney
                      }}</span>
                      <span style="flex: 0 0 33.33%">{{
                        betHistory.betWinMoney
                      }}</span>
                    </div>
                  </div>
                  <div class="hidden lg:block" style="text-align: center">
                    <button
                      mat-flat-button
                      class="bet-mat-small-6"
                      [color]="'warn'"
                    >
                      <span class="ml-2 mr-1">데이터확인</span>
                    </button>
                    <hr style="margin: 7px 0px" />
                    {{ info.comp }}
                  </div>
                  <div class="hidden lg:block">
                    <span *ngIf="!!info.mainInfo">
                      본사: {{ info.mainInfo.name }}({{
                        info.mainInfo.commissionRate
                      }},{{ info.mainInfo.point }})</span
                    >
                    <hr *ngIf="!!info.mainInfo" style="margin: 7px 0px" />
                    <span *ngIf="!!info.branchInfo"
                      >대본: {{ info.branchInfo.name }}({{
                        info.branchInfo.commissionRate
                      }},{{ info.branchInfo.point }})</span
                    >
                    <hr *ngIf="!!info.branchInfo" style="margin: 7px 0px" />
                    <span *ngIf="!!info.divisionInfo"
                      >부본: {{ info.divisionInfo.name }}({{
                        info.divisionInfo.commissionRate
                      }},{{ info.divisionInfo.point }})</span
                    >
                    <hr *ngIf="!!info.divisionInfo" style="margin: 7px 0px" />
                    <span *ngIf="!!info.officeInfo"
                      >총판: {{ info.officeInfo.name }}({{
                        info.officeInfo.commissionRate
                      }},{{ info.officeInfo.point }})</span
                    >
                    <hr *ngIf="!!info.officeInfo" style="margin: 7px 0px" />
                    <span *ngIf="!!info.storeInfo"
                      >매장: {{ info.storeInfo.name }}({{
                        info.storeInfo.commissionRate
                      }},{{ info.storeInfo.point }})</span
                    >
                  </div>
                  <div class="hidden lg:block">
                    {{ info.bettingregistrationDate }}
                    <hr style="margin: 7px 0px" />
                    {{ info.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 #noUser>
        <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>
