<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Message Detail</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.profile-pic {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
margin-right: 5px;
vertical-align: middle;
}
.message-header, .reply-header {
display: flex;
align-items: center;
}
.message-header img, .reply-header img {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container mt-5">
{% block content %}
{% if user.is_authenticated %}
<div class="card">
<div class="card-header">
<h2>{{ message.subject }}</h2>
</div>
<div class="card-body">
<div class="message-header">
<img src="{{ message.sender.picture.url }}" alt="{{ message.sender.first_name }}" class="profile-pic">
<strong>From: {{ message.sender.first_name }} {{ message.sender.last_name }}</strong>
</div>
<div>
<strong>To:</strong>
{% for receiver in message.receivers.all %}
<img src="{{ receiver.picture.url }}" alt="{{ receiver.first_name }}" class="profile-pic">
{{ receiver.first_name }} {{ receiver.last_name }}{% if not forloop.last %}, {% endif %}
{% endfor %}
</div>
<hr>
<p>{{ message.body }}</p>
{% if message.attachment %}
<p>Attachment: <a href="{{ message.attachment.url }}" download>{{ message.attachment.name }}</a></p>
{% endif %}
</div>
</div>
<hr>
<h3>Replies</h3>
<ul class="list-group">
{% for reply in replies %}
<li class="list-group-item">
<div class="reply-header">
<img src="{{ reply.sender.picture.url }}" alt="{{ reply.sender.first_name }}" class="profile-pic">
<strong>{{ reply.sender.first_name }} {{ reply.sender.last_name }}</strong> <small class="text-muted">at {{ reply.timestamp }}</small>
</div>
<p>{{ reply.body }}</p>
{% if reply.attachment %}
<p>Attachment: <a href="{{ reply.attachment.url }}">{{ reply.attachment.name }}</a></p>
{% endif %}
</li>
{% endfor %}
</ul>
<h3>Add a Reply</h3>
<form method="post" enctype="multipart/form-data" class="mt-3">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Reply</button>
</form>
{% else %}
<p>Please log in to view this message.</p>
{% endif %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>