<div class="row wd-wide mb-2">
  <div class="col-xl-3 col-md-3">
    <div class="input-group" *ngIf="showSearch">
      <input class="form-control ml-2" [style]="searchStyle" [class]="searchCss" type="text"
             [(ngModel)]="query" [readonly]="dataLoading"
             (keyup)="goSearch($event)" [placeholder]="'pagination.search' | translate"/>
      <div class="input-group-append">
        <button class="btn btn-outline-secondary bg-white" (click)="goSearch(undefined)" [disabled]="dataLoading">
          <em class="fa fas fa-search"></em>
        </button>
      </div>
    </div>
  </div>

  <div class="col-lg-9 col-md-9 ">
    <div class="row float-right">
      <div class="mt-2">
        <div class="row">
          <div class="input-group">{{'pagination.eachpage' | translate}} <input type="text" [(ngModel)]="pagerLimit" [readonly]="!allowChangePagerLimit"
                                             [style.width]="getPageLimitWidth()" (keyup)="changePageLimit($event)"
                                             style="text-align:center; margin-left:2px; margin-top: -2px; border:0px; background-color: transparent">{{'pagination.record' | translate}}&nbsp;
            {{'pagination.di' | translate}}<input type="text" [(ngModel)]="pageIndex" (keyup)="changePageIndex($event)"
                    [style.width]="getPageIndexWidth()" [readonly]="!allowChangePagerCurrent"
                    style="text-align:center;margin-left:2px; margin-top: -2px; border:0px; background-color: transparent">{{'pagination.page' | translate}},
            {{'pagination.total' | translate}}{{pageTotal}}{{'pagination.page' | translate}}({{recordTotal}}{{'pagination.records' | translate}})
          </div>
        </div>
      </div>
      <div class="mt-1 ml-4 align-items-center justify-content-center" *ngIf="dataLoading">
        <div class="semi-circle-spin" style="width:20px;height:20px;">
          <div style="background-color: black"></div>
        </div>
      </div>
      <ul [class]="dataLoading === true?'pagination ml-2':'pagination ml-4'" *ngIf="showPagination && !dataLoading">
        <li class="pagination-first page-item" *ngIf="showFirstPage">
          <a class="page-link cursor-hand" (click)="goFirst()">
            <em class="fa fas fa-fast-backward"></em>
          </a>
        </li>
        <li class="pagination-prev page-item" *ngIf="hasPrevGroup">
          <a class="page-link cursor-hand" (click)="goPrevGroup()">
            <em class="fa fa-angle-double-left"></em>
          </a>
        </li>
        <ng-container *ngFor="let pg of pageArray">
          <li [class.active]="pg.active" [class.disabled]="disabled && !pg.active" *ngIf="pg.data" class="pagination-page page-item">
            <span class="page-link cursor-hand" [innerHTML]="pg.number" (click)="goPage(pg)"></span>
          </li>
        </ng-container>
        <li class="pagination-next page-item" *ngIf="hasNextGroup">
          <a class="page-link cursor-hand" (click)="goNextGroup()">
            <em class="fa fa-angle-double-right"></em>
          </a>
        </li>
        <li class="pagination-last page-item" *ngIf="showLastPage">
          <a class="page-link cursor-hand" (click)="goLast()">
            <em class="fa fas fa-fast-forward"></em>
          </a>
        </li>
      </ul>
    </div>
  </div>

</div>
