{% load i18n %}
{% load comments %}
{% load comments_ink %}

{% with anchor=comment|get_anchor %}
<div id="comment-{{ comment.id }}" class="comment-box py16 px0 {% comment_css_thread_range comment %}">
  {{ comment.level|indent_divs }}
  <div class="comment">
    <div class="header flex-align-center">
      {% if not comment.is_removed and comment_votes_enabled and comment.level == 0 %}
        <div class="flex-align-center pl2 pr24" id="cm-votes-{{ comment.id }}">
          {% include "comments/themes/avatar_in_header/comment_votes.html" %}
        </div>
      {% endif %}
      <div class="user-avatar flex-align-center">
        {% get_user_avatar_or_gravatar comment.user_email "36,identicon" %}
      </div>
      <div class="flex-grow py0 px16">
        {% if comment.url and not comment.is_removed %}<a href="{{ comment.url }}" target="_new">{{ comment.name }}</a>{% else %}{{ comment.name }}{% endif %}<br/>
        <span class="muted smaller">{{ comment.submit_date }}</span>&nbsp;&nbsp;<a class="permalink" title="comment permalink" href="{% get_inkcomment_permalink comment None cfold %}">¶</a>
      </div>
      <div id="cm-feedback-{{ comment.id }}" class="feedback flex-col">
        {% if not comment.is_removed and comment_reactions_enabled %}
          <div class="flex-row-right">
            <div class="reactions" id="cm-reactions-{{ comment.id }}">
              {% include "comments/themes/avatar_in_header/comment_reactions.html" %}
            </div>
            {% if is_input_allowed %}
              <div>
                <a data-dci="reactions-panel" data-comment="{{ comment.id }}" class="smaller" data-user-auth="{{ user.is_authenticated }}" href="{% url 'comments-ink-react' comment.id %}?{{ comments_page_qs_param }}={{ page_obj.number }}" {% if not user.is_authenticated %}data-login-next="{% get_inkcomment_permalink comment None cfold %}"{% endif %}>{% trans "React" %}</a>
              </div>
            {% endif %}
          </div>
        {% endif %}

        <div class="flex-row-right">
          {% if comment.level == 0 and comment.nested_count and not comment.is_removed %}
            <div class="sepseq">
              <span id="comment-{{ comment.id}}-replies" data-dci="nreplies" data-comment="{{ comment.id }}" class="smaller">{% blocktrans count replies=comment.nested_count%}One reply{% plural %}{{ replies }} replies{% endblocktrans %}</span>
              {% if cfold|has_comment:comment %}<a href="?{% render_qs_params unfold comment %}#{{ anchor }}" class="rotate180">&mapstoup;</a>{% else %}<a href="?{% render_qs_params fold comment %}#{{ anchor }}" class="rotate180">&mapstodown;</a>{% endif %}
            </div>
          {% elif comment.level != 0 and comment.nested_count and not comment.is_removed %}
            <div class="sepseq">
              <span id="comment-{{ comment.id}}-replies" data-dci="nreplies" data-comment="{{ comment.id }}" class="smaller">{% blocktrans count replies=comment.nested_count%}One reply{% plural %}{{ replies }} replies{% endblocktrans %}</span>
              <a href="#" id="fold-{{ comment.id}}" data-dci-action="fold" data-dci-replies="{{ comment.nested_count }}" class="rotate180 hide">&mapstodown;</a><a href="#" id="unfold-{{ comment.id}}" data-dci-action="unfold" data-dci-replies="{{ comment.nested_count }}" class="rotate180 hide">&mapstoup;</a>
            </div>
          {% endif %}

          {% if not comment.is_removed and comment_flagging_enabled and is_input_allowed %}
            <div id="cm-flags-{{ comment.id }}">{% include "comments/comment_flags.html" %}</div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="body">
      {% if comment.is_removed %}
        <p class="muted">
          {% trans "This comment has been removed." %}
        </p>
      {% else %}
        {{ comment.comment|linebreaks|escape }}
      {% endif %}
    </div>
  </div>
</div>
{% endwith %}
