836 lines
55 KiB
HTML
836 lines
55 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ schedule.application.name }} - {% trans "Interview Details" %} - ATS{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-4 sm:space-y-6">
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4">
|
|
<div class="min-w-0 flex-1">
|
|
<h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 flex items-center gap-2 sm:gap-3">
|
|
<div class="bg-temple-red/10 p-2 sm:p-3 rounded-xl shrink-0">
|
|
<i data-lucide="calendar" class="w-5 h-5 sm:w-6 sm:h-6 text-temple-red"></i>
|
|
</div>
|
|
<span class="truncate">{% trans "Interview Details" %}</span>
|
|
</h1>
|
|
<p class="text-sm sm:text-base text-gray-600 mt-1 truncate">{{ schedule.application.name }} - {{ schedule.job.title }}</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 w-full sm:w-auto">
|
|
<a href="{% url 'interview_list' %}"
|
|
class="inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg text-sm font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target flex-1 sm:flex-none">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "Back to Interviews" %}</span>
|
|
<span class="sm:hidden">{% trans "Back" %}</span>
|
|
</a>
|
|
<a href="{% url 'job_detail' schedule.job.slug %}"
|
|
class="inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg text-sm font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target flex-1 sm:flex-none">
|
|
<i data-lucide="briefcase" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "View Job" %}</span>
|
|
<span class="sm:hidden">{% trans "Job" %}</span>
|
|
</a>
|
|
{% if schedule.status != 'cancelled' %}
|
|
<button type="button"
|
|
class="inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg text-sm font-medium border-2 border-temple-red text-temple-red hover:bg-temple-red hover:text-white active:bg-temple-red/90 transition-all duration-200 touch-target flex-1 sm:flex-none"
|
|
onclick="openModal('statusModal')">
|
|
<i data-lucide="refresh-cw" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "Update Status" %}</span>
|
|
<span class="sm:hidden">{% trans "Status" %}</span>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
|
|
<div class="lg:col-span-2 space-y-4 sm:space-y-5 lg:space-y-6">
|
|
<!-- Candidate Information -->
|
|
<div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-5 lg:p-6">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-5">
|
|
<h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2">
|
|
<i data-lucide="user" class="w-4 h-4 sm:w-5 sm:h-5 text-temple-red"></i>
|
|
{% trans "Candidate Information" %}
|
|
</h2>
|
|
{% if schedule.application.resume %}
|
|
<a href="{{ schedule.application.resume.url }}"
|
|
class="inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-2 rounded-lg text-sm font-medium border-2 border-temple-red text-temple-red hover:bg-temple-red hover:text-white active:bg-temple-red/90 transition-all duration-200 touch-target w-full sm:w-auto"
|
|
target="_blank">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
{% trans "Download Resume" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4 border-l-4 border-temple-red">
|
|
<h3 class="font-semibold text-gray-900 mb-2 sm:mb-3 text-sm sm:text-base">{% trans "Personal Details" %}</h3>
|
|
<div class="space-y-1.5 sm:space-y-2">
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Name:" %}</strong> {{ schedule.application.name }}</p>
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Email:" %}</strong> {{ schedule.application.email }}</p>
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Phone:" %}</strong> {{ schedule.application.phone }}</p>
|
|
{% if schedule.application.location %}
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Location:" %}</strong> {{ schedule.application.location }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4 border-l-4 border-temple-red">
|
|
<h3 class="font-semibold text-gray-900 mb-2 sm:mb-3 text-sm sm:text-base">{% trans "Application Details" %}</h3>
|
|
<div class="space-y-1.5 sm:space-y-2">
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Job:" %}</strong> {{ schedule.job.title }}</p>
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Department:" %}</strong> {{ schedule.job.department }}</p>
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Applied Date:" %}</strong> {{ schedule.application.created_at|date:"d-m-Y" }}</p>
|
|
<p class="text-gray-700 text-xs sm:text-sm"><strong>{% trans "Current Stage:" %}</strong>
|
|
<span class="inline-block px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs font-semibold bg-temple-red text-white ml-1">
|
|
{{ schedule.application.stage }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interview Details -->
|
|
<div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-5 lg:p-6">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-5">
|
|
<h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2">
|
|
<i data-lucide="calendar-check" class="w-4 h-4 sm:w-5 sm:h-5 text-temple-red"></i>
|
|
{% trans "Interview Details" %}
|
|
</h2>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="inline-block px-2 sm:px-3 py-1 rounded-full text-xs font-semibold bg-temple-red text-white">
|
|
{{ interview.location_type }}
|
|
</span>
|
|
<span class="inline-block px-2 sm:px-3 py-1 rounded-full text-xs font-semibold
|
|
{% if schedule.status == 'scheduled' %}bg-gray-600
|
|
{% elif schedule.status == 'confirmed' %}bg-blue-600
|
|
{% elif schedule.status == 'cancelled' %}bg-red-600
|
|
{% elif schedule.status == 'completed' %}bg-green-600
|
|
{% endif %} text-white">
|
|
{{ schedule.status }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4">
|
|
<div class="space-y-2 sm:space-y-2.5">
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Date:" %}</span>
|
|
<span class="text-gray-600">{{ schedule.interview_date|date:"d-m-Y" }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Time:" %}</span>
|
|
<span class="text-gray-600">{{ schedule.interview_time|date:"h:i A" }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Duration:" %}</span>
|
|
<span class="text-gray-600">{{ interview.duration }} {% trans "minutes" %}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Status:" %}</span>
|
|
<span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-temple-red text-white">
|
|
{{ interview.status }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4">
|
|
{% if interview.location_type == 'Remote' %}
|
|
<h3 class="font-semibold text-gray-900 mb-2 sm:mb-3 text-sm sm:text-base">{% trans "Remote Meeting Details" %}</h3>
|
|
<div class="space-y-2 sm:space-y-2.5 mb-3">
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Platform:" %}</span>
|
|
<span class="text-gray-600">Zoom</span>
|
|
</div>
|
|
{% if schedule.interview %}
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Meeting ID:" %}</span>
|
|
<span class="text-gray-600">{{ interview.meeting_id }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Password:" %}</span>
|
|
<span class="text-gray-600">{{ interview.password }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if interview.join_url %}
|
|
<div class="space-y-2">
|
|
<a href="{{ interview.join_url }}"
|
|
target="_blank"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg font-medium text-sm text-white transition-all duration-200 bg-temple-red hover:bg-temple-red/90 active:bg-temple-red/80 touch-target"
|
|
id="joinMeetingLink">
|
|
<i data-lucide="video" class="w-4 h-4"></i>
|
|
{% trans "Join Meeting" %}
|
|
</a>
|
|
<button onclick="copyJoinUrl()"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg font-medium text-sm border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target">
|
|
<i data-lucide="copy" class="w-4 h-4"></i>
|
|
{% trans "Copy Join URL" %}
|
|
</button>
|
|
<p id="copyMessage" class="text-green-600 text-xs sm:text-sm text-center"></p>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<h3 class="font-semibold text-gray-900 mb-2 sm:mb-3 text-sm sm:text-base">{% trans "Onsite Location Details" %}</h3>
|
|
{% if schedule.interview %}
|
|
<div class="space-y-2 sm:space-y-2.5">
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Address:" %}</span>
|
|
<span class="text-gray-600 text-right">{{ interview.physical_address }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs sm:text-sm">
|
|
<span class="font-semibold text-gray-700">{% trans "Room:" %}</span>
|
|
<span class="text-gray-600">{{ interview.room_number }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interview Timeline -->
|
|
<div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-5 lg:p-6">
|
|
<h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 sm:mb-5">
|
|
<i data-lucide="history" class="w-4 h-4 sm:w-5 sm:h-5 text-temple-red"></i>
|
|
{% trans "Interview Timeline" %}
|
|
</h2>
|
|
<div class="relative pl-6 sm:pl-8">
|
|
<div class="absolute left-2.5 sm:left-3 top-0 bottom-0 w-0.5 bg-gray-200"></div>
|
|
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
|
|
<div class="relative">
|
|
<div class="absolute left-[-1.125rem] sm:left-[-1.25rem] top-2 w-3 h-3 rounded-full bg-temple-red border-2 border-white shadow"></div>
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-900 mb-1 text-sm sm:text-base">{% trans "Interview Scheduled" %}</h3>
|
|
<p class="text-gray-600 text-xs sm:text-sm">{% trans "Interview was scheduled for" %} {{ schedule.interview_date|date:"d-m-Y" }} {{ schedule.interview_time|date:"h:i A" }}</p>
|
|
<small class="text-gray-500 text-xs mt-2 block">{{ interview.created_at|date:"d-m-Y h:i A" }}</small>
|
|
</div>
|
|
</div>
|
|
|
|
{% if schedule.status == 'confirmed' %}
|
|
<div class="relative">
|
|
<div class="absolute left-[-1.125rem] sm:left-[-1.25rem] top-2 w-3 h-3 rounded-full bg-blue-600 border-2 border-white shadow"></div>
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-900 mb-1 text-sm sm:text-base">{% trans "Interview Confirmed" %}</h3>
|
|
<p class="text-gray-600 text-xs sm:text-sm">{% trans "Candidate has confirmed attendance" %}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if schedule.status == 'completed' %}
|
|
<div class="relative">
|
|
<div class="absolute left-[-1.125rem] sm:left-[-1.25rem] top-2 w-3 h-3 rounded-full bg-green-600 border-2 border-white shadow"></div>
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-900 mb-1 text-sm sm:text-base">{% trans "Interview Completed" %}</h3>
|
|
<p class="text-gray-600 text-xs sm:text-sm">{% trans "Interview has been completed" %}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if schedule.status == 'cancelled' %}
|
|
<div class="relative">
|
|
<div class="absolute left-[-1.125rem] sm:left-[-1.25rem] top-2 w-3 h-3 rounded-full bg-red-600 border-2 border-white shadow"></div>
|
|
<div class="bg-gray-50 rounded-lg sm:rounded-xl p-3 sm:p-4 border border-gray-200">
|
|
<h3 class="font-semibold text-gray-900 mb-1 text-sm sm:text-base">{% trans "Interview Cancelled" %}</h3>
|
|
<p class="text-gray-600 text-xs sm:text-sm">{% trans "Interview was cancelled on: " %}{{ schedule.cancelled_at|date:"d-m-Y h:i A" }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
|
|
<!-- Actions Panel -->
|
|
<div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-5 lg:p-6">
|
|
<h2 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2 mb-4">
|
|
<i data-lucide="settings" class="w-4 h-4 sm:w-5 sm:h-5 text-temple-red"></i>
|
|
{% trans "Actions" %}
|
|
</h2>
|
|
<div class="space-y-2 sm:space-y-3">
|
|
{% if schedule.status != 'cancelled' and schedule.status != 'completed' %}
|
|
<button type="button"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm text-white transition-all duration-200 bg-temple-red hover:bg-temple-red/90 active:bg-temple-red/80 touch-target"
|
|
onclick="openModal('rescheduleModal')">
|
|
<i data-lucide="refresh-cw" class="w-4 h-4"></i>
|
|
{% trans "Reschedule" %}
|
|
</button>
|
|
|
|
<button type="button"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white active:bg-red-700 transition-all duration-200 touch-target"
|
|
onclick="openModal('cancelModal')">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if schedule.status == 'cancelled' %}
|
|
<p class="text-red-600 text-sm text-center py-2">{% trans "This interview has been cancelled" %}</p>
|
|
{% endif %}
|
|
|
|
<div class="border-t border-gray-200 my-3 sm:my-4"></div>
|
|
|
|
<button type="button"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-temple-red text-temple-red hover:bg-temple-red hover:text-white active:bg-temple-red/90 transition-all duration-200 touch-target"
|
|
onclick="openModal('emailModal')">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
{% trans "Send Email" %}
|
|
</button>
|
|
|
|
{% if schedule.status == 'completed' %}
|
|
<button type="button"
|
|
class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-temple-red text-temple-red hover:bg-temple-red hover:text-white active:bg-temple-red/90 transition-all duration-200 touch-target"
|
|
onclick="openModal('resultModal')">
|
|
<i data-lucide="check-circle" class="w-4 h-4"></i>
|
|
{% trans "Update Result" %}
|
|
</button>
|
|
|
|
{% if interview.interview_result %}
|
|
<div class="mt-4 text-center">
|
|
<p class="text-sm text-gray-700 mb-2">{% trans 'Interview Result:' %}</p>
|
|
{% if interview.interview_result == 'passed' %}
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-100 text-green-800">
|
|
<i data-lucide="check-circle" class="w-4 h-4"></i>
|
|
<strong class="text-sm">{{ interview.interview_result|upper }}</strong>
|
|
</div>
|
|
{% elif interview.interview_result == 'failed' %}
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-100 text-red-800">
|
|
<i data-lucide="x-circle" class="w-4 h-4"></i>
|
|
<strong class="text-sm">{{ interview.interview_result|upper }}</strong>
|
|
</div>
|
|
{% else %}
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-temple-red/10 text-temple-red">
|
|
<i data-lucide="help-circle" class="w-4 h-4"></i>
|
|
<strong class="text-sm">{{ interview.interview_result|upper }}</strong>
|
|
</div>
|
|
{% endif %}
|
|
{% if interview.result_comments %}
|
|
<p class="text-sm text-gray-600 mt-3">{{ interview.result_comments }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<span class="inline-block w-full text-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-200 text-gray-700">
|
|
{% trans "No Result Yet" %}
|
|
</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Modal -->
|
|
<div class="fixed inset-0 z-50 hidden overflow-y-auto" id="emailModal" role="dialog" aria-labelledby="emailModalLabel" aria-modal="true">
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity bg-black/50 backdrop-blur-sm" id="emailModalBackdrop" onclick="closeModal('emailModal')"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div class="inline-block w-full max-w-2xl my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-2xl rounded-2xl" id="emailModalContent">
|
|
<div class="flex items-center justify-between border-b border-gray-100 p-4 sm:p-5">
|
|
<h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2" id="emailModalLabel">
|
|
<i data-lucide="mail" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Compose Email" %}
|
|
</h3>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 transition-colors touch-target" onclick="closeModal('emailModal')">
|
|
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 sm:p-5 lg:p-6 max-h-[70vh] overflow-y-auto">
|
|
<form method="post" action="{% url 'send_interview_email' schedule.slug %}" class="space-y-4 sm:space-y-5">
|
|
{% csrf_token %}
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Recipient" %}
|
|
</label>
|
|
<input type="text" value="{{ schedule.application.email }}" readonly
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 bg-gray-50 text-gray-600 font-medium focus:outline-none cursor-not-allowed text-sm sm:text-base">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_email_form.subject.id_for_label }}">
|
|
{% trans "Subject" %}
|
|
</label>
|
|
<input type="text" name="subject" id="{{ interview_email_form.subject.id_for_label }}"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 placeholder:text-gray-400"
|
|
placeholder="{% trans 'Enter email subject...' %}"
|
|
value="{% if interview_email_form.subject.value %}{{ interview_email_form.subject.value }}{% endif %}">
|
|
{% if interview_email_form.subject.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_email_form.subject.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_email_form.message.id_for_label }}">
|
|
{% trans "Message" %}
|
|
</label>
|
|
<textarea name="message" id="{{ interview_email_form.message.id_for_label }}" rows="5"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 resize-y min-h-[150px] placeholder:text-gray-400"
|
|
placeholder="{% trans 'Enter your message...' %}"></textarea>
|
|
{% if interview_email_form.message.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_email_form.message.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<button type="button"
|
|
onclick="closeModal('emailModal')"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm text-white transition-all duration-200 bg-temple-red hover:bg-temple-red/90 active:bg-temple-red/80 touch-target">
|
|
<i data-lucide="send" class="w-4 h-4"></i>
|
|
{% trans "Send Email" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reschedule Modal -->
|
|
<div class="fixed inset-0 z-50 hidden overflow-y-auto" id="rescheduleModal" role="dialog" aria-labelledby="rescheduleModalLabel" aria-modal="true">
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity bg-black/50 backdrop-blur-sm" id="rescheduleModalBackdrop" onclick="closeModal('rescheduleModal')"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div class="inline-block w-full max-w-lg my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-2xl rounded-2xl" id="rescheduleModalContent">
|
|
<div class="flex items-center justify-between border-b border-gray-100 p-4 sm:p-5">
|
|
<h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2" id="rescheduleModalLabel">
|
|
<i data-lucide="refresh-cw" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Reschedule Interview" %}
|
|
</h3>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 transition-colors touch-target" onclick="closeModal('rescheduleModal')">
|
|
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 sm:p-5 lg:p-6 max-h-[70vh] overflow-y-auto">
|
|
<form method="post" action="{% url 'reschedule_meeting_for_application' schedule.slug %}" class="space-y-4 sm:space-y-5">
|
|
{% csrf_token %}
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ reschedule_form.new_date.id_for_label }}">
|
|
{% trans "New Date" %}
|
|
</label>
|
|
<input type="date" name="new_date" id="{{ reschedule_form.new_date.id_for_label }}"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200">
|
|
{% if reschedule_form.new_date.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ reschedule_form.new_date.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ reschedule_form.new_time.id_for_label }}">
|
|
{% trans "New Time" %}
|
|
</label>
|
|
<input type="time" name="new_time" id="{{ reschedule_form.new_time.id_for_label }}"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200">
|
|
{% if reschedule_form.new_time.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ reschedule_form.new_time.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ reschedule_form.reason.id_for_label }}">
|
|
{% trans "Reason for Rescheduling" %}
|
|
</label>
|
|
<textarea name="reason" id="{{ reschedule_form.reason.id_for_label }}" rows="3"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 resize-y min-h-[100px] placeholder:text-gray-400"
|
|
placeholder="{% trans 'Enter the reason for rescheduling...' %}"></textarea>
|
|
{% if reschedule_form.reason.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ reschedule_form.reason.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<button type="button"
|
|
onclick="closeModal('rescheduleModal')"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm text-white transition-all duration-200 bg-temple-red hover:bg-temple-red/90 active:bg-temple-red/80 touch-target">
|
|
<i data-lucide="refresh-cw" class="w-4 h-4"></i>
|
|
{% trans "Reschedule" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cancel Modal -->
|
|
<div class="fixed inset-0 z-50 hidden overflow-y-auto" id="cancelModal" role="dialog" aria-labelledby="cancelModalLabel" aria-modal="true">
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity bg-black/50 backdrop-blur-sm" id="cancelModalBackdrop" onclick="closeModal('cancelModal')"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div class="inline-block w-full max-w-lg my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-2xl rounded-2xl" id="cancelModalContent">
|
|
<div class="flex items-center justify-between border-b border-gray-100 p-4 sm:p-5">
|
|
<h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2" id="cancelModalLabel">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
|
|
{% trans "Cancel Interview" %}
|
|
</h3>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 transition-colors touch-target" onclick="closeModal('cancelModal')">
|
|
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 sm:p-5 lg:p-6 max-h-[70vh] overflow-y-auto">
|
|
<form method="post" action="{% url 'cancel_interview_for_application' schedule.slug %}" class="space-y-4 sm:space-y-5">
|
|
{% csrf_token %}
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ cancel_form.cancellation_reason.id_for_label }}">
|
|
{% trans "Reason for Cancellation" %}
|
|
</label>
|
|
<textarea name="cancellation_reason" id="{{ cancel_form.cancellation_reason.id_for_label }}" rows="3"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 resize-y min-h-[100px] placeholder:text-gray-400"
|
|
placeholder="{% trans 'Enter the reason for cancellation...' %}"></textarea>
|
|
{% if cancel_form.cancellation_reason.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ cancel_form.cancellation_reason.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 rounded-lg p-4">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5"></i>
|
|
<p class="text-yellow-800 text-sm">{% trans "Are you sure you want to cancel this interview? This action cannot be undone." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<button type="button"
|
|
onclick="closeModal('cancelModal')"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target">
|
|
{% trans "Close" %}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm text-white transition-all duration-200 bg-red-600 hover:bg-red-700 active:bg-red-800 touch-target">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel Interview" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Modal -->
|
|
<div class="fixed inset-0 z-50 hidden overflow-y-auto" id="resultModal" role="dialog" aria-labelledby="resultModalLabel" aria-modal="true">
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity bg-black/50 backdrop-blur-sm" id="resultModalBackdrop" onclick="closeModal('resultModal')"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div class="inline-block w-full max-w-lg my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-2xl rounded-2xl" id="resultModalContent">
|
|
<div class="flex items-center justify-between border-b border-gray-100 p-4 sm:p-5">
|
|
<h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2" id="resultModalLabel">
|
|
<i data-lucide="check-circle" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Update Interview Result" %}
|
|
</h3>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 transition-colors touch-target" onclick="closeModal('resultModal')">
|
|
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 sm:p-5 lg:p-6 max-h-[70vh] overflow-y-auto">
|
|
<form method="post" action="{% url 'update_interview_result' interview.slug %}" class="space-y-4 sm:space-y-5">
|
|
{% csrf_token %}
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_result_form.interview_result.id_for_label }}">
|
|
{% trans "Interview Result" %}
|
|
</label>
|
|
<select name="interview_result" id="{{ interview_result_form.interview_result.id_for_label }}"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base bg-white focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 cursor-pointer">
|
|
<option value="">-- {% trans "Select Result" %} --</option>
|
|
<option value="passed">{% trans "Passed" %}</option>
|
|
<option value="failed">{% trans "Failed" %}</option>
|
|
<option value="pending">{% trans "Pending" %}</option>
|
|
</select>
|
|
{% if interview_result_form.interview_result.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_result_form.interview_result.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_result_form.result_comments.id_for_label }}">
|
|
{% trans "Comments" %}
|
|
</label>
|
|
<textarea name="result_comments" id="{{ interview_result_form.result_comments.id_for_label }}" rows="3"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 resize-y min-h-[100px] placeholder:text-gray-400"
|
|
placeholder="{% trans 'Enter any comments...' %}"></textarea>
|
|
{% if interview_result_form.result_comments.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_result_form.result_comments.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<button type="button"
|
|
onclick="closeModal('resultModal')"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm text-white transition-all duration-200 bg-temple-red hover:bg-temple-red/90 active:bg-temple-red/80 touch-target">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
{% trans "Update Result" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Modal -->
|
|
<div class="fixed inset-0 z-50 hidden overflow-y-auto" id="statusModal" role="dialog" aria-labelledby="statusModalLabel" aria-modal="true">
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 transition-opacity bg-black/50 backdrop-blur-sm" id="statusModalBackdrop" onclick="closeModal('statusModal')"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div class="inline-block w-full max-w-lg my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-2xl rounded-2xl" id="statusModalContent">
|
|
<div class="flex items-center justify-between border-b border-gray-100 p-4 sm:p-5">
|
|
<h3 class="text-base sm:text-lg font-bold text-gray-900 flex items-center gap-2" id="statusModalLabel">
|
|
<i data-lucide="refresh-cw" class="w-5 h-5 text-temple-red"></i>
|
|
{% trans "Update Interview Status" %}
|
|
</h3>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 transition-colors touch-target" onclick="closeModal('statusModal')">
|
|
<i data-lucide="x" class="w-5 h-5 sm:w-6 sm:h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-4 sm:p-5 lg:p-6 max-h-[70vh] overflow-y-auto">
|
|
<form method="post" action="{% url 'update_interview_status' schedule.slug %}" class="space-y-4 sm:space-y-5">
|
|
{% csrf_token %}
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_result_form.interview_result.id_for_label }}">
|
|
{% trans "Interview Result" %}
|
|
</label>
|
|
<select name="interview_result" id="{{ interview_result_form.interview_result.id_for_label }}"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base bg-white focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 cursor-pointer">
|
|
<option value="">-- {% trans "Select Result" %} --</option>
|
|
<option value="passed">{% trans "Passed" %}</option>
|
|
<option value="failed">{% trans "Failed" %}</option>
|
|
<option value="pending">{% trans "Pending" %}</option>
|
|
</select>
|
|
{% if interview_result_form.interview_result.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_result_form.interview_result.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_result_form.result_comments.id_for_label }}">
|
|
{% trans "Comments" %}
|
|
</label>
|
|
<textarea name="result_comments" id="{{ interview_result_form.result_comments.id_for_label }}" rows="3"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 resize-y min-h-[100px] placeholder:text-gray-400"
|
|
placeholder="{% trans 'Enter any comments...' %}"></textarea>
|
|
{% if interview_result_form.result_comments.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_result_form.result_comments.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_status_form.status.id_for_label }}">
|
|
{% trans "Interview Status" %}
|
|
</label>
|
|
<select name="status" id="{{ interview_status_form.status.id_for_label }}"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base bg-white focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 cursor-pointer">
|
|
<option value="">-- {% trans "Select Status" %} --</option>
|
|
<option value="scheduled">{% trans "Scheduled" %}</option>
|
|
<option value="confirmed">{% trans "Confirmed" %}</option>
|
|
<option value="completed">{% trans "Completed" %}</option>
|
|
<option value="cancelled">{% trans "Cancelled" %}</option>
|
|
</select>
|
|
{% if interview_status_form.status.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_status_form.status.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ interview_status_form.status_notes.id_for_label }}">
|
|
{% trans "Notes" %}
|
|
</label>
|
|
<textarea name="status_notes" id="{{ interview_status_form.status_notes.id_for_label }}" rows="3"
|
|
class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 text-gray-700 text-sm sm:text-base focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition-all duration-200 resize-y min-h-[100px] placeholder:text-gray-400"
|
|
placeholder="{% trans 'Enter any notes...' %}"></textarea>
|
|
{% if interview_status_form.status_notes.errors %}
|
|
<div class="mt-1 text-red-600 text-xs">
|
|
{{ interview_status_form.status_notes.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<button type="button"
|
|
onclick="closeModal('statusModal')"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm border-2 border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-all duration-200 touch-target">
|
|
{% trans "Close" %}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium text-sm text-white transition-all duration-200 bg-temple-red hover:bg-temple-red/90 active:bg-temple-red/80 touch-target">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
{% trans "Update Status" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Style form fields
|
|
setTimeout(styleFormFields, 100);
|
|
});
|
|
|
|
// Style form fields function
|
|
function styleFormFields() {
|
|
// Style text inputs (including those wrapped by crispy forms)
|
|
const inputs = document.querySelectorAll('input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input[type="tel"]');
|
|
inputs.forEach(input => {
|
|
if (!input.classList.contains('styled')) {
|
|
// Remove any existing conflicting classes
|
|
input.className = input.className.replace(/form-control/g, 'styled');
|
|
input.className = input.className.replace(/textinput/g, '');
|
|
// Add base input styling
|
|
input.classList.add('w-full', 'px-4', 'py-3', 'rounded-xl', 'border-2', 'border-gray-200', 'text-gray-700', 'text-sm', 'sm:text-base', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition-all', 'duration-200', 'placeholder:text-gray-400', 'styled');
|
|
}
|
|
});
|
|
|
|
// Style select dropdowns
|
|
const selects = document.querySelectorAll('select');
|
|
selects.forEach(select => {
|
|
if (!select.classList.contains('styled')) {
|
|
// Remove any existing conflicting classes
|
|
select.className = select.className.replace(/form-control/g, 'styled');
|
|
select.className = select.className.replace(/select/g, '');
|
|
// Add base select styling
|
|
select.classList.add('w-full', 'px-4', 'py-3', 'rounded-xl', 'border-2', 'border-gray-200', 'text-gray-700', 'text-sm', 'sm:text-base', 'bg-white', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition-all', 'duration-200', 'cursor-pointer', 'styled');
|
|
}
|
|
});
|
|
|
|
// Style textareas
|
|
const textareas = document.querySelectorAll('textarea');
|
|
textareas.forEach(textarea => {
|
|
if (!textarea.classList.contains('styled')) {
|
|
// Remove any existing conflicting classes
|
|
textarea.className = textarea.className.replace(/form-control/g, 'styled');
|
|
textarea.className = textarea.className.replace(/textarea/g, '');
|
|
// Add base textarea styling
|
|
textarea.classList.add('w-full', 'px-4', 'py-3', 'rounded-xl', 'border-2', 'border-gray-200', 'text-gray-700', 'text-sm', 'sm:text-base', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition-all', 'duration-200', 'resize-y', 'min-h-[100px]', 'placeholder:text-gray-400', 'styled');
|
|
}
|
|
});
|
|
|
|
// Reinitialize icons after form field styling
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
// Open modal function
|
|
function openModal(modalId) {
|
|
const modal = document.getElementById(modalId);
|
|
|
|
if (modal) {
|
|
modal.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Style form fields after modal opens with multiple retries
|
|
setTimeout(function() {
|
|
styleFormFields();
|
|
}, 100);
|
|
setTimeout(function() {
|
|
styleFormFields();
|
|
}, 300);
|
|
setTimeout(function() {
|
|
styleFormFields();
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
// Close modal function
|
|
function closeModal(modalId) {
|
|
const modal = document.getElementById(modalId);
|
|
|
|
if (modal) {
|
|
modal.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
}
|
|
}
|
|
|
|
// Close modal on ESC key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
const openModals = document.querySelectorAll('.fixed.inset-0.z-50:not(.hidden)');
|
|
openModals.forEach(modal => {
|
|
closeModal(modal.id);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Copy Join URL function
|
|
async function copyJoinUrl() {
|
|
const joinUrlElement = document.getElementById('joinMeetingLink');
|
|
const urlToCopy = joinUrlElement.href;
|
|
const messageElement = document.getElementById('copyMessage');
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(urlToCopy);
|
|
messageElement.textContent = '✓ {% trans "Join URL copied successfully!" %}';
|
|
messageElement.classList.add('text-green-600');
|
|
messageElement.classList.remove('text-red-600');
|
|
|
|
setTimeout(function() {
|
|
messageElement.textContent = '';
|
|
}, 3000);
|
|
} catch (e) {
|
|
messageElement.textContent = '✗ {% trans "Failed to copy Join URL." %}';
|
|
messageElement.classList.add('text-red-600');
|
|
messageElement.classList.remove('text-green-600');
|
|
console.error('Could not copy URL', e);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|