302 lines
16 KiB
HTML
302 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Create Applicant" %} - {{ 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 'person_list' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
|
|
<i data-lucide="users" class="w-4 h-4"></i> {% trans "Applicants" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold" style="color: #9d2235;">{% trans "Create Applicant" %}</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="user-plus" class="w-6 h-6" style="color: #9d2235;"></i>
|
|
</div>
|
|
{% trans "Create New Applicant" %}
|
|
</h1>
|
|
<a href="{% url 'person_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>
|
|
{% trans "Back to List" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 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="user-plus" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Applicant 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" enctype="multipart/form-data" id="person-form" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Profile Image Section -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-3">{% trans "Profile Photo" %}</label>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<div id="profile-image-preview" class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center border-2 border-dashed border-gray-300">
|
|
<i data-lucide="camera" class="w-8 h-8 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<input type="file" name="profile_image" id="id_profile_image"
|
|
class="hidden" accept="image/*"
|
|
onchange="previewImage(this)">
|
|
<button type="button" onclick="document.getElementById('id_profile_image').click()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="upload" class="w-4 h-4"></i>
|
|
{% trans "Upload Photo" %}
|
|
</button>
|
|
<p class="text-xs text-gray-500 mt-2">{% trans "JPG, PNG or GIF. Max size 2MB." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label for="id_first_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "First Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="first_name" id="id_first_name"
|
|
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 'Enter first name' %}"
|
|
required>
|
|
{% if form.first_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.first_name.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_middle_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Middle Name" %}
|
|
</label>
|
|
<input type="text" name="middle_name" id="id_middle_name"
|
|
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 'Enter middle name' %}">
|
|
{% if form.middle_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.middle_name.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_last_name" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Last Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="last_name" id="id_last_name"
|
|
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 'Enter last name' %}"
|
|
required>
|
|
{% if form.last_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.last_name.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="id_email" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Email Address" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="email" name="email" id="id_email"
|
|
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 'Enter email address' %}"
|
|
required>
|
|
{% if form.email.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.email.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_phone" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Phone Number" %}
|
|
</label>
|
|
<input type="tel" name="phone" id="id_phone"
|
|
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 'Enter phone number' %}">
|
|
{% if form.phone.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.phone.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label for="id_date_of_birth" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Date of Birth" %}
|
|
</label>
|
|
<input type="date" name="date_of_birth" id="id_date_of_birth"
|
|
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">
|
|
{% if form.date_of_birth.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.date_of_birth.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_nationality" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Nationality" %}
|
|
</label>
|
|
<input type="text" name="nationality" id="id_nationality"
|
|
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 'Enter nationality' %}">
|
|
{% if form.nationality.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.nationality.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="id_gender" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Gender" %}
|
|
</label>
|
|
<select name="gender" id="id_gender"
|
|
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 bg-white">
|
|
<option value="">{% trans "Select Gender" %}</option>
|
|
<option value="M">{% trans "Male" %}</option>
|
|
<option value="F">{% trans "Female" %}</option>
|
|
</select>
|
|
{% if form.gender.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.gender.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address -->
|
|
<div>
|
|
<label for="id_address" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Address" %}
|
|
</label>
|
|
<textarea name="address" id="id_address" 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 'Enter address' %}"></textarea>
|
|
{% if form.address.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.address.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- LinkedIn Profile -->
|
|
<div>
|
|
<label for="id_linkedin_profile" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "LinkedIn Profile URL" %}
|
|
</label>
|
|
<input type="url" name="linkedin_profile" id="id_linkedin_profile"
|
|
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="https://linkedin.com/in/username">
|
|
{% if form.linkedin_profile.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.linkedin_profile.errors.0 }}</div>
|
|
{% endif %}
|
|
<p class="text-xs text-gray-500 mt-1">{% trans "Optional: Add LinkedIn profile URL" %}</p>
|
|
</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 'person_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>
|
|
{% trans "Create Applicant" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Form validation
|
|
const form = document.getElementById('person-form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const firstName = document.getElementById('id_first_name').value.trim();
|
|
const lastName = document.getElementById('id_last_name').value.trim();
|
|
const email = document.getElementById('id_email').value.trim();
|
|
|
|
if (!firstName) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a first name.' %}");
|
|
document.getElementById('id_first_name').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!lastName) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a last name.' %}");
|
|
document.getElementById('id_last_name').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!email) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter an email address.' %}");
|
|
document.getElementById('id_email').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!email.includes('@')) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a valid email address.' %}");
|
|
document.getElementById('id_email').focus();
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Image preview function
|
|
function previewImage(input) {
|
|
if (input.files && input.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const preview = document.getElementById('profile-image-preview');
|
|
preview.innerHTML = `<img src="${e.target.result}" alt="Profile" class="w-full h-full rounded-full object-cover">`;
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |