234 lines
12 KiB
HTML
234 lines
12 KiB
HTML
{% extends "portal_base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% if form.instance.pk %}{% trans "Reply to Message" %}{% else %}{% trans "Compose Message" %}{% endif %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-3xl mx-auto py-6 px-4">
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<!-- Header with gradient background -->
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);">
|
|
<h1 class="text-xl sm:text-2xl font-bold flex items-center gap-3">
|
|
{% if form.instance.pk %}
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="reply" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
</div>
|
|
{% trans "Reply to Message" %}
|
|
{% else %}
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="mail" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
</div>
|
|
{% trans "Compose Message" %}
|
|
{% endif %}
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
{% if form.instance.parent_message %}
|
|
<div class="px-4 py-3 rounded-lg mb-6" style="background-color: rgba(157, 34, 53, 0.05); border: 1px solid rgba(157, 34, 53, 0.1);">
|
|
<strong class="text-sm">{% trans "Replying to:" %}</strong> {{ form.instance.parent_message.subject }}
|
|
<br>
|
|
<small class="text-gray-500">
|
|
{% trans "From" %} {{ form.instance.parent_message.sender.get_full_name|default:form.instance.parent_message.sender.username }}
|
|
{% trans "on" %} {{ form.instance.parent_message.created_at|date:"M d, Y H:i" }}
|
|
</small>
|
|
<div class="mt-2">
|
|
<strong class="text-sm">{% trans "Original message:" %}</strong>
|
|
<div class="mt-2 pl-3" style="border-left: 3px solid #9d2235;">
|
|
{{ form.instance.parent_message.content|linebreaks }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" id="messageForm" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Subject Field -->
|
|
<div>
|
|
<label for="id_subject" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Subject" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i data-lucide="type" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
|
|
<input type="text"
|
|
name="subject"
|
|
id="id_subject"
|
|
value="{{ form.subject.value|default:'' }}"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Enter message subject' %}"
|
|
maxlength="200"
|
|
required>
|
|
</div>
|
|
<div class="text-right mt-1">
|
|
<small id="subjectCounter" class="text-gray-500">0/200 {% trans "characters" %}</small>
|
|
</div>
|
|
{% if form.subject.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.subject.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Recipient Field -->
|
|
<div>
|
|
<label for="id_recipient" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Recipient" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
|
|
<select name="recipient"
|
|
id="id_recipient"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition appearance-none cursor-pointer"
|
|
style="background-color: white;"
|
|
required>
|
|
<option value="">{% trans "Select a recipient" %}</option>
|
|
{% for recipient in form.fields.recipient.queryset %}
|
|
<option value="{{ recipient.pk }}" {% if form.recipient.value == recipient.pk|slugify %}selected{% endif %}>
|
|
{{ recipient.get_full_name|default:recipient.username }} ({{ recipient.email }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<i data-lucide="chevron-down" class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
|
|
</div>
|
|
{% if form.recipient.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.recipient.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Message Type Field -->
|
|
<div>
|
|
<label for="id_message_type" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Message Type" %}
|
|
</label>
|
|
<div class="relative">
|
|
<i data-lucide="tag" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
|
|
<select name="message_type"
|
|
id="id_message_type"
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition appearance-none cursor-pointer"
|
|
style="background-color: white;">
|
|
{% for value, label in form.fields.message_type.choices %}
|
|
<option value="{{ value }}" {% if form.message_type.value == value %}selected{% endif %}>
|
|
{{ label }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<i data-lucide="chevron-down" class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
|
|
</div>
|
|
{% if form.message_type.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.message_type.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Content Field -->
|
|
<div>
|
|
<label for="id_content" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Message" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<textarea name="content"
|
|
id="id_content"
|
|
rows="8"
|
|
class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition resize-vertical"
|
|
placeholder="{% trans 'Write your message here...' %}"
|
|
style="min-height: 200px;"
|
|
required>{{ form.content.value|default:'' }}</textarea>
|
|
{% if form.content.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.content.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col sm:flex-row justify-between gap-3 pt-4 border-t border-gray-200">
|
|
<a href="{% url 'message_list' %}"
|
|
class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200 sm:flex-1"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="send" class="w-4 h-4"></i>
|
|
{% if form.instance.pk %}
|
|
{% trans "Send Reply" %}
|
|
{% else %}
|
|
{% trans "Send Message" %}
|
|
{% endif %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Character counter for subject
|
|
const subjectField = document.getElementById('id_subject');
|
|
const subjectCounter = document.getElementById('subjectCounter');
|
|
const maxLength = 200;
|
|
const charsLabel = "{% trans 'characters' %}";
|
|
|
|
if (subjectField && subjectCounter) {
|
|
function updateCounter() {
|
|
const remaining = maxLength - subjectField.value.length;
|
|
subjectCounter.textContent = `${subjectField.value.length}/${maxLength} ${charsLabel}`;
|
|
if (remaining < 20) {
|
|
subjectCounter.className = 'text-yellow-600';
|
|
} else {
|
|
subjectCounter.className = 'text-gray-500';
|
|
}
|
|
}
|
|
subjectField.addEventListener('input', updateCounter);
|
|
updateCounter();
|
|
}
|
|
|
|
// Auto-resize textarea based on content
|
|
const textarea = document.getElementById('id_content');
|
|
if (textarea) {
|
|
textarea.addEventListener('input', function() {
|
|
this.style.height = 'auto';
|
|
this.style.height = (this.scrollHeight) + 'px';
|
|
});
|
|
|
|
// Set initial height
|
|
textarea.style.height = 'auto';
|
|
textarea.style.height = (textarea.scrollHeight) + 'px';
|
|
}
|
|
|
|
// Form validation before submit
|
|
const form = document.getElementById('messageForm');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const content = document.getElementById('id_content').value.trim();
|
|
const subject = document.getElementById('id_subject').value.trim();
|
|
const recipient = document.getElementById('id_recipient').value;
|
|
|
|
if (!recipient) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please select a recipient.' %}");
|
|
return false;
|
|
}
|
|
|
|
if (!subject) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a subject.' %}");
|
|
return false;
|
|
}
|
|
|
|
if (!content) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a message.' %}");
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |