{% if page_obj.has_other_pages %}
    <ol class="flex justify-center space-x-1 text-xs font-medium">
        {% if page_obj.has_previous %}
            <li>
                <a href="?page={{ page_obj.previous_page_number }}"
                   class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                              clip-rule="evenodd"/>
                    </svg>
                </a>
            </li>
        {% else %}
            <li>
                <button
                   class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                              clip-rule="evenodd"/>
                    </svg>
                </button>
            </li>
        {% endif %}

        {% for i in page_range|default_if_none:page_obj.paginator.get_elided_page_range %}
            {% if page_obj.number == i %}
                <li class="block w-8 h-8 leading-8 text-center text-white bg-blue-600 border-blue-600 rounded-full">{{ i }}</li>
            {% else %}
                {% if i == page_obj.paginator.ELLIPSIS %}
                    <li>
                        <span class="block w-8 h-8 leading-8 text-center border border-gray-100 rounded-full">{{ page_obj.paginator.ELLIPSIS }}</span>
                    </li>
                {% else %}
                    <li>
                        <a href="?page={{ i }}" class="block w-8 h-8 leading-8 text-center border border-gray-100 rounded-full">{{ i }}</a>
                    </li>
                {% endif %}
            {% endif %}
        {% endfor %}
        {% if page_obj.has_next %}
            <li>
                <a href="?page={{ page_obj.next_page_number }}"
                   class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                              clip-rule="evenodd"/>
                    </svg>
                </a>
            </li>
        {% else %}
            <li>
                <button
                   class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                              clip-rule="evenodd"/>
                    </svg>
                </button>
            </li>
        {% endif %}
    </ol>
{% endif %}

{#<ol class="flex justify-center space-x-1 text-xs font-medium">#}
{#    <li>#}
{#        <a href="/?page=1"#}
{#           class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded-full">#}
{#            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">#}
{#                <path fill-rule="evenodd"#}
{#                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"#}
{#                      clip-rule="evenodd"/>#}
{#            </svg>#}
{#        </a>#}
{#    </li>#}
{##}
{#    <li>#}
{#        <a href="/?page=1" class="block w-8 h-8 leading-8 text-center border border-gray-100 rounded-full">#}
{#            1 </a>#}
{#    </li>#}
{##}
{#    <li class="block w-8 h-8 leading-8 text-center text-white bg-blue-600 border-blue-600 rounded-full">2#}
{#    </li>#}
{##}
{#    <li>#}
{#        <a href="/?page=3" class="block w-8 h-8 leading-8 text-center border border-gray-100 rounded-full">#}
{#            3 </a>#}
{#    </li>#}
{##}
{#    <li>#}
{#        <a href="/?page=4" class="block w-8 h-8 leading-8 text-center border border-gray-100 rounded-full">#}
{#            4 </a>#}
{#    </li>#}
{##}
{#    <li>#}
{#        <a href="/?page=3"#}
{#           class="inline-flex items-center justify-center w-8 h-8 border border-gray-100 rounded-full">#}
{#            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">#}
{#                <path fill-rule="evenodd"#}
{#                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"#}
{#                      clip-rule="evenodd"/>#}
{#            </svg>#}
{#        </a>#}
{#    </li>#}
{#</ol>#}