{% if pagination.pageLinks.length > 1 %}
  <div class="sm:flex-1 sm:flex sm:items-center sm:justify-between my-6 pt-6 border-t-2 border-purple-200">
    <div class="pb-6 sm:pb-0">
      <p class="text-md text-gray-500">
        Showing
        <span class="font-medium">{{ (pagination.pageNumber * pagination.size) + 1 }}</span>
        to
        <span class="font-medium">
          {% if pagination.nextPageLink %}
            {{ (pagination.pageNumber * pagination.size) + pagination.size }}
          {% else %}
            {{ length }}
          {% endif %}
        </span>
        of
        <span class="font-medium">{{ length }}</span>
        results
      </p>
    </div>
    <nav class="pagination">
      {% if pagination.previousPageLink %}
        <a class="relative inline-flex items-center px-2 py-2 mr-1 rounded-md border-2 border-indigo-500 bg-white text-sm font-medium text-indigo-500 hover:bg-gray-50" href="{{ pagination.previousPageHref }}">Previous</a>
      {% else %}
        <span class="relative inline-flex items-center px-2 py-2 mr-1 rounded-md border-2 border-grey-500 bg-white text-sm font-medium text-gray-500">Previous</span>
      {% endif %}
      {% if pagination.nextPageLink %}
        <a class="relative inline-flex items-center px-2 py-2 ml-1 rounded-md border-2 border-indigo-500 bg-white text-sm font-medium text-indigo-500 hover:bg-gray-50" href="{{ pagination.nextPageHref }}">Next</a>
      {% else %}
        <span class="relative inline-flex items-center px-2 py-2 ml-1 rounded-md border-2 border-grey-500 bg-white text-sm font-medium text-gray-500">Next</span>
      {% endif %}
    </nav>
  </div>
{% endif %}