144 lines
7.7 KiB
HTML
144 lines
7.7 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Interview Details" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="px-4 py-6">
|
|
<!-- Header -->
|
|
<div class="bg-gradient-to-br from-temple-red to-red-800 rounded-xl shadow-xl p-6 mb-6 text-white">
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
|
|
<div class="flex-1">
|
|
<h1 class="text-3xl font-bold mb-2 flex items-center gap-2">
|
|
<i data-lucide="calendar-check" class="w-8 h-8"></i>
|
|
{% trans "Interview Details" %}
|
|
</h1>
|
|
<p class="text-red-100 text-lg">{{ job.title }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Card -->
|
|
<div class="bg-white rounded-xl shadow-md border-l-4 border-temple-red overflow-hidden mb-6">
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Applicant Information -->
|
|
<div class="bg-gray-50 rounded-lg p-5">
|
|
<h3 class="text-lg font-semibold text-temple-dark mb-4 flex items-center gap-2">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
{% trans "Applicant Information" %}
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-28 flex-shrink-0">{% trans "Name:" %}</span>
|
|
<span class="text-gray-900">{{ interview.candidate.name }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-28 flex-shrink-0">{% trans "Email:" %}</span>
|
|
<span class="text-gray-900">{{ interview.candidate.email }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-28 flex-shrink-0">{% trans "Phone:" %}</span>
|
|
<span class="text-gray-900">{{ interview.candidate.phone|default:"{% trans 'Not provided' %}" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interview Details -->
|
|
<div class="bg-gray-50 rounded-lg p-5">
|
|
<h3 class="text-lg font-semibold text-temple-dark mb-4 flex items-center gap-2">
|
|
<i data-lucide="clock" class="w-5 h-5"></i>
|
|
{% trans "Interview Details" %}
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-28 flex-shrink-0">{% trans "Date:" %}</span>
|
|
<span class="text-gray-900">{{ interview.interview_date|date:"l, F j, Y" }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-28 flex-shrink-0">{% trans "Time:" %}</span>
|
|
<span class="text-gray-900">{{ interview.interview_time|time:"g:i A" }}</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="font-semibold text-gray-700 w-28 flex-shrink-0">{% trans "Status:" %}</span>
|
|
<span class="status-badge inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
|
|
{% if interview.status == 'scheduled' %}bg-blue-100 text-blue-800
|
|
{% elif interview.status == 'confirmed' %}bg-green-100 text-green-800
|
|
{% elif interview.status == 'cancelled' %}bg-red-100 text-red-800
|
|
{% else %}bg-gray-100 text-gray-800{% endif %}">
|
|
{{ interview.status|title }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meeting Information (if Zoom meeting exists) -->
|
|
{% if interview.zoom_meeting %}
|
|
<div class="mt-6 bg-gray-50 rounded-lg p-5">
|
|
<h3 class="text-lg font-semibold text-temple-dark mb-4 flex items-center gap-2">
|
|
<i data-lucide="video" class="w-5 h-5"></i>
|
|
{% trans "Meeting Information" %}
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-32 flex-shrink-0">{% trans "Meeting ID:" %}</span>
|
|
<span class="text-gray-900 font-mono">{{ interview.zoom_meeting.meeting_id }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-32 flex-shrink-0">{% trans "Topic:" %}</span>
|
|
<span class="text-gray-900">{{ interview.zoom_meeting.topic }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-32 flex-shrink-0">{% trans "Duration:" %}</span>
|
|
<span class="text-gray-900">{{ interview.zoom_meeting.duration }} {% trans "minutes" %}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="font-semibold text-gray-700 w-32 flex-shrink-0">{% trans "Join URL:" %}</span>
|
|
<a href="{{ interview.zoom_meeting.join_url }}" target="_blank"
|
|
class="text-temple-red hover:text-red-700 transition font-medium">
|
|
{{ interview.zoom_meeting.join_url|truncatechars:50 }}
|
|
<i data-lucide="external-link" class="w-3 h-3 inline ml-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="mt-6 pt-6 border-t border-gray-200">
|
|
<div class="flex flex-wrap gap-3">
|
|
<a href="{% url 'interview_calendar' slug=job.slug %}"
|
|
class="inline-flex items-center gap-2 border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2.5 rounded-lg text-sm font-medium transition">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
|
{% trans "Back to Calendar" %}
|
|
</a>
|
|
{% if interview.status == 'scheduled' %}
|
|
<button type="button"
|
|
class="inline-flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
{% trans "Confirm Interview" %}
|
|
</button>
|
|
{% endif %}
|
|
{% if interview.status != 'cancelled' and interview.status != 'completed' %}
|
|
<button type="button"
|
|
class="inline-flex items-center gap-2 bg-red-500 hover:bg-red-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel Interview" %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |