{% load url %}
{% load crispy_forms_tags %}

<div class="card-header flex-shrink-0">
    {% for participant in object.participants.all %}
        {% if participant != request.user %}
            <div class="d-flex w-100 justify-content-start align-items-center">
                <img class="rounded-circle align-middle p-1"
                     src="{{ participant.user_profile.get_mugshot_url }}"
                     alt="User Mugshot" style="height: 2.5rem"/>

                <div class="d-flex flex-column overflow-hidden">
                        <h6 class="m-0">
                            {% if participant.username in muted_usernames %}<s>{% endif %}
                            <b>{{ participant.first_name }}&nbsp;{{ participant.last_name }}</b>&nbsp;(<a
                            href="{{ participant.user_profile.get_absolute_url }}">{{ participant.username }}</a>)
                            {% if participant.username in muted_usernames %}</s>{% endif %}
                        </h6>
                        <small>{{ participant.verification.verification_badge }} {{ participant.user_profile.department }}, {{ participant.user_profile.institution }}, {{ participant.user_profile.country.name }}.</small>
                </div>

                <div class="ml-auto">
                    <div class="dropdown">
                        <button class="btn btn-link dropdown-toggle btn-sm"
                                type="button"
                                id="dropdown-menu-{{ participant.pk }}"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdown-menu-{{ participant.pk }}">
                            {% if participant.username in muted_usernames %}
                                <form method="post"
                                      hx-post="{% url 'direct-messages:mute-delete' username=participant.username %}"
                                      hx-target="#conversation-detail-panel">
                                    {% csrf_token %}
                                    <input type="hidden" name="conversation" value="{{ object.pk }}">
                                    <button class="dropdown-item"
                                            type="submit"
                                            value="Unlock"><i class="fas fa-comment text-success"></i> Unblock User
                                    </button>
                                </form>
                            {% else %}
                                <form method="post"
                                      hx-post="{% url 'direct-messages:mute-create' username=participant.username %}"
                                      hx-target="#conversation-detail-panel">
                                    {% csrf_token %}
                                    <input type="hidden" name="source" value="{{ request.user.pk }}" disabled="">
                                    <input type="hidden" name="target" value="{{ participant.pk }}" disabled="">
                                    <input type="hidden" name="conversation" value="{{ object.pk }}">
                                    <button class="dropdown-item"
                                            type="submit"
                                            value="Block"><i class="fas fa-comment-slash text-danger"></i> Block User
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>

<div id="conversation-direct-messages-panel"
     class="card-body overflow-auto flex-grow-1"
     data-conversation-select-detail-url="{% url 'direct-messages:conversation-select-detail' pk=object.pk %}"
     data-conversation-select-button-selector="#conversation-select-button-{{ object.pk }}">
    {% for direct_message in object.direct_messages.all %}
        {% ifchanged direct_message.created.date %}
            <hr>
            <div class="d-flex w-100 justify-content-center">
                <h6>{{ direct_message.created.date }}</h6>
            </div>
        {% endifchanged %}

        {% ifchanged direct_message.sender direct_message.created.date %}
            <div class="d-flex w-100 justify-content-between">
                <h6>
                    <img class="rounded-circle align-middle"
                         src="{{ direct_message.sender.user_profile.get_mugshot_url }}"
                         alt="User Mugshot"
                         style="height: 1.33em"/>&nbsp;
                    {% if direct_message.sender.username in muted_usernames %}<s>{% endif %}
                    <b>{{ direct_message.sender.first_name }}&nbsp;{{ direct_message.sender.last_name }}</b>&nbsp;(<a href="{{ direct_message.sender.user_profile.get_absolute_url }}">{{ direct_message.sender.username }}</a>)
                    {% if direct_message.sender.username in muted_usernames %}</s>{% endif %}
                </h6>
                <span>{{ direct_message.created|time }}</span>
            </div>
        {% endifchanged %}

        <div class="d-flex w-100 justify-content-start">
            {% if direct_message.unread_by_user %}
                <span class="text-danger"><i class="fa fa-xs fa-circle"></i></span>&nbsp;
            {% endif %}

            <div>
                {% include "direct_messages/partials/directmessage_detail.html" with preview=False %}
            </div>

            <div class="ml-auto">
                {% if direct_message.sender == request.user and not direct_message.is_deleted %}
                    <div class="dropdown">
                        <button class="btn btn-link dropdown-toggle btn-sm"
                                type="button"
                                id="dropdown-menu-{{ direct_message.pk }}"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdown-menu-{{ direct_message.pk }}">
                            <form method="post"
                                  hx-post="{% url 'direct-messages:direct-message-delete' conversation_pk=object.pk pk=direct_message.pk %}"
                                  hx-target="#conversation-detail-panel">
                                {% csrf_token %}
                                <button class="dropdown-item"
                                    type="submit"
                                    value="Delete"><i class="far fa-trash-alt text-danger"></i> Delete Message
                                </button>
                            </form>
                        </div>
                    </div>
                {% elif direct_message.sender != request.user and not direct_message.is_deleted and not direct_message.is_reported_as_spam and not direct_message.sender.username in muted_usernames %}
                    <div class="dropdown">
                        <button class="btn btn-link dropdown-toggle btn-sm"
                                type="button"
                                id="dropdown-menu-{{ direct_message.pk }}"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false">
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdown-menu-{{ direct_message.pk }}">
                            <form method="post"
                                  hx-post="{% url 'direct-messages:direct-message-report-spam' conversation_pk=object.pk pk=direct_message.pk %}"
                                  hx-target="#conversation-detail-panel">
                                {% csrf_token %}
                                {{ report_spam_form }}
                                <button class="dropdown-item"
                                    type="submit"
                                    value="Report Spam"><i class="fas fa-ban text-danger"></i> Report Message as Junk
                                </button>
                            </form>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>

    {% endfor %}
</div>

<div class="card-footer flex-shrink-0">
    {% crispy direct_message_form %}
</div>