{% load comments mptt_tags molo_commenting_tags gem_tags %}
{% if self.is_commenting_enabled %}
<div id="comments" class="comments">
  {% if self.allow_commenting %}
    <div class="heading heading__component">
      <h2>{% trans "Share your thoughts" %}</h2>
    </div>
    {% if request.user.is_authenticated %}
      {% render_comment_form for self %}
    {% else %}
      <a href="{{ LOGIN_URL }}?next={{request.path}}" class="call-to-action__button call-to-action__button--primary">
        <span class="call-to-action__button-text call-to-action__button-text--primary">
          {% trans "Log in to comment" %}</span>
      </a>
    {% endif %}
  {% else %}
    <h4 class="comments__title">{% trans "Commenting on this article is currently disabled" %}.</h4>
  {% endif %}

  {% get_comment_count for self as comment_count %}
  {% get_molo_comments for self as comment_list limit 2 child_limit 2 %}
  {% if comment_count > 1 %}
    <div class="heading heading__component">
      <h2>{% trans "Your thoughts" %}</h2>
    </div>
  {% endif %}

  <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-comment{% endif %}{% if node.parent %} comments-list__item--reply{% 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>
          {% if node.is_removed %}
            <h6 class="comments__description">
              {% trans "This comment has been removed by the community. Please read our platform rules." %}
            </h6>
          {% else %}
            <p class="comments__body-small">{{ node.comment|smarttruncatechars:100 }}</p>
            {% if node.comment.200 %}
              <a href="{% url 'molo.commenting:more-comments' self.pk %}" class="call-to-action__nav-item-text call-to-action__nav-item-text--readmore">
              {% trans "Read More"%}</a>
            {% endif %}

            <span class="comments__publish-date">
              {{node.submit_date|timesince}} {% trans "ago" %}
            </span>

            <div class="comments__reply-meta">
              {% if not node.user|is_in_admin_group %}
                <a href="{% url 'report_comment' node.pk %}" class="call-to-action__nav-item-text call-to-action__nav-item-text--report {% if not self.allow_commenting %}call-to-action__nav-item-text--disabled{% endif %}">
                  {% trans "Report" %}
                </a>
              {% endif %}

              {% if node.parent == None %}
                <a href="{% url 'molo.commenting:molo-comments-reply' node.pk %}#comment-block" class="call-to-action__nav-item-text call-to-action__nav-item-text--response {% if not self.allow_commenting %}call-to-action__nav-item-text--disabled{% endif %}">
                  {% trans "Reply"%}
                </a>

                {% if do_not_link_replies or node.get_children.count == 0 %}
                  <p class="call-to-action__nav-item-text call-to-action__nav-item--replies-counter {% if not self.allow_commenting %}call-to-action__nav-item-text--disabled{% endif %}">
                    {{ 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_reply" class="call-to-action__nav-item-text call-to-action__nav-item--replies-counter {% if not self.allow_commenting %}call-to-action__nav-item-text--disabled{% endif %}">
                    {{ 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 %}
          <h3 class="comment__replies-title">{% trans "Recent Replies"%}</h3>
        {% endif %}
        </div>
        {{ children }}
      {% endrecursetree %}
    {% endfor %}


    {% if comment_count > 2 %}
      <a href="{% url 'molo.commenting:more-comments' self.pk %}" class="call-to-action__button call-to-action__button--primary" {{attribute}}>
        <span class="call-to-action__button-text call-to-action__button-text--primary">
          {% trans "Read more comments" %}</span>
      </a>
    {% endif %}

  </div>
</div>
{% endif %}