350 lines
18 KiB
HTML
350 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ title }} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto py-6 px-4">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'agency_list' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
|
|
<i data-lucide="building-2" class="w-4 h-4"></i> {% trans "Agencies" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold" style="color: #9d2235;">{{ title }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="building" class="w-6 h-6" style="color: #9d2235;"></i>
|
|
</div>
|
|
{{ title }}
|
|
</h1>
|
|
<div class="flex gap-2">
|
|
{% if agency %}
|
|
<a href="{% url 'agency_detail' agency.slug %}"
|
|
class="inline-flex items-center gap-2 px-4 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="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-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #dc2626;"
|
|
onmouseover="this.style.backgroundColor='#b91c1c'"
|
|
onmouseout="this.style.backgroundColor='#dc2626'">
|
|
<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-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="arrow-left" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "Back to List" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% if agency %}
|
|
<!-- Current Agency Info Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6 p-6">
|
|
<div class="rounded-lg p-4 border-l-4" style="background-color: #fef2f2; border-color: #9d2235;">
|
|
<h6 class="font-bold mb-3 flex items-center gap-2" style="color: #9d2235;">
|
|
<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="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="building-2" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Agency Information" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
{% if form.non_field_errors %}
|
|
<div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="text-red-700 mb-0">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" novalidate id="agency-form" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Name -->
|
|
<div>
|
|
<label for="{{ form.name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ form.name.label }} <span class="text-red-500">*</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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Agency Name' %}"
|
|
{% if form.name.field.required %}required{% endif %}>
|
|
{% if form.name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.name.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.name.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.name.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Contact Person -->
|
|
<div>
|
|
<label for="{{ form.contact_person.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ 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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Contact Person' %}">
|
|
{% if form.contact_person.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.contact_person.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.contact_person.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.contact_person.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Phone -->
|
|
<div>
|
|
<label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ 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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Phone Number' %}">
|
|
{% if form.phone.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.phone.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.phone.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.phone.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div>
|
|
<label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ form.email.label }} <span class="text-red-500">*</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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Email Address' %}"
|
|
{% if form.email.field.required %}required{% endif %}>
|
|
{% if form.email.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.email.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.email.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.email.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Website -->
|
|
<div>
|
|
<label for="{{ form.website.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ 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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Website URL' %}">
|
|
{% if form.website.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.website.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.website.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.website.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Country -->
|
|
<div>
|
|
<label for="{{ form.country.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ 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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'Country' %}">
|
|
{% if form.country.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.country.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.country.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.country.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- City -->
|
|
<div>
|
|
<label for="{{ form.city.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ 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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
|
|
placeholder="{% trans 'City' %}">
|
|
{% if form.city.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.city.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.city.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.city.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address (Full Width) -->
|
|
<div>
|
|
<label for="{{ form.address.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ 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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition resize-vertical"
|
|
placeholder="{% trans 'Street Address' %}">{{ form.address.value|default:'' }}</textarea>
|
|
{% if form.address.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.address.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.address.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.address.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Description (Full Width) -->
|
|
<div>
|
|
<label for="{{ form.description.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ 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-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition resize-vertical"
|
|
placeholder="{% trans 'Agency Description' %}">{{ form.description.value|default:'' }}</textarea>
|
|
{% if form.description.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.description.errors.0 }}</div>
|
|
{% endif %}
|
|
{% if form.description.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ form.description.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
|
|
<a href="{% url 'agency_list' %}"
|
|
class="inline-flex items-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 gap-2 px-8 py-3 rounded-lg 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="save" class="w-4 h-4"></i>
|
|
{{ button_text }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Form Validation
|
|
const form = document.getElementById('agency-form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const nameInput = document.getElementById('{{ form.name.id_for_label }}');
|
|
const emailInput = document.getElementById('{{ form.email.id_for_label }}');
|
|
const websiteInput = document.getElementById('{{ form.website.id_for_label }}');
|
|
|
|
// Name validation
|
|
if (nameInput && !nameInput.value.trim()) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Agency name is required.' %}");
|
|
nameInput.focus();
|
|
return false;
|
|
}
|
|
|
|
// Email validation
|
|
if (emailInput && emailInput.value.trim()) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(emailInput.value.trim())) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a valid email address.' %}");
|
|
emailInput.focus();
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Website validation
|
|
if (websiteInput && websiteInput.value.trim()) {
|
|
try {
|
|
new URL(websiteInput.value.trim());
|
|
} catch (_) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a valid website URL.' %}");
|
|
websiteInput.focus();
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |