@if (pagination && isVisible && pagination.total) {
  <div class="op-pagination">
    <nav class="op-pagination--pages" [attr.aria-label]="text.page_navigation">
      <ul class="op-pagination--items" role="presentation">
        <li [hidden]="pagination.page === 1 || !showPageSelections" class="op-pagination--item">
          <button
            class="op-pagination--item-link op-pagination--item-link_prev"
            type="button"
            (click)="showPage(pagination.page - 1)"
            data-rel="prev">
            <svg chevron-left-icon size="xsmall" class="op-pagination--item-link-icon op-pagination--item-link-icon_prev" />
            {{text.label_previous}}
          </button>
        </li>
        @if (prePageNumbers.length > 0) {
          @for (pageNumber of prePageNumbers; track pageNumber) {
            <li
              class="op-pagination--item">
              <button
                class="op-pagination--item-link"
                type="button"
                (click)="showPage(pageNumber)"
                data-rel="prev"
                [attr.aria-label]="text.page_number(pageNumber)"
                [textContent]="pageNumber"
              ></button>
            </li>
          }
          <li class="op-pagination--space">
            <span class="sr-only" [textContent]="text.pages_skipped"></span>
            <span aria-hidden="true">…</span>
          </li>
        }
        @if (pageNumbers.length > 1) {
          @for (pageNumber of pageNumbers; track pageNumber) {
            <li
              [ngClass]="{ 'op-pagination--item_current': pageNumber === pagination.page }"
              class="op-pagination--item">
              @if (pageNumber === pagination.page) {
                <em
                  [attr.aria-label]="text.page_number(pageNumber)"
                  aria-current="page"
                  tabindex="0">
                  {{ pageNumber }}
                </em>
              }
              @if (pageNumber !== pagination.page) {
                <button
                  class="op-pagination--item-link"
                  type="button"
                  (click)="showPage(pageNumber)"
                  data-rel="next"
                  [attr.aria-label]="text.page_number(pageNumber)"
                  [textContent]="pageNumber"
                ></button>
              }
            </li>
          }
          <li class="op-pagination--space">
            <span class="sr-only" [textContent]="text.pages_skipped"></span>
            <span aria-hidden="true">…</span>
          </li>
        }
        @if (postPageNumbers.length) {
          @for (pageNumber of postPageNumbers; track pageNumber) {
            <li class="op-pagination--item">
              <button
                class="op-pagination--item-link"
                type="button"
                (click)="showPage(pageNumber)"
                data-rel="next"
                [attr.aria-label]="text.page_number(pageNumber)"
                [textContent]="pageNumber"
              ></button>
            </li>
          }
        }
        <li [hidden]="!(pagination.total && pagination.page < pageNumbers[pageNumbers.length - 1])"
          class="op-pagination--item">
          <button
            class="op-pagination--item-link op-pagination--item-link_next"
            type="button"
            (click)="showPage(pagination.page + 1)"
            data-rel="next">
            {{text.label_next}}
            <svg chevron-right-icon size="xsmall" class="op-pagination--item-link-icon op-pagination--item-link-icon_next" />
          </button>
        </li>
        <li class="op-pagination--range" aria-live="polite">
          {{currentRange}}
          @if (pageNumbers.length === 1) {
            <span
              id="op-pagination-empty-text"
              tabindex="0"
              class="sr-only"
            [textContent]="text.no_other_page"></span>
          }
        </li>
        @if (infoText) {
          <li class="op-pagination--info"
            >
            <op-icon icon-classes="icon-info1 icon-context" />
            <span [textContent]="infoText"></span>
          </li>
        }
      </ul>
    </nav>
    @if (showPerPageOptions()) {
      <div class="op-pagination--options">
        <nav [attr.aria-label]="text.per_page_navigation">
          <ul
            class="op-pagination--items"
            role="presentation">
            <li
              class="op-pagination--label"
              [textContent]="text.per_page">
            </li>
            @for (perPageOption of perPageOptions; track perPageOption) {
              <li
                class="op-pagination--item"
                [ngClass]="{ 'op-pagination--item_current': perPageOption === pagination.perPage }">
                @if (perPageOption !== pagination.perPage) {
                  <button
                    class="op-pagination--item-link"
                    type="button"
                    (click)="selectPerPage(perPageOption)"
                    [textContent]="perPageOption"
                    [attr.aria-label]="text.show_per_page(perPageOption)"
                  ></button>
                }
                @if (perPageOption === pagination.perPage) {
                  <span
                    tabindex="0"
                    aria-current="true"
                    [attr.aria-label]="text.show_per_page(perPageOption)">
                    {{ perPageOption }}
                  </span>
                }
              </li>
            }
          </ul>
        </nav>
      </div>
    }
  </div>
}