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.
76 lines
3.1 KiB
76 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>Messages</title>
|
||
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
.profile-pic {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.message-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container mt-5">
|
||
|
|
{% if user.is_authenticated %}
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<h2>Messages</h2>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<ul class="list-group">
|
||
|
|
{% for message in messages %}
|
||
|
|
<li class="list-group-item">
|
||
|
|
<div class="message-item">
|
||
|
|
<div>
|
||
|
|
<a href="{% url 'message_detail' message.id %}" class="font-weight-bold">{{ message.subject }}</a>
|
||
|
|
<p class="mb-0">
|
||
|
|
<small>
|
||
|
|
From:
|
||
|
|
{% if message.sender.picture %}
|
||
|
|
<img src="{{ message.sender.picture.url }}" alt="Profile Picture" class="profile-pic">
|
||
|
|
{% endif %}
|
||
|
|
{{ message.sender.first_name }} {{ message.sender.last_name }}
|
||
|
|
</small>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<small>
|
||
|
|
To:
|
||
|
|
{% for receiver in message.receivers.all %}
|
||
|
|
{% if receiver.picture %}
|
||
|
|
<img src="{{ receiver.picture.url }}" alt="Profile Picture" class="profile-pic">
|
||
|
|
{% endif %}
|
||
|
|
{{ receiver.first_name }} {{ receiver.last_name }}{% if not forloop.last %}, {% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
</small>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted">{{ message.timestamp|date:"M d, Y h:i A" }}</small>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<a href="{% url 'new_message' %}" class="btn btn-primary">New Message</a>
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<p class="text-danger">Please log in to see your messages.</p>
|
||
|
|
{% endif %}
|
||
|
|
</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>
|