280 lines
14 KiB
HTML
280 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n widget_tweaks %}
|
|
|
|
{% block title %}{% trans "Schedule Remote Meeting" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'list_meetings' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i> {% trans "Meetings" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold" style="color: #9d2235;">{% trans "Create Remote Interview" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-3 text-gray-900">
|
|
<i data-lucide="globe" class="w-8 h-8" style="color: #9d2235;"></i>
|
|
{% trans "Create Remote Interview" %}
|
|
</h1>
|
|
<a href="{% url 'list_meetings' %}"
|
|
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 Meetings" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
|
|
<h2 class="text-lg font-bold text-gray-700 flex items-center gap-2">
|
|
<i data-lucide="video" class="w-5 h-5"></i>
|
|
{% trans "Remote Meeting Details" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="p-6">
|
|
{% if form.non_field_errors %}
|
|
<div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="text-red-700 mb-0">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Core Meeting Details -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Application -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.application.id_for_label }}">
|
|
{{ form.application.label }} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.application|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 bg-white" }}
|
|
{% if form.application.help_text %}
|
|
<p class="text-gray-500 text-sm mt-1">{{ form.application.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.application.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.application.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Job -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.job.id_for_label }}">
|
|
{{ form.job.label }} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.job|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 bg-white" }}
|
|
{% if form.job.help_text %}
|
|
<p class="text-gray-500 text-sm mt-1">{{ form.job.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.job.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.job.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Topic -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.topic.id_for_label }}">
|
|
{{ form.topic.label }} <span class="text-red-500">*</span>
|
|
</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:form.topic.label" }}
|
|
{% if form.topic.help_text %}
|
|
<p class="text-gray-500 text-sm mt-1">{{ form.topic.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.topic.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.topic.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Start Time -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.start_time.id_for_label }}">
|
|
{{ form.start_time.label }} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.start_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.start_time.help_text %}
|
|
<p class="text-gray-500 text-sm mt-1">{{ form.start_time.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.start_time.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.start_time.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Duration -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.duration.id_for_label }}">
|
|
{{ form.duration.label }} <span class="text-red-500">*</span>
|
|
</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:30" }}
|
|
{% if form.duration.help_text %}
|
|
<p class="text-gray-500 text-sm mt-1">{{ form.duration.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.duration.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.duration.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-gray-200 my-6">
|
|
|
|
<!-- Remote Configuration -->
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2" style="color: #9d2235;">
|
|
<i data-lucide="settings" class="w-5 h-5"></i>
|
|
{% trans "Remote Configuration" %}
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Host Email -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.host_email.id_for_label }}">
|
|
{{ form.host_email.label }} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.host_email|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.host_email.help_text %}
|
|
<p class="text-gray-500 text-sm mt-1">{{ form.host_email.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.host_email.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.host_email.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.password.id_for_label }}">
|
|
{{ form.password.label }}
|
|
</label>
|
|
{{ form.password|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.password.help_text %}
|
|
<p class="text-gray-500 text-sm mt-1">{{ form.password.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.password.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ form.password.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Participant Video Toggle -->
|
|
<div class="mt-6">
|
|
<div class="flex items-center gap-3">
|
|
{{ form.participant_video|add_class:"w-5 h-5 border-gray-300 rounded focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" }}
|
|
<label class="text-sm font-semibold text-gray-700" for="{{ form.participant_video.id_for_label }}">
|
|
{{ form.participant_video.label }}
|
|
</label>
|
|
</div>
|
|
{% if form.participant_video.help_text %}
|
|
<p class="text-gray-500 text-sm mt-2 ml-8">{{ form.participant_video.help_text }}</p>
|
|
{% endif %}
|
|
{% if form.participant_video.errors %}
|
|
<div class="text-red-600 text-sm mt-2 ml-8">{{ form.participant_video.errors.0 }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden status field -->
|
|
{{ form.status|attr:"type:hidden" }}
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
|
|
<a href="{% url 'list_meetings' %}"
|
|
class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="video" class="w-4 h-4"></i>
|
|
{% trans "Create Remote Interview" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Form validation
|
|
const form = document.querySelector('form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const application = document.getElementById('id_application').value;
|
|
const job = document.getElementById('id_job').value;
|
|
const topic = document.getElementById('id_topic').value.trim();
|
|
const startTime = document.getElementById('id_start_time').value.trim();
|
|
const duration = document.getElementById('id_duration').value.trim();
|
|
const hostEmail = document.getElementById('id_host_email').value.trim();
|
|
|
|
if (!application) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please select an application.' %}");
|
|
document.getElementById('id_application').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!job) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please select a job.' %}");
|
|
document.getElementById('id_job').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!topic) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a topic.' %}");
|
|
document.getElementById('id_topic').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!startTime) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a start time.' %}");
|
|
document.getElementById('id_start_time').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!duration) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a duration.' %}");
|
|
document.getElementById('id_duration').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!hostEmail) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please enter a host email.' %}");
|
|
document.getElementById('id_host_email').focus();
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |