You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.1 KiB
85 lines
3.1 KiB
2 weeks ago
|
<!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>
|