<nav
  class="d-inline-flex align-items-center justify-content-center gap-3 text-decoration-none"
  aria-label="Paginacion"
>
  <button
    type="button"
    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
    data-testid="paginator-first"
    aria-label="Ir a la primera pagina"
    [disabled]="isFirstStepDisabled()"
    (click)="changePage('first')"
  >
    <i class="fa-solid fa-angles-left" aria-hidden="true"></i>
  </button>

  <button
    type="button"
    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
    data-testid="paginator-previous"
    aria-label="Ir a la pagina anterior"
    [disabled]="isFirstStepDisabled()"
    (click)="changePage('previous')"
  >
    <i class="fa-solid fa-angle-left" aria-hidden="true"></i>
  </button>

  <span
    class="paginator__status d-inline-block text-center fw-semibold lh-1"
    data-testid="paginator-status"
    aria-live="polite"
  >
    {{ displayPage() }}/{{ displayTotalPages() }}
  </span>

  <button
    type="button"
    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
    data-testid="paginator-next"
    aria-label="Ir a la pagina siguiente"
    [disabled]="isLastStepDisabled()"
    (click)="changePage('next')"
  >
    <i class="fa-solid fa-angle-right" aria-hidden="true"></i>
  </button>

  <button
    type="button"
    class="paginator__button btn btn-link d-inline-flex align-items-center justify-content-center rounded-circle p-0 text-decoration-none"
    data-testid="paginator-last"
    aria-label="Ir a la ultima pagina"
    [disabled]="isLastStepDisabled()"
    (click)="changePage('last')"
  >
    <i class="fa-solid fa-angles-right" aria-hidden="true"></i>
  </button>
</nav>
