{% if pages %}
<nav class="pagination is-centered{% if class %} {{ class }}{% endif %}" role="navigation" aria-label="pagination">
  <ul class="pagination-list">
    <li></li><!-- What is going on here?? -->
    {% if not class %}
    <li><a class="pagination-link" aria-label="Go To Beginning"
           hx-include="{{ hx-include }}"
           hx-post="{{ url }}?direction={{ direction }}&offset=0&sort-by={{ sort-by }}"
           hx-target="{{ hx-target }}">&laquo;</a></li>
    {% endif %}
    {% for page in pages %}
    <li>
      <a class="pagination-link{% if offset == page.offset %} is-current{% endif %}" aria-label="Go To Page {{ page.id | add: 1 }}"
         hx-include="{{ hx-include }}"
         hx-post="{{ url }}?direction={{ direction }}&offset={{ page.offset }}&sort-by={{ sort-by }}"
         hx-target="{{ hx-target }}">{{ page.id | add: 1 }}</a>
    </li>
    {% endfor %}
    {% if not class %}
    <li><a class="pagination-link" aria-label="Go To End"
           hx-include="{{ hx-include }}"
           hx-post="{{ url }}?direction={{ direction }}&offset={{ last-page.offset }}&sort-by={{ sort-by }}"
           hx-target="{{ hx-target }}">&raquo;</a></li>
    {% endif %}
  </ul>
</nav>
{% endif %}