<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">
      <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>
      <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>
      <!-- Search button -->
      <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="adminSessions$ | async as adminSessions">
        <ng-container *ngIf="adminSessions.length > 0; else noAdminSession">
          <div class="grid">
            <!-- Header -->
            <div
              class="admin-session-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
            >
              <div class="hidden lg:block">번호</div>
              <div class="hidden lg:block">
                정보
                <hr style="margin: 7px 0px" />
                아이디
              </div>

              <div class="hidden lg:block">
                IP
                <hr style="margin: 7px 0px" />
                도메인
              </div>
              <div class="hidden lg:block">
                접속시간
                <hr style="margin: 7px 0px" />
                성공실패
              </div>
              <div class="hidden lg:block">로그인차단/해제</div>
              <div class="hidden lg:block">IP차단/해제</div>
              <div class="hidden lg:block">회원차단/해제</div>
            </div>
            <!-- Rows -->
            <ng-container *ngIf="adminSessions$ | async as adminSessions">
              <ng-container
                *ngFor="
                  let admin of adminSessions;
                  let i = index;
                  trackBy: __trackByFn
                "
              >
                <div
                  class="admin-session-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                >
                  <!-- 번호 -->
                  <div class="hidden lg:block">
                    {{ i + 1 }}
                  </div>
                  <!-- 등급 || 아이디 -->
                  <div
                    class="hidden lg:block"
                    style="cursor: pointer"
                    (click)="viewUserDetail(admin.userId!)"
                  >
                    {{ admin.rank }}
                    <hr style="margin: 7px 0px" />
                    {{ admin.signinId }}
                  </div>

                  <!-- IP || Domain-->
                  <div class="hidden lg:block">
                    {{ admin.ip }}
                    <hr style="margin: 7px 0px" />
                    {{ admin.domain }}
                  </div>
                  <!-- 접속시간 || 성공실패-->
                  <div class="hidden lg:block">
                    {{ admin.tryConnectDate }}
                    <hr style="margin: 7px 0px" />
                    {{ admin.errorType }}
                  </div>

                  <!-- 로그인차단/해제 상태 -->
                  <div class="hidden lg:block">
                    {{ !!admin.isSigninBlock ? "로그인 차단중" : "정상" }}
                  </div>
                  <!-- IP차단/해제-->
                  <div class="hidden lg:block">
                    <button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'primary'"
                      (click)="__onClickIpBlock($event, admin.id)"
                    >
                      <span class="ml-2 mr-1">IP차단</span>
                    </button>
                  </div>

                  <!-- 회원차단/해제 -->
                  <div class="hidden lg:block">
                    <button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'primary'"
                      (click)="__onClickIdBlock($event, admin.id)"
                    >
                      <span class="ml-2 mr-1">ID블럭</span>
                    </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 #noAdminSession>
        <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>
