picture-display/src/pictures/templates/pictures/messages-detail.html

{% 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>
    <a onclick="sendByEmail()" id="bottom-left"><i class="fas fa-paper-plane"></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>
        <div class="media">
            {% for media in message.media_files.all %}
                {% include "pictures/snippets/media.html" %}
            {% endfor %}
        </div>
        <p class="text">{{ message.content | linebreaks }}</p>
    </div>

    <script async defer src="{% static "pictures/email.js" %}"></script>
{% endblock %}