{% load translations %}
{% load i18n %}
{% load permissions %}
{% load icons %}

<div class="container-fluid">
{% for comment in comments %}
<div class="row history-row" id="comments__{{ comment.pk }}">
    <div class="col-xs-2 history-event">
        <strong>{{ comment.get_user_display }}</strong>
        <p class="text-muted">
        {% if comment.resolved %}
        {% trans "Resolved comment" %}
        {% elif comment.unit.is_source %}
        {% trans "Source string comment" %}
        {% else %}
        {% trans "Translation comment" %}
        {% endif %}
        </p>
    </div>
    <div class="col-xs-10 history-data">
        {% perm 'comment.delete' comment as user_can_delete_comment %}
        {% if user_can_delete_comment %}
        <div class="btn-float pull-right flip">
            {% if 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="{% trans "Resolve" %}">{% icon "check.svg" %}</button>
            </form>
            {% endif %}
            <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="{% trans "Mark as spam" %}">{% icon "spam.svg" %}</button>
            {% endif %}
            <button class="btn btn-link red" title="{% trans "Delete" %}">{% icon "delete.svg" %}</button>
            </form>
        </div>
        {% endif %}
        <div class="comment-content{% if comment.resolved %} comment-resolved{% elif comment.unit.is_source %} comment-source{% endif %}">
            {{ comment.comment|markdown }}
            <span class="pull-right flip text-muted">{{ comment.timestamp|naturaltime }}</span>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
{% endfor %}
</div>
