{% load i18n icons permissions translations user_display %}

<div class="container-fluid container-gapped">
  {% for comment in comments %}
    <div class="row history-row" id="comments__{{ comment.pk }}">
      <div class="col-md-3 history-event comment-section">
        <strong>{% user_display comment.user resource=comment %}</strong>
        <p class="text-muted">
          {% if comment.resolved %}
            {% translate "Resolved comment" %}
          {% elif comment.unit.is_source %}
            {% translate "Source string comment" %}
          {% else %}
            {% translate "Translation comment" %}
          {% endif %}
        </p>
      </div>
      {% perm 'comment.delete' comment as user_can_delete_comment %}
      {% perm 'comment.resolve' comment as user_can_resolve_comment %}
      {% if user_can_delete_comment or user_can_resolve_comment %}
        <div class="btn-float">
          {% if user_can_resolve_comment and not comment.resolved %}
            <form method="post"
                  action="{% url 'resolve-comment' pk=comment.pk %}"
                  class="auto-save-translation inlineform">
              {% csrf_token %}
              <input type="hidden" name="next" value="{{ next_url }}#comments__{{ comment.pk }}" />
              <button class="btn btn-link green"
                      title="{% translate "Resolve" %}"
                      type="submit">{% icon "check.svg" %}</button>
            </form>
          {% endif %}
          {% if user_can_delete_comment %}
            <form method="post"
                  action="{% url 'delete-comment' pk=comment.pk %}"
                  class="auto-save-translation inlineform">
              {% csrf_token %}
              <input type="hidden" name="next" value="{{ next_url }}" />
              {% if has_antispam and comment.user != user %}
                <button type="submit"
                        class="btn btn-link red"
                        name="spam"
                        value="{{ suggestion.id }}"
                        title="{% translate "Mark as spam" %}">{% icon "spam.svg" %}</button>
              {% endif %}
              <button class="btn btn-link red"
                      type="submit"
                      title="{% translate "Delete" %}">{% icon "delete.svg" %}</button>
            </form>
          {% endif %}
        </div>
      {% endif %}
      <div class="col-md-9 history-data comment-section">
        <div class="comment-content{% if comment.resolved %} comment-resolved{% elif comment.unit.is_source %} comment-source{% endif %}"
             lang="{{ comment.unit.translation.language.code }}"
             dir="{{ comment.unit.translation.language.direction }}">
          {% user_markdown comment.comment %}
          <span class="float-end text-muted">{{ comment.timestamp|naturaltime }}</span>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>