{% if posts.paginator.num_pages > 1 %}
    <div class="container mx-auto">
        <div class="pagination flex items-center w-full justify-center gap-1 [&>li>a]:rounded [&>li>a]:bg-black [&>li>a]:text-white [&>li>a]:px-2 [&>li>a]:py-1 [&>li>a]:font-bold [&>li>span]:rounded [&>li>span]:bg-black [&>li>span]:text-white [&>li>span]:px-2 [&>li>span]:py-1 [&>li>span]:font-bold [&>li>span]:bg-opacity-75">
            {% if posts.has_previous %}
            <li class="list-none flex gap-0.5">
                <a href="?page=1" class="page-link" title="First">
                    <span> << </span>
                </a>
                <a href="?page={{ posts.previous_page_number }}" class="" title="Previous"><</a>

            </li>
            {% else %}
            <li class="list-none flex gap-0.5">
                <span title="First">
                    <span> << </span>
                </span>
                <span title="Previous"><</span>

            </li>
            {% endif %}

            <span class="current rounded bg-gray-900 text-white px-2 py-1 font-bold">
                Page {{ posts.number }} of {{ posts.paginator.num_pages }}
            </span>
            <!-- {% for page_num in posts.paginator.page_range %}
            <li class="page-item {% if page_num == posts.number %} active{% endif %}">
                <a href="?page={{ page_num }}" class="page-link">
                    {{ page_num }}
                </a>
            </li>
            {% endfor %} -->

            {% if posts.has_next %}
            <li class="list-none flex gap-0.5">
                <a href="?page={{ posts.next_page_number }}" title="Next">></a>

                <a href="?page={{ posts.paginator.num_pages }}" class="page-link" title="Last">
                    <span>>></span>
                </a>
            </li>
            {% else %}
            <li class="list-none flex gap-0.5">
                <span title="Next">></span>

                <span title="Last">
                    <span>>></span>
                </span>
            </li>
            {% endif %}
        </div>
    </div>
    {% endif %}