{% capture css %}
  {% render "../../assets/styles/components/paginator.css" %}
{% endcapture %}
<style>{{ css }}</style>
{% capture js %}
  {% render "../../assets/scripts/paginator.js" %}
{% endcapture %}
<script>{{ js }}</script>
<nav aria-label="Blog pagination" class="pagination flex--centered">
  {% if pagination.href.previous %}
    <a href="{{ pagination.href.previous }}" aria-label="Previous page">
      {% tablericon "arrow-left" "Previous" %}
    </a>
  {% else %}
    <span
      class="disabled"
      aria-label="Previous page (disabled)"
      disabled>
      {% tablericon "arrow-left" "Prevous" %}
    </span>
  {% endif %}
  <noscript>
    <div class="text--centered">
      <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
    </div>
  </noscript>
  <div class="select client-side">
    <select id="pagination">
      {% for pageEntry in pagination.pages %}
      <option value="{{ forloop.index | minus: 1 }}">{{ forloop.index }} of {{ pagination.links.size }}</option>
      {% endfor %}
    </select>
  </div>
  {% if pagination.href.next %}
    <a href="{{ pagination.href.next }}" aria-label="Next page">
      {% tablericon "arrow-right" "Next" %}
    </a>
  {% else %}
    <span
      class="disabled"
      aria-label="Next page (disabled)"
      disabled>
      {% tablericon "arrow-right" "Next" %}
    </span>
  {% endif %}
</nav>