{% extends "base.html" %}
{% load i18n %}
{% load comments_tree %}

{% block menu-class-comments %}active{% endblock %}

{% block content %}
<div class="container">
    <div class="row my-4">
        <div class="col-lg-12">
            <h3 class="text-center">{% trans "List of comments" %}</h3>
            <hr/>
        </div>

        <div class="row justify-content-center flex-fill">
            <div class="col-md-6">
                <div id="comment-list">
                    {% for comment in object_list %}
                    {% include "django_comments_tree/comment.html" %}
                    {% empty %}
                    <p class="text-center">No comments yet.</p>
                    {% endfor %}
                </div>

                <!-- pagination -->
                <ul class="pagination justify-content-center">
                    <li class="page-item{% if not page_obj.has_previous %} disabled{% endif %}">
                        <a class="page-link" href="{{ url }}?page={% if page_obj.has_previous %}{{ page_obj.previous_page_number }}{% endif %}">&laquo;</a>
                    </li>
                    {% for page_number in page_range %}
                    <li class="page-item{% if page_number == page_obj.number %} active{% endif %}">
                        <a class="page-link" href="{{ url }}?page={{ page_number }}">{{ page_number }}</a>
                    </li>
                    {% endfor %}
                    <li class="page-item{% if not page_obj.has_next %} disabled{% endif %}">
                        <a class="page-link" href="{{ url }}?page={% if page_obj.has_next %}{{ page_obj.next_page_number }}{% endif %}">&raquo;</a>
                    </li>
                </ul>
                <!-- pagination -->
            </div>
        </div>
    </div>
</div>
{% endblock %}
