<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 -->
      <button mat-icon-button (click)="__onClickSearch()">
        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
      </button>
    </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 -->
      <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 -->
      <!-- Add user button -->
      <button
        mat-flat-button
        [color]="'primary'"
        fxFlex
        (click)="__createProduct()"
      >
        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
        <span class="ml-2 mr-1">Search</span>
      </button>
    </div>
    <!-- Card inception -->
    <div class="col-span-2 sm:col-span-1">
      <mat-form-field
        class="fuse-mat-no-subscript w-full"
        [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>
    </div>
    <!-- Card expiration -->
    <div class="col-span-2 sm:col-span-1">
      <mat-form-field
        class="fuse-mat-no-subscript w-full"
        [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>
    </div>

    <div>
      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
        어제
      </button>
    </div>
    <div>
      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
        오늘
      </button>
    </div>
    <div>
      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
        7일
      </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="dailyPartners$ | async as dailyPartners">
        <ng-container *ngIf="dailyPartners.length > 0; else noDailyPartner">
          <div class="grid">
            <!-- Header -->
            <div
              class="daily-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>처리날짜</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">카-윈로스(A)</div>
              <div class="hidden lg:block">카-수수료(B)</div>
              <div class="hidden lg:block">카-뱃윈정산(A-B)</div>
              <div class="hidden md:block">슬-배팅</div>
              <div class="hidden lg:block">슬-당첨</div>
              <div class="hidden lg:block">슬-윈로스(D)</div>
              <div class="hidden lg:block">슬-수수료(E)</div>
              <div class="hidden lg:block">슬-뱃윈정산(D-E)</div>
              <div class="hidden md:block">파-배팅</div>
              <div class="hidden lg:block">파-당첨</div>
              <div class="hidden lg:block">파-윈로스(H)</div>
              <div class="hidden lg:block">파-수수료(I)</div>
              <div class="hidden lg:block">파-뱃윈정산(H-I)</div>
              <div class="hidden lg:block">총뱃윈정산</div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="dailyPartners$ | async as dailyPartners">
              <ng-container
                *ngFor="let dailyPartner of dailyPartners; trackBy: __trackByFn"
              >
                <div
                  class="daily-partner-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <div>{{ dailyPartner.processDate }}</div>
                  <div>
                    {{ dailyPartner.lastDayHoldingMoney }}
                  </div>
                  <div>
                    충전{{ dailyPartner.memberCharge }}
                    <hr style="margin: 7px 0px" />
                    환전{{ dailyPartner.memberExchange }}
                    <hr style="margin: 7px 0px" />
                    손익{{ dailyPartner.memberProfitLoss }}
                  </div>
                  <div>
                    충전{{ dailyPartner.partnerCharge }}
                    <hr style="margin: 7px 0px" />
                    환전{{ dailyPartner.partnerExchange }}
                    <hr style="margin: 7px 0px" />
                    손익{{ dailyPartner.partnerProfitLoss }}
                  </div>
                  <div class="hidden sm:block">
                    {{ dailyPartner.totalProfitLoss }}
                  </div>
                  <div class="hidden md:block">
                    {{ dailyPartner.passiveMoney }}
                  </div>
                  <div class="hidden md:block">
                    {{ dailyPartner.passiveComp }}
                  </div>
                  <div class="hidden md:block">
                    배팅{{ dailyPartner.casinoBetting }}
                    <hr style="margin: 7px 0px" />
                    타이{{ dailyPartner.casinoTie }}
                    <hr style="margin: 7px 0px" />
                    취소{{ dailyPartner.casinoCancel }}
                    <hr style="margin: 7px 0px" />
                    유효{{ dailyPartner.casinoAvailable }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.casinoWinning }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.casinoWinLoss }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.casinoCommission }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.casinoBetWinCalculate }}
                  </div>
                  <div class="hidden md:block">
                    배팅{{ dailyPartner.slotBetting }}
                    <hr style="margin: 7px 0px" />
                    취소{{ dailyPartner.slotCancel }}
                    <hr style="margin: 7px 0px" />
                    유효{{ dailyPartner.slotAvailable }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.slotWinning }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.slotWinLoss }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.slotCommission }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.slotBetWinCalculate }}
                  </div>
                  <div class="hidden md:block">
                    {{ dailyPartner.powerballBetting }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.powerballWinning }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.powerballWinLoss }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.powerballCommission }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.powerballBetWinCalculate }}
                  </div>
                  <div class="hidden lg:block">
                    {{ dailyPartner.totalBetWinCalculate }}
                  </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 #noDailyPartner>
        <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>
