207 lines
12 KiB
HTML
207 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Delete Applicant" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-temple-red mb-2 flex items-center gap-3">
|
|
<div class="bg-temple-red/10 p-3 rounded-xl">
|
|
<i data-lucide="alert-triangle" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Delete Applicant" %}
|
|
</h1>
|
|
<p class="text-gray-600">
|
|
{% trans "You are about to delete an applicant's application. This action cannot be undone." %}
|
|
</p>
|
|
</div>
|
|
<a href="{% url 'candidate_detail' object.slug %}" class="inline-flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white font-semibold px-6 py-2.5 rounded-xl transition">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i> {% trans "Back to Applicant" %}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<div class="w-full max-w-4xl">
|
|
<!-- Warning Section -->
|
|
<div class="bg-gradient-to-br from-yellow-100 to-amber-50 border border-yellow-200 rounded-2xl p-8 mb-6 text-center">
|
|
<div class="bg-temple-red/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="alert-triangle" class="w-12 h-12 text-temple-red"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-amber-800 mb-3">{% trans "Warning: This action cannot be undone!" %}</h3>
|
|
<p class="text-amber-700">
|
|
{% trans "Deleting this applicant will permanently remove all associated data. Please review information below carefully before proceeding." %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Applicant Info Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
|
<div class="bg-white border-b border-gray-200 p-5">
|
|
<h5 class="text-lg font-bold text-temple-red flex items-center gap-2">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
{% trans "Applicant to be Deleted" %}
|
|
</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-6">
|
|
<div class="flex items-center gap-4 mb-5 pb-5 border-b border-gray-200">
|
|
{% if object.profile_image %}
|
|
<img src="{{ object.profile_image.url }}" alt="{{ object.name }}" class="w-20 h-20 rounded-full object-cover border-3 border-temple-red">
|
|
{% else %}
|
|
<div class="w-20 h-20 rounded-full bg-gray-200 flex items-center justify-center border-3 border-temple-red">
|
|
<i data-lucide="user" class="w-8 h-8 text-gray-400"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<h4 class="text-xl font-bold text-gray-900 mb-1">{{ object.name }}</h4>
|
|
{% if object.email %}
|
|
<p class="text-gray-600">{{ object.email }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4 mb-5 pb-5 border-b border-gray-200 last:border-0 last:pb-0 last:mb-0">
|
|
<div class="w-10 h-10 bg-temple-red text-white rounded-lg flex items-center justify-center shrink-0">
|
|
<i data-lucide="briefcase" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">{% trans "Position Applied" %}</div>
|
|
<div class="text-gray-900 text-base">
|
|
{% if object.job_posting %}
|
|
{{ object.job_posting.title }}
|
|
{% else %}
|
|
{% trans "Not specified" %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if object.phone %}
|
|
<div class="flex items-start gap-4 mb-5 pb-5 border-b border-gray-200 last:border-0 last:pb-0 last:mb-0">
|
|
<div class="w-10 h-10 bg-temple-red text-white rounded-lg flex items-center justify-center shrink-0">
|
|
<i data-lucide="phone" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">{% trans "Phone" %}</div>
|
|
<div class="text-gray-900 text-base">{{ object.phone }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="flex items-start gap-4 mb-5 pb-5 border-b border-gray-200 last:border-0 last:pb-0 last:mb-0">
|
|
<div class="w-10 h-10 bg-temple-red text-white rounded-lg flex items-center justify-center shrink-0">
|
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">{% trans "Applied On" %}</div>
|
|
<div class="text-gray-900 text-base">{{ object.created_at|date:"F d, Y" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 bg-temple-red text-white rounded-lg flex items-center justify-center shrink-0">
|
|
<i data-lucide="info" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">{% trans "Status" %}</div>
|
|
<div class="text-gray-900 text-base">
|
|
{% if object.status %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
{{ object.get_status_display }}
|
|
</span>
|
|
{% else %}
|
|
{% trans "Not specified" %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Consequences Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
|
<div class="bg-white border-b border-gray-200 p-5">
|
|
<h5 class="text-lg font-bold text-temple-red flex items-center gap-2">
|
|
<i data-lucide="list" class="w-5 h-5"></i>
|
|
{% trans "What will happen when you delete this applicant?" %}
|
|
</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start gap-2 text-gray-700 pb-3 border-b border-gray-200 last:border-0 last:pb-0">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
|
|
{% trans "The applicant profile and all personal information will be permanently deleted" %}
|
|
</li>
|
|
<li class="flex items-start gap-2 text-gray-700 pb-3 border-b border-gray-200 last:border-0 last:pb-0">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
|
|
{% trans "All application data and documents will be removed" %}
|
|
</li>
|
|
<li class="flex items-start gap-2 text-gray-700 pb-3 border-b border-gray-200 last:border-0 last:pb-0">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
|
|
{% trans "Interview schedules and history will be deleted" %}
|
|
</li>
|
|
<li class="flex items-start gap-2 text-gray-700 pb-3 border-b border-gray-200 last:border-0 last:pb-0">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
|
|
{% trans "Any associated notes and communications will be lost" %}
|
|
</li>
|
|
<li class="flex items-start gap-2 text-gray-700">
|
|
<i data-lucide="x-circle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
|
|
{% trans "This action cannot be undone under any circumstances" %}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Form -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<form method="post" id="deleteForm">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-6">
|
|
<label class="flex items-start gap-3 cursor-pointer">
|
|
<input type="checkbox" id="confirm_delete" name="confirm_delete" required class="w-5 h-5 mt-0.5 rounded border-gray-300 text-temple-red focus:ring-temple-red focus:ring-offset-0">
|
|
<span class="text-gray-900 font-medium">
|
|
<strong>{% trans "I understand that this action cannot be undone and I want to permanently delete this applicant." %}</strong>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3 justify-between">
|
|
<a href="{% url 'candidate_detail' object.slug %}" class="inline-flex items-center justify-center gap-2 bg-gray-600 hover:bg-gray-700 text-white font-semibold px-8 py-3 rounded-xl transition">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit" id="deleteButton" disabled class="inline-flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white font-semibold px-8 py-3 rounded-xl transition shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i data-lucide="trash-2" class="w-5 h-5"></i>
|
|
{% trans "Delete Applicant Permanently" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const confirmDeleteCheckbox = document.getElementById('confirm_delete');
|
|
const deleteButton = document.getElementById('deleteButton');
|
|
const deleteForm = document.getElementById('deleteForm');
|
|
|
|
function validateForm() {
|
|
const checkboxChecked = confirmDeleteCheckbox.checked;
|
|
deleteButton.disabled = !checkboxChecked;
|
|
}
|
|
|
|
confirmDeleteCheckbox.addEventListener('change', validateForm);
|
|
validateForm();
|
|
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |