@if (isShouldShow) {
<nav class="d-flex justify-between align-items-center w-100">
	<ul class="pagination mb-0">
		<li (click)="page === 1 ? false : paginate(1)">
			<a href="#" aria-label="First"
				><span class="icon" aria-hidden="true"
					><nb-icon status="primary" icon="arrowhead-left-outline"></nb-icon></span
				><span class="sr-only">First</span></a
			>
		</li>
		<li (click)="page === 1 ? false : prev()" [class.disabled]="page === 1">
			<a href="#" aria-label="Prev"
				><span class="icon" aria-hidden="true"
					><nb-icon status="primary" icon="arrow-ios-back-outline"></nb-icon></span
				><span class="sr-only">Prev</span></a
			>
		</li>
		@for (sheet of pages; track sheet) {
		<li [class.active]="sheet === page">
			@if (sheet === page) {
			<span>{{ sheet }} <span class="sr-only">(current)</span></span>
			} @if (page != sheet) {
			<span (click)="paginate(sheet)">{{ sheet }}</span>
			}
		</li>
		}
		<li (click)="page === last ? false : next()" [class.disabled]="page === last">
			<a href="#" aria-label="Next">
				<span class="icon" aria-hidden="true"
					><nb-icon status="primary" icon="arrow-ios-forward-outline"></nb-icon></span
				><span class="sr-only">Next</span></a
			>
		</li>
		<li (click)="page === last ? false : paginate(last)">
			<a href="#" aria-label="Last">
				<span class="icon" aria-hidden="true"
					><nb-icon status="primary" icon="arrowhead-right-outline"></nb-icon
				></span>
				<span class="sr-only">Last</span></a
			>
		</li>
	</ul>
	@if (perPageSelect && perPageSelect.length > 0) {
	<div class="d-flex justify-between align-items-center">
		<nb-select size="small" (selectedChange)="onChangePerPage($event)" [(selected)]="currentPerPage">
			@for (item of perPageSelect; track item) {
			<nb-option [value]="item">{{ item }}</nb-option>
			}
		</nb-select>
		<span> {{ startCount }} - {{ endCount }} of {{ count }} {{ 'PAGINATION.ITEMS' | translate }} </span>
	</div>
	}
</nav>
}