{% extends "core/article_page.html" %}
{% load wagtailcore_tags mptt_tags molo_commenting_tags gem_tags %}
{% block title %}{% trans "Comments" %} - {{ self.title}}{% endblock %}
{% block content %}
<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 class="breadcrumbs breadcrumbs--comments">
    <ul class="breadcrumbs-list">
      {% comment %}
        <!--
        <li class="breadcrumbs-list__item">
          <p class="breadcrumbs-list__label">{% trans "Breadcrumbs" %}:</p>
        </li>
        -->
      {% endcomment %}
      <li class="breadcrumbs-list__item">
        <a href="{% pageurl self.get_parent_section.specific %}" class="breadcrumbs-list__anchor">
          {{ self.get_parent_section }}
        </a>
      </li>
      <li class="breadcrumbs-list__item">
        <a href="{% pageurl self.specific %}" class="breadcrumbs-list__anchor">{{ self }}</a>
      </li>
      <li class="breadcrumbs-list__item">
        <p class="breadcrumbs-list__current">{% trans "Comments" %}</p>
      </li>
    </ul>
  </div>
  <div class="comments {% if self.get_parent_section.get_effective_extra_style_hints %}comments--{{self.get_parent_section.get_effective_extra_style_hints}}{% endif %}">
    <div class="comments__wrapper">
      <h1 class="heading__headline">{{self.title}}</h1>
      <div class="heading heading--secondary">
        <h4 class="heading__component">
          {% trans "Comments" %}
        </h4>
      </div>
      <div id="comments-list" class="comments-list">
      {% for node in comments %}
        {% 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 %}
              {% if truncate_comment %}
                <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 "Read more" %}</a>
                {% endif %}
              {% else %}
                <p class="comments__content">{{ node.comment }}</p>
              {% 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 page.paginator.num_pages > 1 %}
        <div class="pagination">
          {% if page.has_previous %}
            <a href="?p={{ page.previous_page_number }}" class="call-to-action__button call-to-action__button--previous">
              {% trans "Previous" %}
            </a>
          {% endif %}
          <p class="call-to-action__item--text call-to-action__item--text-current">
            {% trans "Page" %} {{ page.number }} {% trans "of" %}
            {{ page.paginator.num_pages }}
          </p>
          {% if page.has_next %}
            <a href="?p={{ page.next_page_number }}" class="call-to-action__button call-to-action__button--next">
              {% trans "Newer" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
      <div class="call-to-action--group">
        <a href="{% pageurl self.specific %}" class="call-to-action__button call-to-action__button--previous">
          {% trans "Back to article" %}
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}