<nav
  class="pagination-wrapper"
  [class.justify-content-center]="alignment === 'center'"
  [class.justify-content-end]="alignment === 'end'"
  [class.pagination-total]="totalNumberText.hasChildNodes()">
  @if (pages.length) {
    <ul class="pagination">
      <li class="page-item" [class.disabled]="currentPage < 1">
        <a class="page-link" [class.text]="textLinks" href="#" (click)="pageChange($event, currentPage)">
          @if (!textLinks) {
            <it-icon name="chevron-left" color="primary"></it-icon>
          }
          <span class="visually-hidden">
            {{ (textLinks ? 'it.core.page' : 'it.core.previous-page') | translate }}
          </span>
          @if (textLinks) {
            {{ 'it.core.previous' | translate }}
          }
        </a>
      </li>
      @if (simpleMode) {
        <li class="page-item">
          <span class="page-link" aria-current="page">{{ currentPage + 1 }}</span>
        </li>
        <li class="page-item"><span class="page-link">/</span></li>
        <li class="page-item">
          <span class="page-link">{{ pageNumbers }}</span>
        </li>
        <li class="page-item visually-hidden">
          <a class="page-link" href="#" aria-current="page">
            {{ 'it.core.page-of-total' | translate: { page: currentPage + 1, total: pageNumbers } }}
          </a>
        </li>
      } @else {
        @if (pageNumbers > visiblePages && pages[0] >= 2) {
          <li class="page-item">
            <a class="page-link" href="#" (click)="pageChange($event, 1)">1</a>
          </li>
          @if (pages[0] >= 3) {
            <li class="page-item">
              <span class="page-link">...</span>
            </li>
          }
        }
        @for (page of pages; track page) {
          <li class="page-item">
            @if (page === currentPage + 1) {
              <a class="page-link" aria-current="page">
                <span class="d-inline-block d-sm-none">{{ 'it.core.page' | translate }}</span> {{ page }}
              </a>
            } @else {
              <a class="page-link" href="#" (click)="pageChange($event, page)">{{ page }}</a>
            }
          </li>
        }
        @if (pageNumbers > visiblePages && pages[pages.length - 1] < pageNumbers) {
          @if (pages[pages.length - 1] < pageNumbers - 1) {
            <li class="page-item">
              <span class="page-link">...</span>
            </li>
          }
          <li class="page-item">
            <a class="page-link" href="#" (click)="pageChange($event, pageNumbers)">{{ pageNumbers }}</a>
          </li>
        }
      }
      <li class="page-item" [class.disabled]="currentPage >= pageNumbers - 1">
        <a class="page-link" [class.text]="textLinks" href="#" (click)="pageChange($event, currentPage + 2)">
          <span class="visually-hidden">
            {{ (textLinks ? 'it.core.page' : 'it.core.next-page') | translate }}
          </span>
          @if (textLinks) {
            {{ 'it.core.next' | translate }}
          } @else {
            <it-icon name="chevron-right" color="primary"></it-icon>
          }
        </a>
      </li>
    </ul>
  }

  @if (currentChanger !== undefined) {
    <it-dropdown>
      <span button>{{ currentChanger }} / {{ 'it.core.page' | translate | lowercase }}</span>
      <ng-container list>
        @for (value of changerValues; track value) {
          <it-dropdown-item href="#" externalLink="true" (click)="changerChange($event, value)">
            {{ value }} / {{ 'it.core.page' | translate | lowercase }}
          </it-dropdown-item>
        }
      </ng-container>
    </it-dropdown>
  }

  @if (showJumpToPage) {
    <it-input
      type="number"
      [min]="1"
      [max]="pageNumbers"
      [label]="('it.core.go-to' | translate) + '...'"
      [formControl]="jumpToPage"></it-input>
  }

  <p [class.d-none]="!totalNumberText.hasChildNodes()" #totalNumberText>
    <ng-content></ng-content>
  </p>
</nav>
