157 lines
8.7 KiB
HTML
157 lines
8.7 KiB
HTML
{% load i18n %}
|
|
<div class="container mx-auto mt-8 px-4">
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-6">{% trans "Schedule Interviews for" %} {{ job.title }}</h1>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<form method="post" id="schedule-form">
|
|
{% csrf_token %}
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Left Column - Candidates -->
|
|
<div>
|
|
<h5 class="text-lg font-semibold text-gray-900 mb-4">{% trans "Select Candidates" %}</h5>
|
|
<div class="space-y-2">
|
|
{{ form.candidates }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column - Schedule Details -->
|
|
<div>
|
|
<h5 class="text-lg font-semibold text-gray-900 mb-4">{% trans "Schedule Details" %}</h5>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="{{ form.start_date.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Start Date" %}</label>
|
|
{{ form.start_date }}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="{{ form.end_date.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">{% trans "End Date" %}</label>
|
|
{{ form.end_date }}
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{% trans "Working Days" %}</label>
|
|
{{ form.working_days }}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="{{ form.start_time.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Start Time" %}</label>
|
|
{{ form.start_time }}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="{{ form.end_time.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">{% trans "End Time" %}</label>
|
|
{{ form.end_time }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="{{ form.interview_duration.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Interview Duration (minutes)" %}</label>
|
|
{{ form.interview_duration }}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="{{ form.buffer_time.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">{% trans "Buffer Time (minutes)" %}</label>
|
|
{{ form.buffer_time }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Break Times -->
|
|
<div class="mt-8">
|
|
<h5 class="text-lg font-semibold text-gray-900 mb-4">{% trans "Break Times" %}</h5>
|
|
<div id="break-times-container" class="space-y-4">
|
|
{{ break_formset.management_form }}
|
|
{% for form in break_formset %}
|
|
<div class="break-time-form grid grid-cols-12 gap-4 items-start">
|
|
<div class="col-span-5">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{% trans "Start Time" %}</label>
|
|
{{ form.start_time }}
|
|
</div>
|
|
<div class="col-span-5">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{% trans "End Time" %}</label>
|
|
{{ form.end_time }}
|
|
</div>
|
|
<div class="col-span-2 flex items-end">
|
|
{{ form.DELETE }}
|
|
<button type="button" class="remove-break w-full bg-red-500 hover:bg-red-600 text-white text-sm font-medium px-4 py-2 rounded-lg transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="trash-2" class="w-4 h-4 inline mr-1"></i>{% trans "Remove" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<button type="button" id="add-break" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition">
|
|
<i data-lucide="plus" class="w-4 h-4 inline mr-1"></i>{% trans "Add Break" %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="mt-8 flex gap-3">
|
|
<button type="submit" class="inline-flex items-center gap-2 bg-temple-red hover:bg-temple-dark text-white font-medium px-6 py-2.5 rounded-lg text-sm transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="eye" class="w-4 h-4"></i>{% trans "Preview Schedule" %}
|
|
</button>
|
|
<a href="{% url 'job_detail' slug=job.slug %}" class="inline-flex items-center gap-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium px-6 py-2.5 rounded-lg text-sm transition">
|
|
<i data-lucide="x" class="w-4 h-4"></i>{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const addBreakBtn = document.getElementById('add-break');
|
|
const breakTimesContainer = document.getElementById('break-times-container');
|
|
const totalFormsInput = document.getElementById('id_breaks-TOTAL_FORMS');
|
|
|
|
addBreakBtn.addEventListener('click', function() {
|
|
const formCount = parseInt(totalFormsInput.value);
|
|
const newFormHtml = `
|
|
<div class="break-time-form grid grid-cols-12 gap-4 items-start">
|
|
<div class="col-span-5">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{% trans "Start Time" %}</label>
|
|
<input type="time" name="breaks-${formCount}-start_time" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" id="id_breaks-${formCount}-start_time">
|
|
</div>
|
|
<div class="col-span-5">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">{% trans "End Time" %}</label>
|
|
<input type="time" name="breaks-${formCount}-end_time" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" id="id_breaks-${formCount}-end_time">
|
|
</div>
|
|
<div class="col-span-2 flex items-end">
|
|
<input type="checkbox" name="breaks-${formCount}-DELETE" id="id_breaks-${formCount}-DELETE" style="display:none;">
|
|
<button type="button" class="remove-break w-full bg-red-500 hover:bg-red-600 text-white text-sm font-medium px-4 py-2 rounded-lg transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="trash-2" class="w-4 h-4 inline mr-1"></i>{% trans "Remove" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = newFormHtml;
|
|
const newForm = tempDiv.firstChild;
|
|
|
|
breakTimesContainer.appendChild(newForm);
|
|
totalFormsInput.value = formCount + 1;
|
|
lucide.createIcons();
|
|
});
|
|
|
|
// Handle remove button clicks
|
|
breakTimesContainer.addEventListener('click', function(e) {
|
|
if (e.target.closest('.remove-break')) {
|
|
const form = e.target.closest('.break-time-form');
|
|
const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
|
|
deleteCheckbox.checked = true;
|
|
form.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Initialize icons
|
|
lucide.createIcons();
|
|
});
|
|
</script> |