161 lines
8.6 KiB
HTML
161 lines
8.6 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n widget_tweaks %}
|
|
|
|
{% block title %}{% trans "Create Onsite Interview" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-3xl mx-auto">
|
|
<!-- 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 text-gray-900 flex items-center gap-3">
|
|
<div class="bg-temple-red/10 p-3 rounded-xl">
|
|
<i data-lucide="building" class="w-6 h-6 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Create Onsite Interview" %}
|
|
</h1>
|
|
<p class="text-gray-600 mt-1">{% trans "for" %} {{ application.name }} - {{ job.title }}</p>
|
|
</div>
|
|
<a href="{% url 'interview_create_type_selection' application.slug %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2.5 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="arrow-left" class="w-4 h-4"></i> {% trans "Back to Type Selection" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
|
<p class="text-gray-600 mb-6">
|
|
{% trans "Schedule an onsite interview for" %} <strong>{{ application.name }}</strong>
|
|
{% trans "for the position of" %} <strong>{{ job.title }}</strong>.
|
|
</p>
|
|
|
|
{% if messages %}
|
|
<div class="space-y-3 mb-6">
|
|
{% for message in messages %}
|
|
<div class="{% if message.tags == 'error' %}bg-red-50 border-red-200 text-red-800
|
|
{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-800
|
|
{% elif message.tags == 'warning' %}bg-yellow-50 border-yellow-200 text-yellow-800
|
|
{% else %}bg-blue-50 border-blue-200 text-blue-800{% endif %}
|
|
border rounded-xl p-4 flex items-start gap-3">
|
|
{% if message.tags == 'error' %}
|
|
<i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0"></i>
|
|
{% elif message.tags == 'success' %}
|
|
<i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0"></i>
|
|
{% elif message.tags == 'warning' %}
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0"></i>
|
|
{% else %}
|
|
<i data-lucide="info" class="w-5 h-5 flex-shrink-0"></i>
|
|
{% endif %}
|
|
<span class="text-sm">{{ message }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="{% url 'interview_create_onsite' application.slug %}" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Topic -->
|
|
<div>
|
|
<label for="{{ form.topic.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
<i data-lucide="tag" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Topic" %}
|
|
</label>
|
|
{{ form.topic|add_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"|attr:"placeholder" }}
|
|
{% if form.topic.errors %}
|
|
<div class="mt-1 text-sm text-red-600">{{ form.topic.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Interview Date -->
|
|
<div>
|
|
<label for="{{ form.interview_date.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
<i data-lucide="calendar" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Interview Date" %}
|
|
</label>
|
|
{{ form.interview_date|add_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.interview_date.errors %}
|
|
<div class="mt-1 text-sm text-red-600">{{ form.interview_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Interview Time -->
|
|
<div>
|
|
<label for="{{ form.interview_time.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
<i data-lucide="clock" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Interview Time" %}
|
|
</label>
|
|
{{ form.interview_time|add_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.interview_time.errors %}
|
|
<div class="mt-1 text-sm text-red-600">{{ form.interview_time.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Duration -->
|
|
<div>
|
|
<label for="{{ form.duration.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
<i data-lucide="timer" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Duration (minutes)" %}
|
|
</label>
|
|
{{ form.duration|add_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"|attr:"placeholder" }}
|
|
{% if form.duration.errors %}
|
|
<div class="mt-1 text-sm text-red-600">{{ form.duration.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Room Number -->
|
|
<div>
|
|
<label for="{{ form.room_number.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
<i data-lucide="door-open" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Room Number" %}
|
|
</label>
|
|
{{ form.room_number|add_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"|attr:"placeholder" }}
|
|
{% if form.room_number.errors %}
|
|
<div class="mt-1 text-sm text-red-600">{{ form.room_number.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Physical Address -->
|
|
<div>
|
|
<label for="{{ form.physical_address.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
<i data-lucide="map-pin" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Physical Address" %}
|
|
</label>
|
|
{{ form.physical_address|add_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"|attr:"placeholder" }}
|
|
{% if form.physical_address.errors %}
|
|
<div class="mt-1 text-sm text-red-600">{{ form.physical_address.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-4">
|
|
<button type="submit"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-medium text-white transition-all duration-200 bg-temple-red hover:bg-[#7a1a29] shadow-sm hover:shadow-md">
|
|
<i data-lucide="save" class="w-5 h-5"></i> {% trans "Schedule Onsite Interview" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Add form validation for future dates
|
|
const dateInput = document.querySelector('input[type="date"]');
|
|
const today = new Date().toISOString().split('T')[0];
|
|
|
|
if (dateInput) {
|
|
dateInput.min = today;
|
|
|
|
dateInput.addEventListener('change', function() {
|
|
if (this.value < today) {
|
|
this.setCustomValidity('{% trans "Interview date must be in future" %}');
|
|
} else {
|
|
this.setCustomValidity('');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |