283 lines
12 KiB
HTML
283 lines
12 KiB
HTML
{% extends "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 %}
|
|
|
|
<!-- First Row: Job, Recipient, Type -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<!-- Job Field -->
|
|
<div>
|
|
<label for="{{ form.job.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Related Job" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i data-lucide="briefcase" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
|
|
{{ form.job }}
|
|
</div>
|
|
{% if form.job.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.job.errors.0 }}</div>
|
|
{% endif %}
|
|
<p class="text-gray-500 text-xs mt-1">
|
|
{% trans "Select a job if this message is related to a specific position" %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Recipient Field -->
|
|
<div>
|
|
<label for="{{ form.recipient.id_for_label }}" 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>
|
|
{{ form.recipient }}
|
|
</div>
|
|
{% if form.recipient.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.recipient.errors.0 }}</div>
|
|
{% endif %}
|
|
<p class="text-gray-500 text-xs mt-1">
|
|
{% trans "Select user who will receive this message" %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Message Type Field -->
|
|
<div>
|
|
<label for="{{ form.message_type.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Message Type" %} <span class="text-red-500">*</span>
|
|
</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>
|
|
{{ form.message_type }}
|
|
</div>
|
|
{% if form.message_type.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.message_type.errors.0 }}</div>
|
|
{% endif %}
|
|
<p class="text-gray-500 text-xs mt-1">
|
|
{% trans "Select type of message you're sending" %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subject Field -->
|
|
<div>
|
|
<label for="{{ form.subject.id_for_label }}" 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>
|
|
{{ form.subject }}
|
|
</div>
|
|
{% if form.subject.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.subject.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Content Field -->
|
|
<div>
|
|
<label for="{{ form.content.id_for_label }}" 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 %}
|
|
<p class="text-gray-500 text-xs mt-1">
|
|
{% trans "Write your message here. You can use line breaks and basic formatting." %}
|
|
</p>
|
|
</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>
|
|
|
|
<style>
|
|
/* Custom styling for form fields */
|
|
select[name="job"],
|
|
select[name="recipient"],
|
|
select[name="message_type"],
|
|
input[name="subject"] {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem 0.75rem 2.75rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
background-color: white;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
select[name="job"]:focus,
|
|
select[name="recipient"]:focus,
|
|
select[name="message_type"]:focus,
|
|
input[name="subject"]:focus {
|
|
outline: none;
|
|
border-color: #9d2235;
|
|
box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
|
|
}
|
|
|
|
select[name="job"]:hover,
|
|
select[name="recipient"]:hover,
|
|
select[name="message_type"]:hover,
|
|
input[name="subject"]:hover {
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
/* Add chevron icons for select dropdowns */
|
|
select[name="job"]::after,
|
|
select[name="recipient"]::after,
|
|
select[name="message_type"]::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
color: #9ca3af;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// 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';
|
|
}
|
|
|
|
// Character counter for subject
|
|
const subjectField = document.getElementById('id_subject');
|
|
const maxLength = 200;
|
|
|
|
if (subjectField) {
|
|
// Add character counter display
|
|
const counter = document.createElement('small');
|
|
counter.className = 'text-gray-500';
|
|
counter.style.float = 'right';
|
|
subjectField.parentNode.appendChild(counter);
|
|
|
|
function updateCounter() {
|
|
const remaining = maxLength - subjectField.value.length;
|
|
counter.textContent = `${subjectField.value.length}/${maxLength} {% trans "characters" %}`;
|
|
if (remaining < 20) {
|
|
counter.className = 'text-yellow-600';
|
|
} else {
|
|
counter.className = 'text-gray-500';
|
|
}
|
|
}
|
|
|
|
subjectField.addEventListener('input', updateCounter);
|
|
updateCounter();
|
|
}
|
|
|
|
// 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 %} |