pager

// src/components/patterns/pager/pager.html.twig

<nav class="Pager" aria-labelledby="pagination-heading">
  <h2 id="pagination-heading" class="u-hiddenVisually">{{ 'Paginierung'|t }}</h2>
  <ul class="Pager-items js-pager__items">
    {% if items.previous %}
      <li class="Pager-item Pager-item--previous">
        <a class="u-brandLink Pager-itemLink" href="{{ items.previous.href }}" rel="prev">
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--prev"
          } only %}
          <span class="u-hiddenVisually">{{ 'Vorherige Seite'|t }}</span>
          <span aria-hidden="true">{{ items.previous.text }}</span>
        </a>
      </li>
    {% else %}
      <li class="Pager-item Pager-item--previous Pager-item--disabled" aria-hidden="true">
        <span class="Pager-itemLink" title="{{ 'Gehe zur vorherigen Seite'|t }}">
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--prev"
          } only %}
          Zurück
        </span>
      </li>
    {% endif %}
    {% if ellipses.previous %}
      <li class="Pager-item Pager-item--ellipses" role="presentation">&hellip;</li>
    {% endif %}
    {% for key, item in items.pages %}
      <li class="Pager-item">
        <a class="Pager-pageNumber{{ current_page == key ? ' Pager-pageNumber--active' : '' }}" href="{{ item.href }}" title="{{ current_page == key ? 'Aktuelle Seite'|t : 'Gehe zur Seite ' ~ (key + 1) }}" {{ current_page == key ? ' aria-current' : '' }}>
          <span class="u-hiddenVisually">{{ 'Seite'|t }}</span>
          {{ item.text }}
        </a>
      </li>
    {% endfor %}
    {% if ellipses.next %}
      <li class="Pager-item" role="presentation">&hellip;</li>
    {% endif %}
    {% if items.next %}
      <li class="Pager-item Pager-item--next">
        <a class="u-brandLink Pager-itemLink" href="{{ items.next.href }}" title="{{ 'Zur nächsten Seite gehen'|t }}" rel="next">
          <span class="u-hiddenVisually">{{ 'Nächste Seite'|t }}</span>
          <span aria-hidden="true">{{ items.next.text }}</span>
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--next"
          } only %}
        </a>
      </li>
    {% else %}
      <li class="Pager-item Pager-item--next Pager-item--disabled" aria-hidden="true">
        <span class="Pager-itemLink">
          Weiter
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "Pager-itemIcon--next"
          } only %}
        </span>
      </li>
    {% endif %}
  </ul>
</nav>