<!-- Pagination -->
{% if result.count > 10 or result.found > 10 %}
  <nav aria-label="Datasets" class="mt-gutter pt-gutter text-2xl my-10">
    <ul class="inline-flex">
      {% if currentPage == 1 %}
        <li class="border border-edsgray2">
          <span class="block px-3 py-2 bg-edsgray2 text-white text-center w-40">
            <span class="">{{__('Previous')}}</span>
          </span>
        </li>
      {% else %}
        <li class="border border-edsgreen">
          <a class="block px-3 py-2 bg-edsgreen text-white hover:text-edsdarkgreen text-center w-40" href="{{result.path}}?q={{ query.q }}&from={{ (currentPage - 2) * 10 }}" aria-label="{{__('Previous')}}">
            <span class="">{{__('Previous')}}</span>
          </a>
        </li>
      {% endif %}
      {% for page in pages %}
        {% if page == '...' %}
        <li class="border border-edsgray">
          <span class="block px-5 py-2">{{page}}</span>
        </li>
        {% else %}
        <li class="border border-edsgray">
          <a class="block px-5 py-2 {{ 'bg-edsgray' if currentPage == page }}" href="{{result.path}}?q={{ query.q }}&from={{ (page - 1) * 10 }}">{{page}}</a>
        </li>
        {% endif %}
      {% endfor %}
      {% if currentPage == totalPages %}
        <li class="border border-edsgray2">
          <span class="block px-3 py-2 bg-edsgray2 text-white text-center w-40">
            <span class="">{{__('Next')}}</span>
          </span>
        </li>
      {% else %}
        <li class="border border-edsgreen">
          <a class="block px-3 py-2 bg-edsgreen text-white hover:text-edsdarkgreen text-center w-40" href="{{result.path}}?q={{ query.q }}&from={{ currentPage * 10 }}" aria-label="{{__('Next')}}">
            <span class="">{{__('Next')}}</span>
          </a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endif %}
<!-- end of pagination -->
