thrillwiki_django_no_react/backend/templates/cotton/ui/pagination.html

{% comment %}
Cotton Pagination Component
Converts existing pagination component to use Django Cotton's component system
{% endcomment %}

<!-- Cotton Pagination Component -->
<c-vars
  page_obj="page_obj"
  pagination_classes="pagination_classes|default:''"
  show_page_info="show_page_info|default:'true'"
/>

{% if page_obj %}
<div class="flex items-center justify-between px-2 {{ pagination_classes }}">
  <!-- Mobile Navigation -->
  <div class="flex-1 flex justify-between sm:hidden">
    {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}" 
       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:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
      Previous
    </a>
    {% else %}
    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-500 dark:border-gray-600">
      Previous
    </span>
    {% endif %}
    
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}" 
       class="ml-3 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:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
      Next
    </a>
    {% else %}
    <span class="ml-3 relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-500 dark:border-gray-600">
      Next
    </span>
    {% endif %}
  </div>
  
  <!-- Desktop Navigation -->
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <!-- Page Info (Optional) -->
    {% if show_page_info and show_page_info != '' %}
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium">{{ page_obj.start_index }}</span>
        to
        <span class="font-medium">{{ page_obj.end_index }}</span>
        of
        <span class="font-medium">{{ page_obj.paginator.count }}</span>
        results
      </p>
    </div>
    {% else %}
    <div></div>
    {% endif %}
    
    <!-- Page Numbers (Always Visible) -->
    <div>
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <!-- Previous Page -->
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}" 
           class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
          <span class="sr-only">Previous</span>
          <i class="fas fa-chevron-left h-5 w-5"></i>
        </a>
        {% else %}
        <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-600">
          <span class="sr-only">Previous</span>
          <i class="fas fa-chevron-left h-5 w-5"></i>
        </span>
        {% endif %}
        
        <!-- Page Numbers Logic -->
        {% for num in page_obj.paginator.page_range %}
          {% if page_obj.number == num %}
          <span class="relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700">
            {{ num }}
          </span>
          {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
          <a href="?page={{ num }}" 
             class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
            {{ num }}
          </a>
          {% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %}
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">
            ...
          </span>
          {% endif %}
        {% endfor %}
        
        <!-- Next Page -->
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" 
           class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
          <span class="sr-only">Next</span>
          <i class="fas fa-chevron-right h-5 w-5"></i>
        </a>
        {% else %}
        <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-600">
          <span class="sr-only">Next</span>
          <i class="fas fa-chevron-right h-5 w-5"></i>
        </span>
        {% endif %}
      </nav>
    </div>
  </div>
</div>
{% endif %}