{%- assign pageCount = pagination.pages.size | default:0 -%}
{%- assign hidePagination = pageCount <= 1 -%}
{%- unless hidePagination -%}
<script type="module" src="/assets/scripts/components/select-pagination.js?v={% appVersion %}" defer></script>
<nav aria-label="Pagination" class="pagination">
  {%- assign prevHref = pagination.href.previous -%}
  {%- assign nextHref = pagination.href.next -%}
  {% if prevHref %}
  <a href="{{ prevHref }}" aria-label="Previous page">
    {% tablericon "arrow-left" %}
  </a>
  {% else %}
  <span>{% tablericon "arrow-left" %}</span>
  {% endif %}
  <select-pagination>
    <select class="client-side" aria-label="Page selection">
      {%- for pageEntry in pagination.pages -%}
        <option value="{{ forloop.index | minus:1 }}">
          {{ forloop.index }} of {{ pagination.links.size }}
        </option>
      {%- endfor -%}
    </select>
    <noscript>
      <p><span aria-current="page">{{ pagination.pageNumber | plus:1 }}</span> of {{ pagination.links.size }}</p>
    </noscript>
  </select-pagination>
  {% if nextHref %}
  <a href="{{ nextHref }}" aria-label="Next page">
    {% tablericon "arrow-right" %}
  </a>
  {% else %}
  <span>{% tablericon "arrow-right" %}</span>
  {% endif %}
</nav>
{%- endunless -%}