{% if not hide_if_one_page or page_obj.paginator.num_pages > 1 %}
<div class="flex flex-col justify-center items-center mt-4">
    <div class="flex justify-center items-center space-x-2">
        <!-- First Link -->
        <a href="?page=1" class="btn btn-outline btn-md {% if not page_obj.has_previous %}btn-disabled{% endif %}"
           {% if page_obj.has_previous %}
             @click.prevent="$dispatch('change-page', { page: 1 })"
           {% else %}
             aria-disabled="true" tabindex="-1"
           {% endif %}>
            First
        </a>
        <!-- Previous Link -->
        <a href="?page={% if page_obj.has_previous %}{{ page_obj.previous_page_number }}{% else %}1{% endif %}" class="btn btn-outline btn-md {% if not page_obj.has_previous %}btn-disabled{% endif %}"
           {% if page_obj.has_previous %}
             @click.prevent="$dispatch('change-page', { page: {{ page_obj.previous_page_number }} })"
           {% else %}
             aria-disabled="true" tabindex="-1"
           {% endif %}>
            Prev
        </a>
        <!-- Goto Page -->
        <form method="get" class="flex items-center space-x-1 gap-2">
            <input type="number" name="page" min="1" max="{{ page_obj.paginator.num_pages }}" value="{{ page_obj.number }}"
                   class="input input-xs text-center" title="Enter page number">
            <button type="submit" class="btn btn-outline btn-md" @click.prevent="$dispatch('change-page', { page: parseInt($event.target.form.page.value) })">
                Go
            </button>
        </form>
        <!-- Next Link -->
        <a href="?page={% if page_obj.has_next %}{{ page_obj.next_page_number }}{% else %}{{ page_obj.number }}{% endif %}" class="btn btn-outline btn-md {% if not page_obj.has_next %}btn-disabled{% endif %}"
           {% if page_obj.has_next %}
             @click.prevent="$dispatch('change-page', { page: {{ page_obj.next_page_number }} })"
           {% else %}
             aria-disabled="true" tabindex="-1"
           {% endif %}>
            Next
        </a>
        <!-- Last Link -->
        <a href="?page={{ page_obj.paginator.num_pages }}" class="btn btn-outline btn-md {% if page_obj.number == page_obj.paginator.num_pages %}btn-disabled{% endif %}"
           {% if page_obj.number < page_obj.paginator.num_pages %}
             @click.prevent="$dispatch('change-page', { page: {{ page_obj.paginator.num_pages }} })"
           {% else %}
             aria-disabled="true" tabindex="-1"
           {% endif %}>
            Last
        </a>
    </div>
    <div class="flex items-center justify-center mt-2">
        <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
    </div>
</div>
{% endif %}