@if (totalPages > 1) {
  <div class="flex items-center justify-center gap-3 p-4">
    @if (totalPages > 5) {
      <button
        pButton
        icon="pi pi-angle-double-right"
        size="small"
        severity="secondary"
        outlined
        [disabled]="loading || currentPage === 1"
        (click)="goToFirstPage()"></button>
    }
    <button
      pButton
      icon="pi pi-angle-right"
      size="small"
      severity="secondary"
      outlined
      [disabled]="loading || currentPage === 1"
      (click)="prevPage()"></button>
    @for (page of pagesToShow(); track page) {
      <p-button
        [label]="page.toString()"
        size="small"
        [severity]="page === currentPage ? 'primary' : 'secondary'"
        [outlined]="page !== currentPage"
        [disabled]="loading || page === currentPage"
        (click)="onPageChange(page)"></p-button>
    }
    <button
      pButton
      icon="pi pi-angle-left"
      size="small"
      severity="secondary"
      outlined
      [disabled]="loading || currentPage >= totalPages"
      (click)="nextPage()"></button>
    @if (totalPages > 5) {
      <button
        pButton
        icon="pi pi-angle-double-left"
        size="small"
        severity="secondary"
        outlined
        [disabled]="loading || currentPage === totalPages"
        (click)="goToLastPage()"></button>
    }
  </div>
}