{#
/**
 * @file
 * Default theme implementation to display a pagerer style.
 *
 * Available variables:
 * - heading_id: Pagination heading ID.
 * - style: The pagerer style being rendered.
 * - embedded: Flag to indicate if the pager is embedded (used by the
 *   scrollpane style).
 * - items: List of pager items.
 *   The list is keyed by the following elements:
 *   - first: Item for the first page.
 *   - previous: Item for the previous page.
 *   - prefix: Text to be presented before the first page of results.
 *   - pages: List of pages, separators, breakers, and pagerer widgets.
 *   - suffix: Text to be presented after the last page of results.
 *   - next: Item for the next page.
 *   - last: Item for the last page.
 *   Sub-sub elements:
 *   items.first, items.previous, items.next, items.last, and each item inside
 *   items.pages can contain the following elements:
 *   - href: URL with appropriate query parameters for the item.
 *   - attributes: A keyed list of HTML attributes for the item.
 *   - text: The visible text used for the item link, such as "‹ Previous"
 *     or "Next ›".
 *   - title: The text for the title attribute, used to present help text to
 *     user when hovering with the mouse on the element.
 *   - reader_text: The text used for the item link by automated readers.
 *   - is_current: Flag to indicate if the page displayed is the current in
 *     the pager.
 *   - is_separator: Flag to indicate if the item displayed is a separator.
 *   - is_breaker: Flag to indicate if the item displayed is a breaker.
 *   - widget: An item to be rendered as a widget.
 *
 * @ingroup themeable
 */
#}
{{ attach_library('pagerer/base-claro.css') }}
{%
  set classes = [
    'pager',
    'pagerer-pager-' ~ style,
    embedded ? 'pagerer-scrollpane-embedded',
  ]
%}
{% if items %}
    <nav {{ attributes.addClass(classes) }} role="navigation" aria-labelledby="{{ heading_id }}">
      <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
      {% if embedded %}
        {{ attach_library('pagerer_jqueryui/scrollpane') }}
        <div class="pagerer-viewport">
      {% endif %}
          <ul class="pager__items js-pager__items">
{# Print first item. #}
            {% if items.first %}
              {% if items.first.href is defined %}
                <li class="pager__item pager__item--action pager__item--first">
                  <a href="{{ items.first.href }}" class="pager__link pager__link--action-link" title="{{- items.first.title -}}"{{ items.first.attributes|without('href', 'title') }}>
                    <span class="visually-hidden">{{- items.first.reader_text -}}</span>
                    <span class="pager__item-title pager__item-title--backwards" aria-hidden="true">
                      {{- items.first.text|replace({'«': ''}) -}}
                    </span>
                  </a>
                </li>
              {% else %}
                <li class="pager__item pager__item--first">
                  <span aria-hidden="true" role="presentation">{{- items.first.text -}}</span>
                </li>
              {% endif %}
            {% endif %}
{# Print previous item. #}
            {% if items.previous %}
              {% if items.previous.href is defined %}
                <li class="pager__item pager__item--action pager__item--previous">
                  <a href="{{ items.previous.href }}" class="pager__link pager__link--action-link" title="{{- items.previous.title -}}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
                    <span class="visually-hidden">{{- items.previous.reader_text -}}</span>
                    <span class="pager__item-title pager__item-title--backwards" aria-hidden="true">
                      {{ items.previous.text|replace({'‹': ''}) }}
                    </span>
                  </a>
                </li>
              {% else %}
                <li class="pager__item pager__item--previous">
                  <span aria-hidden="true" role="presentation">{{- items.previous.text -}}</span>
                </li>
              {% endif %}
            {% endif %}
{# Print prefix item. #}
            {% if items.prefix %}
              <li class="pager__item pager__link pagerer-prefix">
                <span aria-hidden="true" role="presentation">{{- items.prefix.text -}}</span>
              </li>
            {% endif %}
{# Now generate the actual pager piece. #}
            {% for key, item in items.pages %}
              {% if item.is_breaker %}
                <li class="pager__item pager__item--ellipsis pagerer-breaker" role="presentation">{{- item.text -}}</li>
              {% elseif item.is_separator %}
                <li class="pager__item pager__item--ellipsis pager__link pagerer-separator" role="presentation">{{- item.text -}}</li>
              {% elseif item.widget %}
                <li class="pager__item pagerer-widget">
                  {{ item.widget }}
                </li>
              {% elseif item.href is defined %}
                <li class="pager__item{{ item.is_current ? ' pager__item--active' : '' }} pager__item--number">
                  <a href="{{ item.href }}" class="pager__link{{ item.is_current ? ' is-active' : '' }}" title="{{ item.title }}"{{ item.attributes|without('href', 'title', 'class') }}>
                    <span class="visually-hidden">{{- item.reader_text -}}</span>
                    {{- item.text -}}
                  </a>
                </li>
              {% else %}
                <li class="pager__item pager__item--ellipsis pagerer-no-link" role="presentation">{{- item.text -}}</li>
              {% endif %}
            {% endfor %}
{# Print suffix item. #}
            {% if items.suffix %}
              <li class="pager__item pager__link pagerer-suffix">
                <span aria-hidden="true" role="presentation">{{- items.suffix.text -}}</span>
              </li>
            {% endif %}
{# Print next item. #}
            {% if items.next %}
              {% if items.next.href is defined %}
                <li class="pager__item pager__item--action pager__item--next">
                  <a href="{{ items.next.href }}" class="pager__link pager__link--action-link" title="{{- items.next.title -}}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
                    <span class="visually-hidden">{{- items.next.reader_text -}}</span>
                    <span class="pager__item-title pager__item-title--forward" aria-hidden="true">
                      {{ items.next.text|replace({'›': ''}) }}
                    </span>
                  </a>
                </li>
              {% else %}
                <li class="pager__item pager__item--next">
                  <span aria-hidden="true" role="presentation">{{- items.next.text -}}</span>
                </li>
              {% endif %}
            {% endif %}
{# Print last item. #}
            {% if items.last %}
              {% if items.last.href is defined %}
                <li class="pager__item pager__item--action pager__item--last">
                  <a href="{{ items.last.href }}" class="pager__link pager__link--action-link" title="{{- items.last.title -}}"{{ items.last.attributes|without('href', 'title') }}>
                    <span class="visually-hidden">{{- items.last.reader_text -}}</span>
                    <span class="pager__item-title pager__item-title--forward" aria-hidden="true">
                      {{ items.last.text|replace({'»': ''}) }}
                    </span>
                  </a>
                </li>
              {% else %}
                <li class="pager__item pager__item--last">
                  <span aria-hidden="true" role="presentation">{{- items.last.text -}}</span>
                </li>
              {% endif %}
            {% endif %}
          </ul>
      {% if scrollpane %}
        </div>
      {% endif %}
  </nav>
{% endif %}