{% 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" aria-current="page">
                <a href="{% url 'vestlus:channel-list' %}">Channels</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'vestlus:channel-detail' membership.channel.slug %}">
                    {{ membership.channel.name }}
                </a>
            </li>
            <li class="breadcrumb-item active">{{ membership.user }}</li>
        </ol>
    </nav>

    <h2>
        <a href="{{ membership.get_absolute_url }}">
            {{ membership.user.first_name }} {{ membership.user.last_name }}
        </a>
    </h2>

    <!-- Channel Messages -->
    <div class="messages">
        {% if not channel.conversations.count %}
        <h4 class="p-5 text-muted text-center">No messages yet</h4>
        {% else %}
        {% for message in channel.conversations.all %}
        <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">
                    <span class="d-block text-muted">
                        <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>
                    </span>
                    <div class="message-content d-flex justify-content-between align-items-center w-100">
                        {{ message.content }}
                    </div>
                    <div>
                        <a href="#" class="text-small">Reply</a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        {% endif %}
    </div>
</div>
{% endblock %}
