<app-list-page-header [selectAllState]="selectAllState" (selectAllChange)="selectAllChange($event)"
  [showOrderBy]="false" [showDisplayMode]="false" (searchKeyUp)="updateFilter($event)" (itemsPerPageChange)="onItemsPerPageChange($event)" [itemsPerPage]="itemsPerPage" [itemOptionsPerPage]="itemOptionsPerPage">
</app-list-page-header>

<div class="row">
  <div class="col-12 mb-4 data-table-rows">
    <ngx-datatable [rows]="rows" [columns]="columns" [columnMode]="ColumnMode.flex" [limit]="itemsPerPage" [headerHeight]="20"
      [footerHeight]="100" #table [sorts]="[{ prop: 'title', dir: 'asc' }]" (select)="onSelect($event)"
      [selected]="selected" [selectionType]="SelectionType.checkbox">

      <ngx-datatable-column name="Title" [flexGrow]="1.2">
        <ng-template let-value="value" ngx-datatable-cell-template>
          <a class="c-pointer">{{ value }}</a>
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Sales" [flexGrow]="0.7">
        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
          {{ value }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="Category" [flexGrow]="1.1">
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value }}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Id" [width]="120" [sortable]="false" [canAutoResize]="false" [draggable]="false"
        [resizeable]="false">
        <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
          let-selectFn="selectFn">
        </ng-template>
        <ng-template ngx-datatable-cell-template let-isSelected="isSelected" let-value="value"
          let-onCheckboxChangeFn="onCheckboxChangeFn">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" [id]="'customCheck'+value" [checked]="isSelected"
              (change)="onCheckboxChangeFn($event)">
            <label class="custom-control-label" [for]="'customCheck'+value"></label>
          </div>
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-footer *ngIf="true">
        <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
          let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset" let-limit="limit">
          <div class="w-100 d-flex justify-content-center">
            <pagination [totalItems]="rowCount" [itemsPerPage]="pageSize" [maxSize]="5"
              (pageChanged)="table.onFooterPage($event)"
              [customNextTemplate]="nextTemplate" [customPreviousTemplate]="prevTemplate">
            </pagination>
          </div>
        </ng-template>
      </ngx-datatable-footer>
    </ngx-datatable>
  </div>
</div>

<ng-template #nextTemplate let-disabled="disabled" let-currentPage="currentPage">
  <i class='simple-icon-arrow-right'></i>
</ng-template>
<ng-template #prevTemplate let-disabled="disabled" let-currentPage="currentPage">
  <i class='simple-icon-arrow-left'></i>
</ng-template>