{% load url %}

<div class="d-flex w-100 justify-content-between">
    <h6 class="mb-1">
        {% for participant in object.participants.all %}
            {% if participant != request.user %}
                <img class="rounded-circle align-middle"
                     src="{{ participant.user_profile.get_mugshot_url }}"
                     alt="User Mugshot" style="height: 1.33em"/>&nbsp;
                {% if participant.username in muted_usernames %}<s>{% endif %}
                <b>{{ participant.first_name }}&nbsp;{{ participant.last_name }}</b>&nbsp;({{ participant.username }})
                {% if participant.username in muted_usernames %}</s>{% endif %}
            {% endif %}
        {% endfor %}
    </h6>

    {% if object.unread_by_user %}
        <span class="text-danger">
                <i class="fa fa-xs fa-circle"></i>
            </span>
    {% endif %}
</div>

<div class="d-flex w-100 justify-content-start mb-1 text-nowrap" style="height: 1.33rem;">
    {% if object.direct_messages.first and object.direct_messages.first.sender.username not in muted_usernames %}
        <p>
        {% if object.direct_messages.first.sender == request.user %}
            You:&nbsp;
        {% else %}
            {{ object.direct_messages.first.sender.first_name }}:&nbsp;
        {% endif %}
        </p>
    {% endif %}
    {% include "direct_messages/partials/directmessage_detail.html" with direct_message=object.direct_messages.first preview=True %}
</div>

<small>{{ object.direct_messages.first.created }}</small>

{% if object.unread_by_user %}
    <form class="conversation-mark-read-form"
          action="{% url 'direct-messages:conversation-mark-read' pk=object.pk %}"
          method="post">
        {% csrf_token %}
    </form>
{% endif %}