<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">
      <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>
      <!-- Search -->
      <button mat-icon-button (click)="__onClickSearch()">
        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
      </button>
      <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-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 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>
          <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>
          <!-- 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>
  </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="coupons$ | async as coupons">
        <ng-container *ngIf="coupons.length > 0; else noCoupon">
          <div class="grid">
            <!-- Header -->
            <div
              class="coupon-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>
                생성아이디
                <hr style="margin: 7px 0px" />
                닉네임
              </div>
              <div>발행수</div>
              <div class="hidden sm:block">
                지급아이디
                <hr style="margin: 7px 0px" />
                닉네임
              </div>
              <div>금액</div>
              <div class="hidden md:block">
                쿠폰시작일
                <hr style="margin: 7px 0px" />
                쿠폰종료일
              </div>
              <div class="hidden md:block">사용여부</div>
              <div class="hidden md:block">등록일자</div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="coupons$ | async as coupons">
              <ng-container
                *ngFor="let coupon of coupons; trackBy: __trackByFn"
              >
                <div
                  class="coupon-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <div>{{ coupon.couponGroupNumber }}</div>
                  <div>{{ coupon.couponSerialNumber }}</div>
                  <div>
                    <div>
                      {{ coupon.issuedCouponId }}
                    </div>
                    <hr style="margin: 7px 0px" />
                    {{ coupon.issuedCouponNickname }}
                  </div>
                  <div>
                    {{ coupon.issuedCouponMoney }}
                  </div>
                  <div>
                    {{ coupon.issuedCoupons }}
                  </div>
                  <div class="hidden sm:block">
                    {{ coupon.takeCouponId }}
                    <hr style="margin: 7px 0px" />
                    {{ coupon.takeCouponNickname }}
                  </div>
                  <div class="hidden md:block">
                    {{ coupon.couponStartDate }}
                    <hr style="margin: 7px 0px" />
                    {{ coupon.couponFinishDate }}
                  </div>
                  <div class="hidden md:block">
                    {{ coupon.useOrNot }}
                  </div>
                  <div class="hidden md:block">
                    {{ coupon.issuedCouponDate }}
                    <hr style="margin: 7px 0px" />
                    {{ coupon.modifyCouponDate }}
                    <hr style="margin: 7px 0px" />
                    {{ coupon.useCouponDate }}
                  </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 #noCoupon>
        <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>
