210 lines
12 KiB
HTML
210 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Delete Application" %} - {{ 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 Application" %}
|
|
</h1>
|
|
<p class="text-gray-600">
|
|
{% trans "You are about to delete an Application record. This action cannot be undone." %}
|
|
</p>
|
|
</div>
|
|
<a href="{% url 'application_detail' object.pk %}" 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 Application" %}
|
|
</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">
|
|
{% blocktrans with candidate_name=object.candidate.full_name job_title=object.job.title %}
|
|
Deleting application submitted by <strong>{{ candidate_name }}</strong> for job <strong>{{ job_title }}</strong> will permanently remove all associated data. Please review information below carefully before proceeding.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Application 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="file-text" class="w-5 h-5"></i>
|
|
{% trans "Application to be Deleted" %}
|
|
</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-6">
|
|
{% if object.candidate %}
|
|
<div class="flex items-center gap-4 mb-5 pb-5 border-b border-gray-200">
|
|
{% if object.candidate.profile_image %}
|
|
<img src="{{ object.candidate.profile_image.url }}" alt="{{ object.candidate.full_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.candidate.full_name }}</h4>
|
|
{% if object.candidate.email %}
|
|
<p class="text-gray-600">{{ object.candidate.email }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if object.job %}
|
|
<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 "Job Title" %}</div>
|
|
<div class="text-gray-900 text-base">{{ object.job.title }}</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 \a\t P" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if object.status %}
|
|
<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="settings" 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 "Current Status" %}</div>
|
|
<div class="text-gray-900 text-base">{{ object.get_status_display }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</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 Application?" %}
|
|
</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 Application record and all status history 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 associated screening results, scores, and evaluations 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 "Any linked documents (CV, cover letter) specific to this application will be lost." %}
|
|
</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 "The Candidate will still exist, but this specific application history 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 application." %}</strong>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3 justify-between">
|
|
<a href="{% url 'application_detail' object.pk %}" 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 Application 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();
|
|
|
|
deleteForm.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
const candidateName = "{{ object.candidate.full_name|escapejs }}";
|
|
const jobTitle = "{{ object.job.title|escapejs }}";
|
|
|
|
const confirmationMessageTemplate = "{% blocktrans with candidate_name='CANDIDATE_PLACEHOLDER' job_title='JOB_PLACEHOLDER' %}Are you absolutely sure you want to permanently delete application by CANDIDATE_PLACEHOLDER for JOB_PLACEHOLDER? This action cannot be reversed!{% endblocktrans %}";
|
|
|
|
const confirmationMessage = confirmationMessageTemplate
|
|
.replace('CANDIDATE_PLACEHOLDER', candidateName)
|
|
.replace('JOB_PLACEHOLDER', jobTitle);
|
|
|
|
if (confirm(confirmationMessage)) {
|
|
deleteButton.disabled = true;
|
|
deleteButton.innerHTML = '<svg class="animate-spin w-5 h-5 mr-2" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5" class="opacity-25"></circle><path fill="none" stroke="currentColor" stroke-width="5" d="M25 5a20 20 0 1 1 0 0 40 20 20 0 1 1 0 0-40" class="opacity-75"></path></svg>{% trans "Deleting..." %}';
|
|
deleteForm.submit();
|
|
} else {
|
|
validateForm();
|
|
}
|
|
});
|
|
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |