234 lines
12 KiB
HTML
234 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Delete 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><a href="{% url 'person_detail' object.slug %}" class="text-gray-500 hover:underline transition">
|
|
{{ object.get_full_name }}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold text-red-600">{% trans "Delete" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-3 text-gray-900">
|
|
<i data-lucide="alert-triangle" class="w-8 h-8 text-red-600"></i>
|
|
{% trans "Delete Applicant" %}
|
|
</h1>
|
|
<p class="text-gray-600 mt-2">
|
|
{% trans "You are about to delete an applicant record. This action cannot be undone." %}
|
|
</p>
|
|
</div>
|
|
<a href="{% url 'person_detail' object.slug %}"
|
|
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 Applicant" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Warning Section -->
|
|
<div class="bg-gradient-to-br from-yellow-50 to-orange-50 border-2 border-yellow-300 rounded-xl p-8 mb-6 text-center">
|
|
<i data-lucide="alert-triangle" class="w-16 h-16 text-yellow-500 mx-auto mb-4"></i>
|
|
<h3 class="text-2xl font-bold text-yellow-800 mb-3">
|
|
{% trans "Warning: This action cannot be undone!" %}
|
|
</h3>
|
|
<p class="text-yellow-700">
|
|
{% trans "Deleting this applicant will permanently remove all associated data. Please review the information below carefully before proceeding." %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Applicant Information -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
|
<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" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Applicant to be Deleted" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<!-- Profile Info -->
|
|
<div class="flex items-start gap-4 mb-6 pb-6 border-b border-gray-200">
|
|
{% if object.profile_image %}
|
|
<img src="{{ object.profile_image.url }}" alt="{{ object.get_full_name }}"
|
|
class="w-20 h-20 rounded-full border-3 border-gray-200 object-cover">
|
|
{% else %}
|
|
<div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center border-3 border-gray-200">
|
|
<i data-lucide="user" class="w-10 h-10 text-gray-400"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<h4 class="text-xl font-bold text-gray-900 mb-1">{{ object.get_full_name }}</h4>
|
|
{% if object.email %}
|
|
<p class="text-gray-600">{{ object.email }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Information Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{% if object.phone %}
|
|
<div class="flex items-start gap-3 p-4 rounded-lg bg-gray-50">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="phone" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide block mb-1">{% trans "Phone" %}</span>
|
|
<span class="text-gray-900">{{ object.phone }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="flex items-start gap-3 p-4 rounded-lg bg-gray-50">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="calendar-plus" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide block mb-1">{% trans "Created On" %}</span>
|
|
<span class="text-gray-900">{{ object.created_at|date:"F d, Y" }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if object.nationality %}
|
|
<div class="flex items-start gap-3 p-4 rounded-lg bg-gray-50">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="globe" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide block mb-1">{% trans "Nationality" %}</span>
|
|
<span class="text-gray-900">{{ object.nationality }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if object.gender %}
|
|
<div class="flex items-start gap-3 p-4 rounded-lg bg-gray-50">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="user-2" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide block mb-1">{% trans "Gender" %}</span>
|
|
<span class="text-gray-900">{{ object.get_gender_display }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Consequences -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
|
<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="list" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "What will happen when you delete this applicant?" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start gap-3 pb-3 border-b border-gray-200">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-gray-700">{% trans "The applicant profile and all personal information will be permanently deleted" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3 pb-3 border-b border-gray-200">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-gray-700">{% trans "All associated applications and documents will be removed" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3 pb-3 border-b border-gray-200">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-gray-700">{% trans "Any interview schedules and history will be deleted" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3 pb-3 border-b border-gray-200">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-gray-700">{% trans "All related data and records will be lost" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-gray-700 font-semibold">{% trans "This action cannot be undone under any circumstances" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Form -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-red-200 mb-6">
|
|
<div class="px-6 py-4 border-b border-red-200" style="background-color: #fef2f2;">
|
|
<h2 class="text-lg font-bold flex items-center gap-2 text-red-800">
|
|
<i data-lucide="shield-alert" class="w-5 h-5"></i>
|
|
{% trans "Confirm Deletion" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" id="delete-form" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<div class="flex items-start gap-3 p-4 rounded-lg bg-red-50 border border-red-200">
|
|
<input type="checkbox" id="confirm_delete" name="confirm_delete"
|
|
class="mt-1 w-5 h-5 rounded border-gray-300 text-red-600 focus:ring-red-500 cursor-pointer"
|
|
required>
|
|
<label for="confirm_delete" class="text-gray-800 cursor-pointer">
|
|
<strong>{% trans "I understand that this action cannot be undone and I want to permanently delete this applicant." %}</strong>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<a href="{% url 'person_detail' object.slug %}"
|
|
class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium border-2 border-gray-300 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"
|
|
id="delete-button"
|
|
class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium text-white bg-red-600 hover:bg-red-700 transition-all duration-200 disabled:bg-gray-400 disabled:cursor-not-allowed disabled:opacity-50"
|
|
disabled>
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
{% trans "Delete Applicant Permanently" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
const confirmDeleteCheckbox = document.getElementById('confirm_delete');
|
|
const deleteButton = document.getElementById('delete-button');
|
|
const deleteForm = document.getElementById('delete-form');
|
|
|
|
function validateForm() {
|
|
const checkboxChecked = confirmDeleteCheckbox.checked;
|
|
deleteButton.disabled = !checkboxChecked;
|
|
}
|
|
|
|
confirmDeleteCheckbox.addEventListener('change', validateForm);
|
|
|
|
// Add confirmation before final submission
|
|
deleteForm.addEventListener('submit', function(e) {
|
|
if (confirmDeleteCheckbox.checked) {
|
|
const confirmation = confirm("{% trans 'Are you absolutely sure you want to delete this applicant? This action cannot be undone.' %}");
|
|
if (!confirmation) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |