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

{% block extend_head %}
    <link rel="stylesheet" href="{% static "pictures/detail.css" %}">
{% endblock %}

{% block buttons %}
    <a href="{% url "messages-list" %}" id="top-left"><i class="fas fa-arrow-left"></i></a>
{% endblock %}

{% block content %}
    <div class="message">
        <div class="metadata">
            <div class="name">De: {{ message.sender.display_name }}</div>
            <div class="date">{{ message.received_at }}</div>
        </div>
        {% for media in message.media_files.all %}
            <img src="{{ media.file.url }}" alt="Photo">
        {% endfor %}
        <p class="text">{{ message.content | linebreaks }}</p>
    </div>
{% endblock %}
