{% if total_pages is defined and total_pages > 1 %}
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
    <!-- Page info and size selector -->
    <div class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
        <span>Page {{ current_page|default(1) }} of {{ total_pages|default(1) }}</span>
        <div class="flex items-center gap-2">
            <label>Show:</label>
            <select onchange="changePageSize(this.value)" class="bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-2 py-1 text-gray-900 dark:text-gray-100">
                <option value="10" {% if limit == 10 %}selected{% endif %}>10</option>
                <option value="20" {% if limit == 20 %}selected{% endif %}>20</option>
                <option value="50" {% if limit == 50 %}selected{% endif %}>50</option>
                <option value="100" {% if limit == 100 %}selected{% endif %}>100</option>
            </select>
        </div>
    </div>
    
    <!-- Pagination controls -->
    <div class="flex items-center gap-1">
        <!-- First page -->
        {% if current_page > 1 %}
        <button onclick="loadPage(1)" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100">
            First
        </button>
        {% endif %}
        
        <!-- Previous -->
        {% if current_page > 1 %}
        <button onclick="loadPage({{ current_page - 1 }})" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100">
            Previous
        </button>
        {% endif %}
        
        <!-- Page numbers -->
        {% set start_page = [1, current_page - 2]|max %}
        {% set end_page = [total_pages, current_page + 2]|min %}
        
        {% if start_page > 1 %}
        <button onclick="loadPage(1)" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100">
            1
        </button>
        {% if start_page > 2 %}
        <span class="px-2 text-gray-500 dark:text-gray-400">...</span>
        {% endif %}
        {% endif %}
        
        {% for page in range(start_page, end_page + 1) %}
        <button onclick="loadPage({{ page }})" 
                class="px-3 py-1 text-sm border rounded text-gray-900 dark:text-gray-100 
                {% if page == current_page %}
                bg-primary-500 border-primary-500 text-white
                {% else %}
                bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600
                {% endif %}">
            {{ page }}
        </button>
        {% endfor %}
        
        {% if end_page < total_pages %}
        {% if end_page < total_pages - 1 %}
        <span class="px-2 text-gray-500 dark:text-gray-400">...</span>
        {% endif %}
        <button onclick="loadPage({{ total_pages }})" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100">
            {{ total_pages }}
        </button>
        {% endif %}
        
        <!-- Next -->
        {% if current_page < total_pages %}
        <button onclick="loadPage({{ current_page + 1 }})" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100">
            Next
        </button>
        {% endif %}
        
        <!-- Last page -->
        {% if current_page < total_pages %}
        <button onclick="loadPage({{ total_pages }})" 
                class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100">
            Last
        </button>
        {% endif %}
    </div>
</div>
{% endif %}