{% extends "pictures/base.html" %}

{% block content %}
    {% for message in messages %}
        <div class="message">
            <div class="picture-preview">
                {% if message.media_files.first %}
                    <img src="{{ message.media_files.first.file.url }}" alt="">
                {% else %}
                    <div class="filler"></div>
                {% endif %}
            </div>
            <div class="content-block">
                <div class="metadata">
                    <div class="name">De: {{ message.sender.display_name }}</div>
                    <div class="date">{{ message.received_at }}</div>
                </div>
                <div class="text">{{ message.content | linebreaks }}</div>
            </div>
        </div>
    {% endfor %}
{% endblock %}