{% extends 'vestlus.html' %}

{% block content %}
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="p-0 breadcrumb bg-light">
            <li class="breadcrumb-item">
                <a href="{% url 'vestlus:chat-index' %}">Chat</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Messages</li>
        </ol>
    </nav>

    <h3 class="title mb-3">Messages</h3>

    {% if not messages.count %}
    <h4 class="p-5 text-muted text-center">No messages yet</h4>
    {% else %}
    {% for message in messages %}
    <div class="col-md-12 mb-1">
        <div class="media pt-3">
            <img data-src="holder.js/32x32?theme=thumb&amp;bg=007bff&amp;fg=007bff&amp;size=1" alt="40x40"
                 class="mr-0 rounded"
                 src="https://github.com/repaus.png"
                 data-holder-rendered="true" style="width: 40px; height: 40px;"
            >
            <div class="media-body pl-3 pb-2 mb-0 small lh-125 border-gray">
                <div class="d-block text-muted mb-2">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div class="sender-and-time">
                            <a href="{{ message.sender.get_absolute_url }}">
                                <strong>{{ message.sender.first_name }} {{ message.sender.last_name }}</strong>
                            </a>
                            <span class="text-small info-time">{{ message.created_at|timesince }} ago</span>
                        </div>

                        <div class="text-muted">
                            <a href="{% url 'vestlus:message-detail' message.slug %}">View message</a>
                            {% if message.sender == request.user %}
                            <span>
                                    <a href="{% url 'vestlus:message-delete' message.slug %}">
                                        <i class="fa fa-trash text-danger"></i>
                                    </a>
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="message-content d-flex justify-content-between align-items-center w-100">
                    {{ message.content }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    {% endif %}
</div>
{% endblock content %}
