{% extends "core/article_page.html" %}
{% load wagtailcore_tags molo_commenting_tags gem_tags %}
{% 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="comments">
    <div class="comments__wrapper">
      <div class="heading heading--secondary">
        <h4 class="heading__component">
          {% trans "Comments" %}
        </h4>
      </div>
      {% get_comments_content_object for form as self %}
      {% pageurl self as the_url %}
      <div id="comments-list" class="comments-list">
        {% with comment as 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>
            <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 %}
          </div>
          {% 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 %}
        {% endwith %}

        {% if do_not_link_replies or node.get_children.count == 0 %}
          <div class="comments__replies-label">
            <div class="comments__replies--wrapper">
              <h3 class="comments__replies-title">
                {% if page == 1 %}
                  {% trans "Recent replies" %}
                {% else %}
                  {% trans "Earlier replies" %}
                {% endif %}
              </h3>
            </div>
          </div>
        {% endif %}

        {% for node in replies reversed %}
          <div class="comments-list__item {% if node.parent == None %} comments-list__item--parent-comment {% endif %}{% if node.parent %} comments-list__item--replies {% endif %}">
            <div class="comments__replies--wrapper">
              <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-counter">
                        {{ 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">
                        {{ 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 %}
            </div>
            {% if node.parent == None and node.get_children.count != 0 %}
              <h3 class="comments__replies-label">
                {% trans "Recent replies" %}
              </h3>
            {% endif %}
          </div>
        {% endfor %}
      </div>
      {% if replies.paginator.num_pages > 1 %}
        <div class="pagination">
          {% if replies.has_previous %}
            <a href="?p={{ replies.previous_page_number }}" class="call-to-action__button call-to-action__button--previous">{% trans "Previous" %}</a>
          {% endif %}
          <span class="call-to-action__item call-to-action__item--text-current">
            {% trans "Page" %} {{ replies.number }} {% trans "of" %} {{ replies.paginator.num_pages }}
          </span>
          {% if replies.has_next %}
            <a href="?p={{ replies.next_page_number }}" class="call-to-action__button call-to-action__button--previous">{% trans "Newer" %}</a>
          {% endif %}
        </div>
      {% endif %}
    </div>
    <div class="comments__wrapper">
      <div class="heading heading--secondary">
        <h4 class="heading__component">
          {% trans "Add your reply" %}
        </h4>
      </div>
      {% if request.user.is_authenticated %}
        <form id="comment-form" action="{% url 'molo.commenting:molo-comments-post' %}#comments-list" method="post" class="comments__form" novalidate>
        {% csrf_token %}
          <div class="input-group{% if form.comment.errors %} input-error{% endif %}">
            {% if form.errors %}
              <p class="errors">{% trans "Please correct the error below" %}</p>
            {% endif %}
            {{ form.comment }}
            {% if form.comment.errors %}{{ form.comment.errors }}{% endif %}
          </div>
          <div class="call-to-action--group">
            <button type="submit" name="submit" class="call-to-action__button call-to-action__button--primary">
              {% trans "Comment" %}
            </button>
            <button type="submit" name="submit_anonymously" class="call-to-action__button call-to-action__button--primary">
              {% trans "Comment anonymously" %}
            </button>
          </div>
          {{ form.object_pk }}
          {{ form.content_type }}
          {{ form.timestamp }}
          {{ form.security_hash }}
          <input type="hidden" name="next" value="{% pageurl self %}" />
          {% if comment.id %}
          <input type="hidden" name="parent" id="parent_id" value="{{ comment.id }}" />
          {% endif %}
        </form>
      {% else %}
      <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 %}
      <div class="call-to-action--group">
        <a href="{{the_url}}" class="call-to-action__button call-to-action__button--previous">
          {% trans "Back to article" %}
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}