{% for msg in messages_list %}
<div class="chat-message {% if msg.sender == sender %}sent{% else %}received{% endif %}">
    <div class="chat-bubble">
        <strong>{{ msg.sender.get_full_name|default:msg.sender.username }}</strong><br>

        <div class="bubble-content">
            {% if msg.content %}
                {{ msg.content|linebreaksbr }}
            {% endif %}

            {% if msg.image %}
                <div style="margin-top: 6px;">
                    <img src="{{ msg.image.url }}" style="max-width: 200px; border-radius: 6px;" alt="Ảnh đính kèm" />
                </div>
            {% endif %}
        </div>

        <div class="bubble-time">
            {{ msg.timestamp|date:"H:i d/m/Y" }}
        </div>
    </div>
</div>
{% endfor %}