{# Length-aware paginator (Tailwind). Renders nothing when there is a single page. #}
{% if paginator.has_pages() %}
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
  <div class="flex justify-between flex-1 sm:hidden">
    {% if paginator.on_first_page() %}
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default rounded-md">&laquo; Previous</span>
    {% else %}
      <a href="{{ paginator.previous_page_url() }}" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:text-gray-500">&laquo; Previous</a>
    {% endif %}
    {% if paginator.has_more_pages() %}
      <a href="{{ paginator.next_page_url() }}" rel="next" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:text-gray-500">Next &raquo;</a>
    {% else %}
      <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default rounded-md">Next &raquo;</span>
    {% endif %}
  </div>

  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700">
        Showing
        {% if paginator.first_item() %}
          <span class="font-medium">{{ paginator.first_item() }}</span>
          to
          <span class="font-medium">{{ paginator.last_item() }}</span>
        {% else %}
          <span class="font-medium">{{ paginator.count() }}</span>
        {% endif %}
        of
        <span class="font-medium">{{ paginator.total() }}</span>
        results
      </p>
    </div>

    <div>
      <span class="relative z-0 inline-flex shadow-sm rounded-md">
        {% if paginator.on_first_page() %}
          <span aria-disabled="true" aria-label="&laquo; Previous" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default rounded-l-md">&lsaquo;</span>
        {% else %}
          <a href="{{ paginator.previous_page_url() }}" rel="prev" aria-label="&laquo; Previous" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50">&lsaquo;</a>
        {% endif %}

        {% for element in paginator.elements() %}
          {% if element is string %}
            <span aria-disabled="true" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default">{{ element }}</span>
          {% else %}
            {% for page, url in element.items() %}
              {% if page == paginator.current_page() %}
                <span aria-current="page" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-gray-100 border border-gray-300 cursor-default">{{ page }}</span>
              {% else %}
                <a href="{{ url }}" aria-label="Go to page {{ page }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50">{{ page }}</a>
              {% endif %}
            {% endfor %}
          {% endif %}
        {% endfor %}

        {% if paginator.has_more_pages() %}
          <a href="{{ paginator.next_page_url() }}" rel="next" aria-label="Next &raquo;" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50">&rsaquo;</a>
        {% else %}
          <span aria-disabled="true" aria-label="Next &raquo;" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-400 bg-white border border-gray-300 cursor-default rounded-r-md">&rsaquo;</span>
        {% endif %}
      </span>
    </div>
  </div>
</nav>
{% endif %}