{% load comments mptt_tags molo_commenting_tags gem_tags %}
{% if self.is_commenting_enabled %}
<div class="comments__container {% if self.get_parent_section.get_effective_extra_style_hints %}comments__container--{{self.get_parent_section.get_effective_extra_style_hints}}{% endif %}">
  <div id="comments" class="comments">
    <div class="comments__wrapper">
      <div class="heading heading--secondary">
        <h4 class="heading__component">
          {% trans "Post a comment" %}
        </h4>
      </div>
      {% if self.allow_commenting %}
        {% if request.user.is_authenticated %}
          {% render_comment_form for self %}
        {% else %}
          <p class="comments__notice">
            {% trans "To post a comment you must log in or create an account" %}.
          </p>
          <div class="call-to-action--group">
            <a href="{{ LOGIN_URL }}?next={{request.path}}" class="call-to-action__button call-to-action__button--primary">
              {% trans "Please log in to comment" %}
            </a>
          </div>
        {% endif %}
      {% else %}
        <p class="comments__notice">
          {% trans "Commenting on this article is currently disabled" %}.
        </p>
      {% endif %}
    </div>

    {% get_comment_count for self as comment_count %}
    {% if comment_count > 0 %}
      <div class="comments__wrapper">
        {% get_molo_comments for self as comment_list limit 2 child_limit 2 %}
        <div class="heading heading--secondary">
          <h2 class="heading__component">
            {% if comment_count > 1 %}
              {% trans "Comments" %}
            {% else %}
              {% trans "Comment" %}
            {% endif %}
          </h2>
        </div>
        <div id="comments-list" class="comments-list">
          {% for node in comment_list %}
            {% recursetree node %}
            <div class="comments-list__item {% if node.parent == None %} comments-list__item--parent{% endif %}{% if node.parent %} comments-list__item--replies{% endif %}">
              {% if node.parent %}<div class="comments__replies--wrapper">{% endif %}
                <h5 class="comments__alias comments__alias--author">
                  {% if node.user.is_staff %}
                    {% if settings.gem.GemSettings.moderator_name %}
                      {{settings.gem.GemSettings.moderator_name}}
                    {% else %}
                      {% trans "Big Sister" %}
                    {% endif %} - <span class="comments__staff">{% trans "Moderator" %}</span>
                  {% elif node.user_name.lower == 'anonymous' %}
                    {% trans "Anonymous" %}
                  {% else %}
                    {% if not node.user.profile.alias %}
                      {% trans "Anonymous" %}
                    {% else %}
                      {{node.user.profile.alias}}
                    {% endif %}
                  {% endif %}</h5>
                <h6 class="comments__publish-date">
                  {{node.submit_date|timesince}} {% trans "ago" %}
                </h6>
                {% if node.is_removed %}
                  <p class="comments__notice">
                    {% blocktrans %}
                      This comment has been removed by the community.
                      Please read our platform rules
                    {% endblocktrans %}.
                  </p>
                {% else %}
                  <p class="comments__content">{{ node.comment|smarttruncatechars:115 }}</p>
                  {% if node.comment.200 %}
                    <a href="{% url 'molo.commenting:more-comments' self.pk %}" class="call-to-action__item call-to-action__item--reveal">
                      {% trans "See more" %}
                    </a>
                  {% endif %}
                    <div class="comments__reply-meta">
                      {% if not node.user|is_in_admin_group %}
                        <a href="{% url 'report_comment' node.pk %}" class="comments__feedback comments__feedback--report">
                          {% trans "Report" %}</a>
                      {% endif %}
                      {% if node.parent == None %}
                        <a href="{% url 'molo.commenting:molo-comments-reply' node.pk %}#comment-block" class="comments__feedback comments__feedback--reply">
                          {% trans "reply" %}
                        </a>
                        {% if do_not_link_replies or node.get_children.count == 0 %}
                          <p class="comments__feedback comments__feedback--reply-count">
                            {{ node.get_children.count }}
                            {% if node.get_children.count == 0 or node.get_children.count == 1 %}
                              {% trans "reply" %}
                            {% else %}
                              {% trans "replies" %}
                            {% endif %}
                          </p>
                        {% else %}
                          <a href="{% url 'molo.commenting:molo-comments-reply' node.pk %}#comment-block" class="comments__feedback comments__feedback--reply-count">
                           {{ node.get_children.count }}
                           {% if node.get_children.count == 0 or node.get_children.count == 1 %}
                            {% trans "reply" %}
                           {% else %}
                            {% trans "replies" %}
                          {% endif %}
                          </a>
                        {% endif %}
                      {% endif %}
                    </div>
                {% endif %}
                {% if node.parent == None and node.get_children.count != 0 %}
                  <div class="comments__replies-label">
                    <div class="comments__replies--wrapper">
                        <h3 class="comments__replies-title">
                          {% trans "Recent replies" %}
                        </h3>
                    </div>
                  </div>
                {% endif %}
                {{ children }}
              {% if node.parent %}</div>{% endif %}
            </div>
            {% endrecursetree %}
          {% endfor %}
        </div>
        {% if comment_count > 3 %}
          <div class="call-to-action--group">
            <a href="{% url 'molo.commenting:more-comments' self.pk %}" class="call-to-action__button call-to-action__button--primary {{attribute}}">
              {% trans "See all comments" %}</a>
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>
{% endif %}