{% load comment_tags %}

<div class="flex w-full items-center justify-center py-2 px-4 text-lg font-medium">
    <div class="flex pt-1">
        {#PREVIOUS PAGE#}
        {% if paginator.has_previous %}
            <span onclick="LoadCommentList({{ paginator.previous_page_number }})" class="pt-3 cursor-pointer">
            {% include 'comment/icons/icon_arrow_backward.html' with class="h-5 w-5 rtl:scale-x-[-1] icon-pagination-light dark:fill-icon-pagination-dark hover:fill-icon-pagination-hover-light dark:hover:fill-icon-pagination-hover-dark" %}
            </span>
        {% endif %}

        {#PAGES#}
        {% get_pagination paginator as pages %}
        {% for page in pages %}
            {% if page == 0 %}
                <span class="py-2">…</span>
            {% elif paginator.number == page %}
                <span class="mx-1 rounded-md px-2 py-2 text-page-current-text-light dark:text-page-current-text-dark bg-page-current-bg-light dark:bg-page-current-bg-dark cursor-default">{{ page }}</span>
            {% else %}
                <span onclick="LoadCommentList({{ page }})" class="mx-1 rounded-md px-2 py-2 text-page-text-light hover:text-page-text-hover-light dark:text-page-text-dark dark:hover:text-page-text-hover-dark cursor-pointer bg-page-bg-light hover:bg-page-bg-hover-light dark:bg-page-bg-dark dark:hover:bg-page-bg-hover-dark">{{ page }}</span>
            {% endif %}
        {% endfor %}

        {#NEXT PAGE#}
        {% if paginator.has_next %}
            <span onclick="LoadCommentList({{ paginator.next_page_number }})" class="pt-3 cursor-pointer">
            {% include 'comment/icons/icon_arrow_forward.html' with class="h-5 w-5 rtl:scale-x-[-1] icon-pagination-light dark:fill-icon-pagination-dark hover:fill-icon-pagination-hover-light dark:hover:fill-icon-pagination-hover-dark" %}
            </span>
        {% endif %}
    </div>
</div>