{% set can_comment = request.user.is_authenticated and comment_form and not comment_lock %}
<div id="comments" class="comment-area">
  <h2 id="comment-header">
    <i style="padding-right: 0.3em" class="fa fa-comments"></i>{{ _('Comments') }}
    {% if can_comment %}
      <a href="" id="write-comment" style="float: right; font-size: 0.6em; margin-right: -26px;"> {{ _('Write comment') }} </a>
    {% endif %}
  </h2>
  {% if can_comment %}
    <div id="new-comment" class="form-area comment-submit" style="display: none;" >
      {% block comment_submit_title %}
        <h3>{{ _('New comment') }}</h3>
        <hr>
      {% endblock %}
      {% if is_new_user %}
        <div style="margin-bottom: 0" class="alert alert-info">
          {{ _('You need to have solved at least one problem before your voice can be heard.') }}
        </div>
      {% else %}
        <form class="comment-submit-form" action="" method="post">
          {% csrf_token %}
          {% if comment_form.errors %}
            <div id="form-errors">
              {{ comment_form.non_field_errors() }}
              {{ comment_form.parent.errors }}
              {% if comment_form.body.errors %}{{ _('Invalid comment body.') }}{% endif %}
            </div>
          {% endif %}
          {{ comment_form.parent }}
          <div class="comment-post-wrapper">
            <div id="comment-form-body">{{ comment_form.body }}</div>
          </div>
          <hr>
          <input style="float:right" type="submit" value="{{ _('Post!') }}" class="button">
        </form>
      {% endif %}
    </div>
  {% endif %}
  {% if has_comments or comment_all_list %}
    <ul class="comments top-level-comments new-comments" id="comment-0">
      {% set logged_in = request.user.is_authenticated %}
      {% set profile = request.profile if logged_in else None %}
      {% if comment_all_list %}
      {% for node in mptt_tree(comment_all_list) recursive %}
        <li id="comment-{{ node.id }}" data-revision="{{ node.revisions - 1 }}"
        data-max-revision="{{ node.revisions - 1 }}"
        data-revision-ajax="{{ url('comment_revision_ajax', node.id) }}" class="comment">
          <div class="comment-display{% if node.score <= vote_hide_threshold %} bad-comment{% endif %}">
            <div class="info">
              <div class="vote">
                {% if logged_in %}
                  <a href="javascript:comment_upvote({{ node.id }})"
                    class="upvote-link fa fa-chevron-up fa-fw{% if node.vote_score == 1 %} voted{% endif %}"></a>
                {% else %}
                  <a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')" title="{{ _('Please login to vote') }}"
                    class="upvote-link fa fa-chevron-up fa-fw"></a>
                {% endif %}
                <br>
                <div class="comment-score">{{ node.score }}</div>
                {% if logged_in %}
                  <a href="javascript:comment_downvote({{ node.id }})"
                    class="downvote-link fa fa-chevron-down fa-fw{% if node.vote_score == -1 %} voted{% endif %}"></a>
                {% else %}
                  <a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')" title="{{ _('Please login to vote') }}"
                    class="downvote-link fa fa-chevron-down fa-fw"></a>
                {% endif %}
              </div>
            </div>
            <div class="detail">
              <div class="header">
                {% with author=node.author, user=node.author.user %}
                  <a href="{{ url('user_page', user.username) }}" class="user comment-img">
                    <img src="{{ gravatar(author, 135) }}" class="gravatar">
                  </a>
                {% endwith %}
                {{ link_user(node.author) }},&nbsp;
                {{ relative_time(node.time, abs=_('{time}'), rel=_('{time}')) }}
                <span class="comment-spacer"></span>
                <span class="comment-operation">
                  {% if node.revisions > 1 %}
                    <span class="comment-edits">
                      <a href="javascript:show_revision({{ node.id }}, -1)"
                        class="previous-revision">&larr;</a>
                      <span class="comment-edit-text">
                        {% if node.revisions > 2 %}
                          {% trans edits=node.revisions - 1 %}edit {{ edits }}{% endtrans %}
                        {% else %}
                          {{ _('edited') }}
                        {% endif %}
                      </span>
                      <a href="javascript:show_revision({{ node.id }}, 1)" style="visibility: hidden"
                        class="next-revision">&rarr;</a>
                    </span>
                  {% else %}
                    <span class="comment-edits"></span>
                  {% endif %}
                  <a href="#comment-{{ node.id }}" title="{{ _('Link') }}" class="comment-link">
                    <i class="fa fa-link fa-fw"></i>
                  </a>
                  {% if logged_in and not comment_lock %}
                    {% set can_edit = node.author.id == profile.id and not profile.mute %}
                    {% if can_edit %}
                      <a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
                        href="{{ url('comment_edit', node.id) }}"
                        title="{{ _('Edit') }}" class="edit-link">
                        <i class="fa fa-pencil fa-fw"></i>
                      </a>
                    {% else %}
                      <a href="javascript:reply_comment({{ node.id }})"
                        title="{{ _('Reply') }}">
                        <i class="fa fa-reply fa-fw"></i>
                      </a>
                    {% endif %}
                    {% if perms.judge.change_comment %}
                      {% if can_edit %}
                        <a href="javascript:reply_comment({{ node.id }})"
                          title="{{ _('Reply') }}"><i class="fa fa-reply fa-fw"></i></a>
                      {% else %}
                        <a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
                          href="{{ url('comment_edit', node.id) }}" title="{{ _('Edit') }}"
                          class="edit-link"><i class="fa fa-pencil fa-fw"></i></a>
                      {% endif %}
                      <a href="javascript:" title="{{ _('Hide') }}" data-id="{{ node.id }}"
                        class="hide-comment"><i class="fa fa-trash fa-fw"></i></a>
                      <a href="{{ url('admin:judge_comment_change', node.id) }}"
                        title="{{ _('Admin') }}"><i class="fa fa-cog fa-fw"></i></a>
                    {% endif %}
                  {% endif %}
                </span>
              </div>
              <div class="content content-description">
                <div class="comment-body"{% if node.score <= vote_hide_threshold %} style="display:none"{% endif %}>
                  {{ node.body|markdown(lazy_load=True)|reference|str|safe }}
                </div>
                {% if node.score <= vote_hide_threshold %}
                  <div class="comment-body bad-comment-body">
                    <p>
                      {% trans id=node.id %}This comment is hidden due to too much negative feedback. Click <a href="javascript:comment_show_content({{ id }})">here</a> to view it.{% endtrans %}
                    </p>
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        </li>
        <ul id="comment-{{ node.id }}-reply" class="reply-comment" hidden></ul>
        {% with children=node.get_children() %}
          {% if children %}
            <ul id="comment-{{ node.id }}-children" class="comments">{{ loop(children) }}</ul>
          {% endif %}
        {% endwith %}
      {% endfor %}
      {% set comment_more = comment_count - offset %}
      {% if comment_more == 1 %}
        <a href="javascript:comment_show_more({{ comment_root_id }}, {{ comment_parrent_none }}, {{ offset }}, {{ comment_remove }})" class="show_more_comment">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M6 9l6 6l6 -6"></path>
          </svg>
          {{ comment_count - offset }} {{ _('comment more') }}
        </a>
      {% elif comment_more > 1 %}
        <a href="javascript:comment_show_more({{ comment_root_id }}, {{ comment_parrent_none }}, {{ offset }}, {{ comment_remove }})" class="show_more_comment">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M6 9l6 6l6 -6"></path>
          </svg>
          {{ comment_count - offset }} {{ _('comments more') }}
        </a>
      {% endif %}
    {% else %}
      {% include "comments/content-list.html" %}
    {% endif %}

    </ul>
  {% elif not comment_lock %}
    <p class="no-comments-message">{{ _('There are no comments at the moment.') }}</p>
  {% endif %}

  {% if comment_lock %}
    <div class="alert alert-warning comment-lock">
      {{ _('Comments are disabled on this page.') }}
    </div>
  {% endif %}
</div>