<div class="space-y-4">
    {% for comment in comments %}
        {% include "gallery/comments/comment_item.html" %}
    {% empty %}
        <div class="bg-gray-900 border border-gray-800 rounded-lg p-8 text-center">
            <p class="text-gray-400">暂无评论，成为第一个评论者吧！</p>
        </div>
    {% endfor %}

    <!-- 分页导航 -->
    {% if comments.paginator.num_pages > 1 %}
        <div class="flex justify-center items-center space-x-2 mt-8">
            {% if comments.has_previous %}
                <a href="?page={{ comments.previous_page_number }}#comments"
                   class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-lg">
                    上一页
                </a>
            {% endif %}

            <span class="text-gray-400">
                第 {{ comments.number }} / {{ comments.paginator.num_pages }} 页
            </span>

            {% if comments.has_next %}
                <a href="?page={{ comments.next_page_number }}#comments"
                   class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-lg">
                    下一页
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>