<div *ngIf="pages.length > 0">
  <nav aria-label="Page navigation">
    <ul class="pagination " [ngClass]="{'justify-content-center': alignJustify}">
      <li class="page-item" [nbTooltip]="'First ' + prefix">
        <button type="submit" nbButton outline size="small" [disabled]="page === 1" class="rounded-0 border-right-0"
          (click)="gotoPage(1)">
          <nb-icon pack="eva" icon="arrowhead-left"></nb-icon>
        </button>
      </li>
      <li class="page-item" [nbTooltip]="'Previous ' + prefix">
        <button type="submit" nbButton outline size="small" [disabled]="page === 1" class="rounded-0 border-right-0"
          (click)="gotoPage(page - 1)">
          <nb-icon pack="eva" icon="arrow-ios-back"></nb-icon>
        </button>
      </li>
      <li *ngFor="let p of pages.slice(pagesStart, pagesEnd)" class="page-item">
        <button type="submit" nbButton outline class="rounded-0 border-right-0" *ngIf="p !== page" size="small"
          (click)="gotoPage(p)" nbTooltip={{getPageToolTip(p)}}>
          {{p}}
        </button>
        <button type="submit" nbButton class="rounded-0 border-right-0" *ngIf="p === page" size="small"
          (click)="gotoPage(p)" nbTooltip={{getPageToolTip(p)}}>
          {{p}}
        </button>
      </li>
      <li class="page-item" nbTooltip={{getNewPageToolTip()}} *ngIf="page!=lastPage||page == maxPage">
        <button type="submit" nbButton outline size="small" class="rounded-0" [disabled]="page == maxPage"
          (click)="gotoPage(page + 1)">
          <!-- <nb-icon pack="eva" [icon]="page >= pages[pages.length - 1] ? 'plus' : 'arrow-ios-forward'"></nb-icon> -->
          <nb-icon pack="eva" [icon]="'arrow-ios-forward'"></nb-icon>
        </button>
      </li>

      <li class="page-item" nbTooltip={{getNewPageToolTip()}} *ngIf="page<maxPage && page==lastPage">
        <button type="submit" nbButton outline size="small" class="rounded-0" (click)="addNewPage()">
          <nb-icon pack="eva" [icon]="'plus'"></nb-icon>
        </button>
      </li>

      <li class="page-item" [nbTooltip]="'Last ' + prefix">
        <button type="submit" nbButton outline size="small" [disabled]="page >= pages[pages.length - 1]"
          class="rounded-0 border-left-0" (click)="gotoPage(pages[pages.length - 1])">
          <nb-icon pack="eva" icon="arrowhead-right"></nb-icon>
        </button>
      </li>
    </ul>
  </nav>
</div>