<nav class="app-pagination" aria-label="Pagination">
  <app-button
    variant="ghost"
    size="sm"
    [disabled]="currentPage() === 1"
    [attr.aria-label]="previousLabel()"
    (click)="goTo(currentPage() - 1)"
  >
    <app-icon name="chevronLeft" [size]="16" />
  </app-button>

  @for (page of pages(); track $index) {
    @if (isEllipsis(page)) {
      <span class="app-pagination__ellipsis" aria-hidden="true">{{ page }}</span>
    } @else {
      <button
        type="button"
        class="app-pagination__page"
        [class.app-pagination__page--active]="page === currentPage()"
        [attr.aria-current]="page === currentPage() ? 'page' : null"
        (click)="goTo(page)"
      >
        {{ page }}
      </button>
    }
  }

  <app-button
    variant="ghost"
    size="sm"
    [disabled]="currentPage() === totalPages()"
    [attr.aria-label]="nextLabel()"
    (click)="goTo(currentPage() + 1)"
  >
    <app-icon name="chevronRight" [size]="16" />
  </app-button>
</nav>
