@if (totalItems > pageSize) {
  <nav
    class="frg-pagination-small"
    aria-label="Paginazione nome lista"
    [ngClass]="{
      'frg-pagination-small__primary': styleType === 'primary',
      'frg-pagination-small__secondary': styleType === 'secondary',
      'frg-pagination-small__tertiary': styleType === 'tertiary',
      'frg-pagination-small__dark': styleType === 'dark',
      'frg-pagination-small__light': styleType === 'light'
    }"
  >
    <ul class="frg-pagination-small__list">
      <li class="frg-pagination-small__paging frg-pagination-small__prev">
        <a
          href="javascript:void(0);"
          [class.disabled]="page === 1"
          (click)="changePage(page - 1)"
        >
          <span class="visually-hidden">Pagina precedente</span>
          <span class="fas fa-angle-left" aria-hidden="true"></span>
        </a>
      </li>
      @for (pageNum of pagesArray; track pageNum; let i = $index) {
        @if (showStartEllipsis && i === 1) {
          <li class="frg-pagination-small__paging frg-pagination-small__ellipsis">
            <span class="ellipsis">...</span>
          </li>
        }
        <li
          class="frg-pagination-small__paging frg-pagination-small__page-number"
        >
          <a
            href="javascript:void(0);"
            [attr.aria-current]="page === pageNum ? 'page' : null"
            (click)="changePage(pageNum)"
          >
            <span class="visually-hidden">Pagina</span>
            {{ pageNum }}
          </a>
        </li>
        @if (showEndEllipsis && i === pagesArray.length - 2) {
          <li class="frg-pagination-small__paging frg-pagination-small__ellipsis">
            <span class="ellipsis">...</span>
          </li>
        }
      }

      <li class="frg-pagination-small__paging frg-pagination-small__next">
        <a
          href="javascript:void(0);"
          [class.disabled]="page === totalPages"
          (click)="changePage(page + 1)"
        >
          <span class="visually-hidden">Pagina successiva</span>
          <span class="fas fa-angle-right" aria-hidden="true"></span>
        </a>
      </li>
    </ul>
  </nav>
}