430 lines
22 KiB
HTML
430 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ title }} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
|
|
<!-- Header Card with Gradient Background -->
|
|
<div class="bg-gradient-to-r from-temple-red to-[#7a1a29] rounded-2xl shadow-lg p-6 md:p-8 text-white">
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
|
|
<div class="flex-1">
|
|
<h1 class="text-2xl md:text-3xl font-bold mb-2 flex items-center gap-3">
|
|
<i data-lucide="building" class="w-8 h-8"></i>
|
|
{{ title }}
|
|
</h1>
|
|
<p class="text-white/80 text-sm md:text-base">
|
|
{% if agency %}
|
|
{% trans "Update agency information" %}
|
|
{% else %}
|
|
{% trans "Enter details to create a new agency." %}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% if agency %}
|
|
<a href="{% url 'agency_detail' agency.slug %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white font-medium text-sm transition backdrop-blur-sm touch-target">
|
|
<i data-lucide="eye" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "View Details" %}</span>
|
|
</a>
|
|
<a href="{% url 'agency_delete' agency.slug %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-white font-medium text-sm transition touch-target">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "Delete" %}</span>
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'agency_list' %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white font-medium text-sm transition backdrop-blur-sm touch-target">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "Back to List" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if agency %}
|
|
<!-- Current Agency Info Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
<div class="bg-temple-cream rounded-lg p-4 border-l-4 border-temple-red">
|
|
<h6 class="text-temple-dark font-bold mb-3 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-4 h-4"></i>
|
|
{% trans "Currently Editing" %}
|
|
</h6>
|
|
<div class="space-y-2">
|
|
<h5 class="text-lg font-semibold text-gray-900">{{ agency.name }}</h5>
|
|
{% if agency.contact_person %}
|
|
<p class="text-gray-600 text-sm">{% trans "Contact" %}: {{ agency.contact_person }}</p>
|
|
{% endif %}
|
|
{% if agency.email %}
|
|
<p class="text-gray-600 text-sm">{{ agency.email }}</p>
|
|
{% endif %}
|
|
<p class="text-gray-500 text-xs">
|
|
{% trans "Created" %}: {{ agency.created_at|date:"d M Y" }} •
|
|
{% trans "Last Updated" %}: {{ agency.updated_at|date:"d M Y" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<div class="border-b border-gray-200 px-6 py-4 bg-gray-50 rounded-t-xl">
|
|
<h2 class="text-lg font-bold text-temple-red flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-5 h-5"></i>
|
|
{% trans "Agency Information" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6 md:p-8">
|
|
{% if form.non_field_errors %}
|
|
<div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6" role="alert">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-circle" class="w-5 h-5 text-red-600 shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<h5 class="font-bold text-red-800 mb-1">{% trans "Error" %}</h5>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="text-red-700 text-sm">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" novalidate id="agency-form" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Two Column Form Layout -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Name -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.name.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.name.label }} <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="text"
|
|
name="name"
|
|
id="{{ form.name.id_for_label }}"
|
|
value="{{ form.name.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm"
|
|
placeholder="{% trans 'Agency Name' %}"
|
|
{% if form.name.field.required %}required{% endif %}>
|
|
{% if form.name.errors %}
|
|
{% for error in form.name.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.name.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.name.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Contact Person -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.contact_person.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.contact_person.label }}
|
|
</label>
|
|
<input type="text"
|
|
name="contact_person"
|
|
id="{{ form.contact_person.id_for_label }}"
|
|
value="{{ form.contact_person.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm"
|
|
placeholder="{% trans 'Contact Person' %}">
|
|
{% if form.contact_person.errors %}
|
|
{% for error in form.contact_person.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.contact_person.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.contact_person.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Phone -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.phone.label }}
|
|
</label>
|
|
<input type="tel"
|
|
name="phone"
|
|
id="{{ form.phone.id_for_label }}"
|
|
value="{{ form.phone.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm"
|
|
placeholder="{% trans 'Phone Number' %}">
|
|
{% if form.phone.errors %}
|
|
{% for error in form.phone.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.phone.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.phone.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.email.label }} <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="email"
|
|
name="email"
|
|
id="{{ form.email.id_for_label }}"
|
|
value="{{ form.email.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm"
|
|
placeholder="{% trans 'Email Address' %}"
|
|
{% if form.email.field.required %}required{% endif %}>
|
|
{% if form.email.errors %}
|
|
{% for error in form.email.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.email.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.email.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Website -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.website.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.website.label }}
|
|
</label>
|
|
<input type="url"
|
|
name="website"
|
|
id="{{ form.website.id_for_label }}"
|
|
value="{{ form.website.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm"
|
|
placeholder="{% trans 'Website URL' %}">
|
|
{% if form.website.errors %}
|
|
{% for error in form.website.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.website.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.website.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Country -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.country.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.country.label }}
|
|
</label>
|
|
<input type="text"
|
|
name="country"
|
|
id="{{ form.country.id_for_label }}"
|
|
value="{{ form.country.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm"
|
|
placeholder="{% trans 'Country' %}">
|
|
{% if form.country.errors %}
|
|
{% for error in form.country.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.country.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.country.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- City -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.city.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.city.label }}
|
|
</label>
|
|
<input type="text"
|
|
name="city"
|
|
id="{{ form.city.id_for_label }}"
|
|
value="{{ form.city.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm"
|
|
placeholder="{% trans 'City' %}">
|
|
{% if form.city.errors %}
|
|
{% for error in form.city.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.city.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.city.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address (Full Width) -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.address.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.address.label }}
|
|
</label>
|
|
<textarea
|
|
name="address"
|
|
id="{{ form.address.id_for_label }}"
|
|
rows="3"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm resize-none"
|
|
placeholder="{% trans 'Street Address' %}">{{ form.address.value|default:'' }}</textarea>
|
|
{% if form.address.errors %}
|
|
{% for error in form.address.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.address.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.address.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Description (Full Width) -->
|
|
<div class="space-y-2">
|
|
<label for="{{ form.description.id_for_label }}" class="block text-sm font-semibold text-gray-700">
|
|
{{ form.description.label }}
|
|
</label>
|
|
<textarea
|
|
name="description"
|
|
id="{{ form.description.id_for_label }}"
|
|
rows="4"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition text-sm resize-none"
|
|
placeholder="{% trans 'Agency Description' %}">{{ form.description.value|default:'' }}</textarea>
|
|
{% if form.description.errors %}
|
|
{% for error in form.description.errors %}
|
|
<p class="text-red-600 text-xs mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-3 h-3"></i>
|
|
{{ error }}
|
|
</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if form.description.help_text %}
|
|
<p class="text-gray-500 text-xs">{{ form.description.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="pt-4 border-t border-gray-200">
|
|
<button type="submit"
|
|
class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-3 bg-temple-red hover:bg-[#7a1a29] text-white font-semibold rounded-lg text-sm transition shadow-md hover:shadow-lg transform hover:-translate-y-0.5 touch-target">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{{ button_text }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Reinitialize Lucide icons for dynamically added content
|
|
lucide.createIcons();
|
|
|
|
// Form Validation
|
|
const form = document.getElementById('agency-form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
submitBtn.classList.add('opacity-75', 'cursor-not-allowed');
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = `
|
|
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
{% trans 'Saving...' %}
|
|
`;
|
|
|
|
// Basic validation
|
|
const name = document.getElementById('{{ form.name.id_for_label }}');
|
|
if (name && !name.value.trim()) {
|
|
e.preventDefault();
|
|
submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = `<i data-lucide="save" class="w-4 h-4"></i> {{ button_text }}`;
|
|
lucide.createIcons();
|
|
alert('{% trans "Agency name is required." %}');
|
|
return;
|
|
}
|
|
|
|
const email = document.getElementById('{{ form.email.id_for_label }}');
|
|
if (email && email.value.trim() && !isValidEmail(email.value.trim())) {
|
|
e.preventDefault();
|
|
submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = `<i data-lucide="save" class="w-4 h-4"></i> {{ button_text }}`;
|
|
lucide.createIcons();
|
|
alert('{% trans "Please enter a valid email address." %}');
|
|
return;
|
|
}
|
|
|
|
const website = document.getElementById('{{ form.website.id_for_label }}');
|
|
if (website && website.value.trim() && !isValidURL(website.value.trim())) {
|
|
e.preventDefault();
|
|
submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = `<i data-lucide="save" class="w-4 h-4"></i> {{ button_text }}`;
|
|
lucide.createIcons();
|
|
alert('{% trans "Please enter a valid website URL." %}');
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Email validation helper
|
|
function isValidEmail(email) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
}
|
|
|
|
// URL validation helper
|
|
function isValidURL(url) {
|
|
try {
|
|
new URL(url);
|
|
return true;
|
|
} catch (_) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Warn before leaving if changes are made
|
|
let formChanged = false;
|
|
const formInputs = form ? form.querySelectorAll('input, select, textarea') : [];
|
|
|
|
formInputs.forEach(input => {
|
|
input.addEventListener('change', function() {
|
|
formChanged = true;
|
|
});
|
|
});
|
|
|
|
window.addEventListener('beforeunload', function(e) {
|
|
if (formChanged) {
|
|
e.preventDefault();
|
|
e.returnValue = '{% trans "You have unsaved changes. Are you sure you want to leave?" %}';
|
|
return e.returnValue;
|
|
}
|
|
});
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', function() {
|
|
formChanged = false;
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |