{% 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">
      <div class="flex-grow py0 pr16">
        {% 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 page_number %}">¶</a>
      </div>
      <div id="cm-feedback-{{ comment.id }}" class="feedback">
        {% if not comment.is_removed %}
          {% if comment_reactions_enabled %}
            <div class="reactions" id="cm-reactions-{{ comment.id }}">
              {% include "comments/themes/feedback_in_header/comment_reactions.html" %}
            </div>
          {% endif %}
          {% if comment_reactions_enabled and is_input_allowed %}
            <div>
              <a data-dci="reactions-panel" data-comment="{{ comment.id }}" class="small" 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 page_number %}{% endif %}">{% trans "React" %}</a>
            </div>
          {% endif %}
        {% endif %}

        {% if comment.level == 0 and comment.nested_count and not comment.is_removed %}
          <div>
            <span id="comment-{{ comment.id}}-replies" data-dci="nreplies" data-comment="{{ comment.id }}" class="small">{% 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>
            <span id="comment-{{ comment.id}}-replies" data-dci="nreplies" data-comment="{{ comment.id }}" class="small">{% 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 %}<a href="{% url 'comments-flag' comment.id %}" class="small">{% trans "Report" %}</a>{% endif %}
      </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 %}
