183 lines
9.6 KiB
HTML
183 lines
9.6 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ message.subject }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto py-6 px-4">
|
|
|
|
<!-- Message Header Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
|
<!-- Header with gradient background -->
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start gap-4">
|
|
<div>
|
|
<h1 class="text-xl sm:text-2xl font-bold mb-2">{{ message.subject }}</h1>
|
|
{% if message.parent_message %}
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold"
|
|
style="background-color: rgba(157, 34, 53, 0.1); color: #9d2235;">
|
|
{% trans "Reply" %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{% url 'message_reply' message.id %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="reply" class="w-4 h-4"></i>
|
|
{% trans "Reply" %}
|
|
</a>
|
|
{% if message.recipient == request.user %}
|
|
<button type="button"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border-2 border-yellow-500 text-yellow-600 hover:bg-yellow-50 transition-all duration-200">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
{% trans "Mark Unread" %}
|
|
</button>
|
|
{% endif %}
|
|
<a href="{% url 'message_list' %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Back" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Details -->
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<span class="text-sm text-gray-500 block mb-1">{% trans "From:" %}</span>
|
|
<span class="font-semibold" style="color: #9d2235;">
|
|
{{ message.sender.get_full_name|default:message.sender.username }}
|
|
</span>
|
|
<div class="text-gray-500 text-sm">{{ message.sender.email }}</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm text-gray-500 block mb-1">{% trans "To:" %}</span>
|
|
<span class="font-semibold">{{ message.recipient.get_full_name|default:message.recipient.username }}</span>
|
|
<div class="text-gray-500 text-sm">{{ message.recipient.email }}</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm text-gray-500 block mb-1">{% trans "Type:" %}</span>
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold"
|
|
style="background-color: rgba(157, 34, 53, 0.1); color: #9d2235;">
|
|
{{ message.get_message_type_display }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm text-gray-500 block mb-1">{% trans "Status:" %}</span>
|
|
{% if message.is_read %}
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
|
|
{% trans "Read" %}
|
|
</span>
|
|
{% if message.read_at %}
|
|
<span class="text-gray-500 text-xs ml-2">({{ message.read_at|date:"M d, Y H:i" }})</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
|
|
{% trans "Unread" %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<span class="text-sm text-gray-500 block mb-1">{% trans "Created:" %}</span>
|
|
<span class="font-semibold">{{ message.created_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
{% if message.job %}
|
|
<div>
|
|
<span class="text-sm text-gray-500 block mb-1">{% trans "Related Job:" %}</span>
|
|
{% if request.user.user_type == "staff" %}
|
|
<a href="{% url 'job_detail' message.job.slug %}"
|
|
class="font-semibold hover:underline transition-colors"
|
|
style="color: #9d2235;">
|
|
{{ message.job.title }}
|
|
</a>
|
|
{% else %}
|
|
<span class="font-semibold">{{ message.job.title }}</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if message.parent_message %}
|
|
<div class="px-4 py-3 rounded-lg" style="background-color: rgba(157, 34, 53, 0.05); border: 1px solid rgba(157, 34, 53, 0.1);">
|
|
<strong class="text-sm">{% trans "In reply to:" %}</strong>
|
|
<a href="{% url 'message_detail' message.parent_message.id %}"
|
|
class="ml-2 hover:underline"
|
|
style="color: #9d2235;">
|
|
{{ message.parent_message.subject }}
|
|
</a>
|
|
<div class="text-gray-500 text-sm mt-2">
|
|
{% trans "From" %} {{ message.parent_message.sender.get_full_name|default:message.parent_message.sender.username }}
|
|
{% trans "on" %} {{ message.parent_message.created_at|date:"M d, Y H:i" }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Content Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
|
<div class="p-6">
|
|
<div class="message-content whitespace-pre-wrap break-words leading-relaxed p-6 rounded-lg"
|
|
style="background-color: #f8f9fa; border: 1px solid #e9ecef;">
|
|
{{ message.content|linebreaks }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Replies Section -->
|
|
{% if message.replies.all %}
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="message-circle" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Replies" %}
|
|
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-semibold text-white"
|
|
style="background-color: #9d2235;">
|
|
{{ message.replies.count }}
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
{% for reply in message.replies.all %}
|
|
<div class="p-4 rounded-lg hover:shadow-md transition-shadow"
|
|
style="background-color: #f8f9fa;">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<span class="font-semibold">{{ reply.sender.get_full_name|default:reply.sender.username }}</span>
|
|
<span class="text-gray-500 text-sm ml-2">{{ reply.created_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold"
|
|
style="background-color: rgba(157, 34, 53, 0.1); color: #9d2235;">
|
|
{{ reply.get_message_type_display }}
|
|
</span>
|
|
</div>
|
|
<div class="whitespace-pre-wrap break-words leading-relaxed mb-3 text-sm">
|
|
{{ reply.content|linebreaks }}
|
|
</div>
|
|
<a href="{% url 'message_reply' reply.id %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="reply" class="w-4 h-4"></i>
|
|
{% trans "Reply" %}
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |