update the interview stage

NorahUniversity/settings.py

@@ -57,6 +57,7 @@ INSTALLED_APPS = [
     'django_countries',
     'django_celery_results',
     'django_q',
+    'widget_tweaks',
     'easyaudit'
 
 ]

recruitment/models.py

@@ -273,12 +273,12 @@ class Candidate(Base):
         CANDIDATE = "Candidate", _("Candidate")
 
     # Stage transition validation constants
-    # STAGE_SEQUENCE = {
+    STAGE_SEQUENCE = {
-    #     "Applied": ["Exam", "Interview", "Offer"],
+        "Applied": ["Exam", "Interview", "Offer"],
-    #     "Exam": ["Interview", "Offer"],
+        "Exam": ["Interview", "Offer"],
-    #     "Interview": ["Offer"],
+        "Interview": ["Offer"],
-    #     "Offer": [],  # Final stage - no further transitions
+        "Offer": [],  # Final stage - no further transitions
-    # }
+    }
 
     job = models.ForeignKey(
         JobPosting,
@@ -412,13 +412,13 @@ class Candidate(Base):
     #     allowed_next_stages = self.STAGE_SEQUENCE.get(old_stage, [])
     #     return new_stage in allowed_next_stages
 
-    # def get_available_stages(self):
+    def get_available_stages(self):
-    #     """Get list of stages this candidate can transition to"""
+        """Get list of stages this candidate can transition to"""
-    #     if not self.pk:  # New record
+        if not self.pk:  # New record
-    #         return ["Applied"]
+            return ["Applied"]
 
-    #     old_stage = self.__class__.objects.get(pk=self.pk).stage
+        old_stage = self.__class__.objects.get(pk=self.pk).stage
-    #     return self.STAGE_SEQUENCE.get(old_stage, [])
+        return self.STAGE_SEQUENCE.get(old_stage, [])
 
     @property
     def submission(self):

recruitment/urls.py

@@ -68,6 +68,8 @@ urlpatterns = [
     path('jobs/<slug:slug>/candidate_exam_view/', views.candidate_exam_view, name='candidate_exam_view'),
     path('jobs/<slug:slug>/candidate_interview_view/', views.candidate_interview_view, name='candidate_interview_view'),
 
+    path('jobs/<slug:slug>/<int:candidate_id>/reschedule_meeting_for_candidate/<int:meeting_id>/', views.reschedule_meeting_for_candidate, name='reschedule_meeting_for_candidate'),
+
     path('jobs/<slug:slug>/update_candidate_exam_status/', views.update_candidate_exam_status, name='update_candidate_exam_status'),
     path('jobs/<slug:slug>/bulk_update_candidate_exam_status/', views.bulk_update_candidate_exam_status, name='bulk_update_candidate_exam_status'),
 
@@ -100,7 +102,8 @@ urlpatterns = [
     path('jobs/<slug:job_slug>/candidates/<int:candidate_pk>/reschedule-meeting/<int:interview_pk>/', views.reschedule_candidate_meeting, name='reschedule_candidate_meeting'),
     path('api/jobs/<slug:job_slug>/candidates/<int:candidate_pk>/reschedule-meeting/<int:interview_pk>/', views.api_reschedule_candidate_meeting, name='api_reschedule_candidate_meeting'),
     # New URL for simple page-based meeting scheduling
-    path('jobs/<slug:job_slug>/candidates/<int:candidate_pk>/schedule-meeting-page/', views.schedule_meeting_for_candidate, name='schedule_meeting_for_candidate'),
+    path('jobs/<slug:slug>/candidates/<int:candidate_pk>/schedule-meeting-page/', views.schedule_meeting_for_candidate, name='schedule_meeting_for_candidate'),
+    path('jobs/<slug:slug>/candidates/<int:candidate_pk>/delete_meeting_for_candidate/<int:meeting_id>/', views.delete_meeting_for_candidate, name='delete_meeting_for_candidate'),
 
 
     # users urls

recruitment/utils.py

@@ -579,3 +579,38 @@ def get_candidates_from_request(request):
         except Exception as e:
             logger.error(e)
             yield None
+
+
+
+def update_meeting(instance, updated_data):
+    result = update_zoom_meeting(instance.meeting_id, updated_data)
+    if result["status"] == "success":
+        # Fetch the latest details from Zoom after successful update
+        details_result = get_zoom_meeting_details(instance.meeting_id)
+
+        if details_result["status"] == "success":
+            zoom_details = details_result["meeting_details"]
+            # Update instance with fetched details
+
+            instance.topic = zoom_details.get("topic", instance.topic)
+
+            instance.duration = zoom_details.get("duration", instance.duration)
+            instance.join_url = zoom_details.get("join_url", instance.join_url)
+            instance.password = zoom_details.get("password", instance.password)
+            # Corrected status assignment: instance.status, not instance.password
+            instance.status = zoom_details.get("status")
+
+            instance.zoom_gateway_response = details_result.get("meeting_details") # Store full response
+            instance.save()
+            logger.info(f"Successfully updated Zoom meeting {instance.meeting_id}.")
+            return {"status": "success", "message": "Zoom meeting updated successfully."}
+        elif details_result["status"] == "error":
+            # If fetching details fails, save with form data and log a warning
+            logger.warning(
+                f"Successfully updated Zoom meeting {instance.meeting_id}, but failed to fetch updated details. "
+                f"Error: {details_result.get('message', 'Unknown error')}"
+            )
+            return {"status": "success", "message": "Zoom meeting updated successfully."}
+
+    logger.warning(f"Failed to update Zoom meeting {instance.meeting_id}. Error: {result.get('message', 'Unknown error')}")
+    return {"status": "error", "message": result.get("message", "Zoom meeting update failed.")}

recruitment/views.py

@@ -32,6 +32,7 @@ from .utils import (
     create_zoom_meeting,
     delete_zoom_meeting,
     get_candidates_from_request,
+    update_meeting,
     update_zoom_meeting,
     get_zoom_meeting_details,
     schedule_interviews,
@@ -171,39 +172,14 @@ class ZoomMeetingUpdateView(UpdateView):
         if instance.start_time < timezone.now():
             messages.error(self.request, "Start time must be in the future.")
             return redirect(f"/update-meeting/{instance.pk}/", status=400)
-        result = update_zoom_meeting(instance.meeting_id, updated_data)
+
+        result = update_meeting(instance, updated_data)
 
         if result["status"] == "success":
-            # Fetch the latest details from Zoom after successful update
+            messages.success(self.request, result["message"])
-            details_result = get_zoom_meeting_details(instance.meeting_id)
-
-            if details_result["status"] == "success":
-                zoom_details = details_result["meeting_details"]
-                # Update instance with fetched details
-
-                instance.topic = zoom_details.get("topic", instance.topic)
-
-                instance.duration = zoom_details.get("duration", instance.duration)
-                instance.join_url = zoom_details.get("join_url", instance.join_url)
-                instance.password = zoom_details.get("password", instance.password)
-                # Corrected status assignment: instance.status, not instance.password
-                instance.status = zoom_details.get("status")
-
-                instance.zoom_gateway_response = details_result.get("meeting_details") # Store full response
-                instance.save()
-                messages.success(self.request, result["message"] + " Local data updated from Zoom.")
-            else:
-                # If fetching details fails, save with form data and log a warning
-                logger.warning(
-                    f"Successfully updated Zoom meeting {instance.meeting_id}, but failed to fetch updated details. "
-                    f"Error: {details_result.get('message', 'Unknown error')}"
-                )
-                instance.save() # Save with data from the form
-                messages.success(self.request, result["message"] + " (Note: Could not refresh local data from Zoom.)")
-            return redirect(reverse("meeting_details", kwargs={"slug": instance.slug}))
         else:
             messages.error(self.request, result["message"])
-            return redirect(reverse("meeting_details", kwargs={"slug": instance.slug}))
+        return redirect(reverse("meeting_details", kwargs={"slug": instance.slug}))
 
 
 def ZoomMeetingDeleteView(request, pk):
@@ -1125,17 +1101,6 @@ def form_submission_details(request, template_id, slug):
 
 def schedule_interviews_view(request, slug):
     job = get_object_or_404(JobPosting, slug=slug)
-
-    # if request.method == "POST" and "Datastar-Request" in request.headers:
-    #     form = InterviewScheduleForm(slug=slug)
-    #     break_formset = BreakTimeFormSet()
-    #     form.initial["candidates"] = get_candidates_from_request(request)
-    #     def response():
-    #         html = render_to_string("includes/schedule_interview_div.html",{"form": form, "break_formset": break_formset, "job": job})
-    #         yield SSE.patch_elements(html,"#candidateviewModalBody")
-    #     return DatastarResponse(response())
-
-
     if request.method == "POST":
         form = InterviewScheduleForm(slug, request.POST)
         break_formset = BreakTimeFormSet(request.POST)
@@ -1193,16 +1158,15 @@ def schedule_interviews_view(request, slug):
                     # Create Zoom meeting
                     meeting_topic = f"Interview for {job.title} - {candidate.name}"
 
-                    start_time = interview_datetime.isoformat() + "Z"
+                    start_time = interview_datetime
 
-                    zoom_meeting = create_zoom_meeting(
+                    # zoom_meeting = create_zoom_meeting(
-                        topic=meeting_topic,
+                    #     topic=meeting_topic,
-                        start_time=start_time,
+                    #     start_time=start_time,
-                        duration=schedule.interview_duration
+                    #     duration=schedule.interview_duration
-                    )
+                    # )
 
                     result = create_zoom_meeting(meeting_topic, start_time, schedule.interview_duration)
-
                     if result["status"] == "success":
                         zoom_meeting = ZoomMeeting.objects.create(
                             topic=meeting_topic,
@@ -1212,16 +1176,19 @@ def schedule_interviews_view(request, slug):
                             join_url=result["meeting_details"]["join_url"],
                             zoom_gateway_response=result["zoom_gateway_response"],
                         )
-
+                        # Create scheduled interview record
-                    # Create scheduled interview record
+                        ScheduledInterview.objects.create(
-                    scheduled_interview = ScheduledInterview.objects.create(
+                            candidate=candidate,
-                        candidate=candidate,
+                            job=job,
-                        job=job,
+                            zoom_meeting=zoom_meeting,
-                        zoom_meeting=zoom_meeting,
+                            schedule=schedule,
-                        schedule=schedule,
+                            interview_date=slot['date'],
-                        interview_date=slot['date'],
+                            interview_time=slot['time']
-                        interview_time=slot['time']
+                        )
-                    )
+                    else:
+                        messages.error(request, result["message"])
+                        schedule.delete()
+                        return redirect("candidate_interview_view", slug=slug)
 
                     # Send email to candidate
                     # try:
@@ -1354,9 +1321,9 @@ def schedule_interviews_view(request, slug):
     else:
         form = InterviewScheduleForm(slug=slug)
         break_formset = BreakTimeFormSet()
-        print(request.headers)
+        if "HX-Request" in request.headers:
-        if "Hx-Request" in request.headers:
+            candidate_ids = request.GET.getlist("candidate_ids")
-            form.initial["candidates"] = [Candidate.objects.get(pk=c[0]) for c in request.GET.items()]
+            form.initial["candidates"] = Candidate.objects.filter(pk__in = candidate_ids)
 
     return render(
         request,
@@ -1675,7 +1642,6 @@ def candidate_screening_view(request, slug):
     return render(request, "recruitment/candidate_screening_view.html", context)
 
 
-
 def candidate_exam_view(request, slug):
     """
     Manage candidate tiers and stage transitions
@@ -1728,7 +1694,6 @@ def candidate_update_status(request, slug):
     job = get_object_or_404(JobPosting, slug=slug)
     mark_as = request.POST.get('mark_as')
     candidate_ids = request.POST.getlist("candidate_ids")
-
     if c := Candidate.objects.filter(pk__in = candidate_ids):
         c.update(stage=mark_as,exam_date=timezone.now(),applicant_status="Candidate" if mark_as in ["Exam","Interview","Offer"] else "Applicant")
 
@@ -1739,14 +1704,55 @@ def candidate_update_status(request, slug):
 
 def candidate_interview_view(request,slug):
     job = get_object_or_404(JobPosting,slug=slug)
-    if "Datastar-Request" in request.headers:
+    context = {"job":job,"candidates":job.candidates.filter(stage="Interview").order_by("-match_score")}
-        for candidate in get_candidates_from_request(request):
-            print(candidate)
-    context = {"job":job,"candidates":job.candidates.all()}
     return render(request,"recruitment/candidate_interview_view.html",context)
 
+def reschedule_meeting_for_candidate(request,slug,candidate_id,meeting_id):
+    job = get_object_or_404(JobPosting,slug=slug)
+    candidate = get_object_or_404(Candidate,pk=candidate_id)
+    meeting = get_object_or_404(ZoomMeeting,pk=meeting_id)
+    form = ZoomMeetingForm(instance=meeting)
+
+    if request.method == "POST":
+        form = ZoomMeetingForm(request.POST,instance=meeting)
+        if form.is_valid():
+            instance = form.save(commit=False)
+            updated_data = {
+                "topic": instance.topic,
+                "start_time": instance.start_time.isoformat() + "Z",
+                "duration": instance.duration,
+            }
+            if instance.start_time < timezone.now():
+                messages.error(request, "Start time must be in the future.")
+                return redirect("reschedule_meeting_for_candidate",slug=job.slug,candidate_id=candidate_id,meeting_id=meeting_id)
+
+            result = update_meeting(instance, updated_data)
+
+            if result["status"] == "success":
+                messages.success(request, result["message"])
+            else:
+                messages.error(request, result["message"])
+            return redirect(reverse("candidate_interview_view", kwargs={"slug": job.slug}))
+
+    context = {"job":job,"candidate":candidate,"meeting":meeting,"form":form}
+    return render(request,"meetings/reschedule_meeting.html",context)
 
 
+def delete_meeting_for_candidate(request,slug,candidate_pk,meeting_id):
+    job = get_object_or_404(JobPosting,slug=slug)
+    candidate = get_object_or_404(Candidate,pk=candidate_pk)
+    meeting = get_object_or_404(ZoomMeeting,pk=meeting_id)
+    if request.method == "POST":
+        result = delete_zoom_meeting(meeting.meeting_id)
+        if result["status"] == "success":
+            meeting.delete()
+            messages.success(request, result["message"])
+        else:
+            messages.error(request, result["message"])
+        return redirect(reverse("candidate_interview_view", kwargs={"slug": job.slug}))
+
+    context = {"job":job,"candidate":candidate,"meeting":meeting}
+    return render(request,"meetings/delete_meeting_form.html",context)
 
 def interview_calendar_view(request, slug):
     job = get_object_or_404(JobPosting, slug=slug)
@@ -2230,12 +2236,12 @@ def reschedule_candidate_meeting(request, job_slug, candidate_pk, interview_pk):
         })
 
 
-def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
+def schedule_meeting_for_candidate(request, slug, candidate_pk):
     """
     Handles GET to display a simple form for scheduling a meeting for a candidate.
     Handles POST to process the form, create the meeting, and redirect back.
     """
-    job = get_object_or_404(JobPosting, slug=job_slug)
+    job = get_object_or_404(JobPosting, slug=slug)
     candidate = get_object_or_404(Candidate, pk=candidate_pk, job=job)
 
     if request.method == "POST":
@@ -2253,14 +2259,15 @@ def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
             if start_time_val <= timezone.now():
                 messages.error(request, "Start time must be in the future.")
                 # Re-render form with error and initial data
-                return render(request, "recruitment/schedule_meeting_form.html", {
+                return redirect('candidate_interview_view', slug=job.slug)
-                    'form': form,
+                # return render(request, "recruitment/schedule_meeting_form.html", {
-                    'job': job,
+                #     'form': form,
-                    'candidate': candidate,
+                #     'job': job,
-                    'initial_topic': topic_val,
+                #     'candidate': candidate,
-                    'initial_start_time': start_time_val.strftime('%Y-%m-%dT%H:%M') if start_time_val else '',
+                #     'initial_topic': topic_val,
-                    'initial_duration': duration_val
+                #     'initial_start_time': start_time_val.strftime('%Y-%m-%dT%H:%M') if start_time_val else '',
-                })
+                #     'initial_duration': duration_val
+                # })
 
             # Create Zoom meeting using utility function
             # The create_zoom_meeting expects start_time as a datetime object
@@ -2307,7 +2314,7 @@ def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
                 })
         else:
             # Form validation errors
-            return render(request, "recruitment/schedule_meeting_form.html", {
+            return render(request, "meetings/schedule_meeting_form.html", {
                 'form': form,
                 'job': job,
                 'candidate': candidate,
@@ -2322,7 +2329,7 @@ def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
             'duration': 60, # Default duration
         }
         form = ZoomMeetingForm(initial=initial_data)
-        return render(request, "recruitment/schedule_meeting_form.html", {
+        return render(request, "meetings/schedule_meeting_form.html", {
             'form': form,
             'job': job,
             'candidate': candidate

templates/base.html

@@ -12,272 +12,18 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     {% comment %} <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
     <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> {% endcomment %}
-    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+    <link rel="stylesheet" href="{% static 'css/main.css' %}">
 
-    <style>
-        :root {
-            --kaauh-teal: #00636e;
-            --kaauh-teal-dark: #004a53;
-            --kaauh-light-bg: #f9fbfd;
-            --kaauh-border: #eaeff3;
-        }
-
-        /* NEW CLASS FOR WIDER CONTENT */
-        .max-width-1600 {
-            max-width: 1600px;
-            margin-right: auto;
-            margin-left: auto;
-            padding-right: var(--bs-gutter-x, 0.75rem); /* Add Bootstrap padding for responsiveness */
-            padding-left: var(--bs-gutter-x, 0.75rem);
-        }
-
-        /* === Top Bar === */
-        .top-bar {
-            background-color: white;
-            border-bottom: 1px solid var(--kaauh-border);
-            font-size: 0.825rem;
-            padding: 0.4rem 0;
-        }
-        .top-bar a { text-decoration: none; }
-        .top-bar .social-icons i {
-            color: var(--kaauh-teal);
-            transition: color 0.2s;
-        }
-        .top-bar .social-icons i:hover {
-            color: var(--kaauh-teal-dark);
-        }
-        .top-bar .contact-item {
-            display: flex;
-            align-items: center;
-            gap: 0.35rem;
-            padding: 0.25rem 0.5rem;
-        }
-        .top-bar .logo-container img {
-            height: 60px;
-            object-fit: contain;
-        }
-
-        @media (max-width: 767.98px) {
-            .top-bar {
-                display: none;
-            }
-        }
-
-        /* === Navbar === */
-        .navbar-brand {
-            font-weight: 700;
-            letter-spacing: -0.5px;
-            font-size: 1.25rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .navbar-dark {
-            background-color: var(--kaauh-teal) !important;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.12);
-        }
-        /* Change the outer navbar container to fluid, rely on inner max-width */
-        .navbar-dark > .container {
-            max-width: 100%; /* Override default container width */
-        }
-        .nav-link {
-            font-weight: 500;
-            transition: all 0.2s ease;
-            padding: 0.5rem 0.75rem;
-        }
-        .nav-link:hover,
-        .nav-link.active {
-            color: white !important;
-            background: rgba(255,255,255,0.12) !important;
-            border-radius: 4px;
-        }
-
-        /* Dropdown - Enhanced UX */
-        .dropdown-menu {
-            backdrop-filter: blur(4px);
-            background-color: rgba(255, 255, 255, 0.98);
-            border: 1px solid var(--kaauh-border);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
-            border-radius: 8px;
-            padding: 0.5rem 0;
-            min-width: 200px;
-            will-change: transform, opacity;
-            transition: transform 0.2s ease, opacity 0.2s ease;
-        }
-        .dropdown-item {
-            padding: 0.5rem 1.25rem;
-            transition: background-color 0.15s;
-        }
-        .dropdown-item:hover {
-            background-color: var(--kaauh-light-bg);
-            color: var(--kaauh-teal-dark);
-        }
-
-        /* Language Toggle Button Style */
-        .language-toggle-btn {
-            color: white !important;
-            background: none !important;
-            border: none !important;
-            display: flex;
-            align-items: center;
-            gap: 0.3rem;
-            padding: 0.5rem 0.75rem !important;
-            font-weight: 500;
-            transition: all 0.2s ease;
-        }
-        .language-toggle-btn:hover {
-            background: rgba(255,255,255,0.12) !important;
-            border-radius: 4px;
-        }
-
-        /* Profile Avatar - Enhanced Feedback */
-        .profile-avatar {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            background: var(--kaauh-teal);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: bold;
-            font-size: 0.85rem;
-            transition: transform 0.1s ease;
-        }
-        /* Subtle hover effect for the profile button */
-        .navbar-nav .dropdown-toggle:hover .profile-avatar {
-            transform: scale(1.05);
-        }
-        .navbar-nav .dropdown-toggle.p-0:hover {
-             background: none !important; /* Keep avatar background fixed */
-        }
-
-
-        /* === Job Table and other sections CSS remain the same... === */
-        .job-table-wrapper {
-            background: white;
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
-            margin-bottom: 2rem;
-        }
-        .job-table thead th {
-            background: var(--kaauh-teal);
-            color: white;
-            font-weight: 600;
-            padding: 1rem;
-            text-align: center;
-        }
-        .job-table td {
-            padding: 1rem;
-            vertical-align: middle;
-            text-align: center;
-        }
-        .job-table tr:hover td {
-            background-color: rgba(0, 99, 110, 0.03);
-        }
-        .btn-apply {
-            background: var(--kaauh-teal);
-            border: none;
-            color: white;
-            padding: 0.45rem 1rem;
-            font-weight: 600;
-            border-radius: 6px;
-            transition: all 0.2s;
-            white-space: nowrap;
-        }
-        .btn-apply:hover {
-            background: var(--kaauh-teal-dark);
-            transform: translateY(-1px);
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-        }
-
-        @media (max-width: 575.98px) {
-            .table-responsive {
-                overflow-x: auto;
-                -webkit-overflow-scrolling: touch;
-            }
-            .job-table th,
-            .job-table td {
-                white-space: nowrap;
-                font-size: 0.875rem;
-            }
-        }
-
-        /* === Footer & Alerts === */
-        .footer {
-            background: var(--kaauh-light-bg);
-            padding: 1.5rem 0;
-            border-top: 1px solid var(--kaauh-border);
-            font-size: 0.9rem;
-            color: #555;
-        }
-        .alert {
-            border: none;
-            border-radius: 8px;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-        }
-        /* The main content width is already handled by the inline style, but making it explicit here */
-        main.container-fluid {
-            min-height: calc(100vh - 200px);
-            padding: 1.5rem 0;
-        }
-
-        /* === RTL Support === */
-        html[dir="rtl"] {
-            text-align: right;
-            direction: rtl;
-        }
-        html[dir="rtl"] .navbar-brand {
-            flex-direction: row-reverse;
-        }
-        html[dir="rtl"] .dropdown-menu {
-             /* Ensures RTL dropdown menu opens left aligned to its button when dropdown-menu-end isn't used */
-             right: auto;
-             left: 0;
-        }
-        html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
-        html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
-        html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
-        html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
-        html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
-        html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
-
-
-    .form-control-sm,
-    .btn-sm {
-        /* Reduce vertical padding even more than default Bootstrap 'sm' */
-        padding-top: 0.2rem !important;
-        padding-bottom: 0.2rem !important;
-        /* Ensure a consistent, small height for both */
-        height: 35px !important;
-        font-size: 2 rem !important; /* Slightly smaller font */
-    }
-
-    </style>
     {% block customCSS %}{% endblock %}
 </head>
 <body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
 
     <div class="top-bar d-none d-md-block">
-        {# Changed container to container-fluid and added max-width-1600 to inner div #}
         <div class="container-fluid">
             <div class="d-flex justify-content-between align-items-center gap-2 max-width-1600">
                 <div class="d-flex align-items-center gap-3 social-icons">
-                    {% comment %} <span class="text-muted">{% trans "Follow Us:" %}</span>
-                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-                    <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a> {% endcomment %}
                 </div>
                 <div class="contact-info d-flex gap-3">
-                    {% comment %} <div class="contact-item">
-                        <i class="fas fa-envelope text-primary"></i>
-                        <span>info@kaauh.edu.sa</span>
-                    </div>
-                    <div class="contact-item">
-                        <i class="fas fa-phone text-primary"></i>
-                        <span>+966 11 820 0000</span>
-                    </div> {% endcomment %}
                 </div>
                 <div class="logo-container d-flex gap-2">
                     <img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy">
@@ -297,7 +43,6 @@
     </div>
 
     <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
-        {# Changed container to container-fluid and added max-width-1600 to inner div #}
         <div class="container-fluid">
             <div class="navbar-content-wrapper max-width-1600 d-flex justify-content-between align-items-center" style="width: 100%;">
                 <a class="navbar-brand text-white d-none d-md-block" href="{% url 'dashboard' %}">
@@ -311,14 +56,6 @@
 
                 <div class="collapse navbar-collapse" id="navbarNav">
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                        {% comment %} <li class="nav-item">
-                            <a class="nav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" href="{% url 'dashboard' %}">
-                                <span class="d-flex align-items-center gap-2">
-                                    {% include "icons/dashboard.html" %}
-                                    {% trans "Dashboard" %}
-                                </span>
-                            </a>
-                        </li> {% endcomment %}
                         <li class="nav-item me-4">
                             <a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
                                 <span class="d-flex align-items-center gap-2">
@@ -328,19 +65,6 @@
                             </a>
                         </li>
 
-                        {% comment %} <li class="nav-item me-2">
-                            <a class="nav-link {% if request.resolver_match.url_name == 'form_templates_list' %}active{% endif %}" href="{% url 'form_templates_list' %}">
-                                <span class="d-flex align-items-center gap-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-                                    </svg>
-
-                                    {% trans "Form Templates" %}
-                                </span>
-
-                            </a>
-                        </li> {% endcomment %}
-
                         <li class="nav-item me-4">
                             <a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
                                 <span class="d-flex align-items-center gap-2">
@@ -356,13 +80,11 @@
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
                                 </svg>
-
                                     {% trans "Meetings" %}
                                 </span>
                             </a>
                         </li>
 
-
                         <li class="nav-item me-4">
                             <a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
                                 <span class="d-flex align-items-center gap-2">
@@ -393,7 +115,6 @@
                         </li>
                     </ul>
 
-
                     <ul class="navbar-nav me-2">
                         <li class="nav-item dropdown">
                             <a class="language-toggle-btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
@@ -446,7 +167,6 @@
                                         {{ user.username|first|upper }}
                                     </div>
                                 {% endif %}
-                                {% comment %} <span class="ms-2 d-none d-lg-inline fw-semibold">{{ user.username }}</span> {% endcomment %}
                             </button>
                             <ul
                                 class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
@@ -554,6 +274,30 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
+            const forms = document.querySelectorAll('form');
+
+  forms.forEach(form => {
+    form.addEventListener('submit', function(e) {
+      // Find the submit button within this form
+      const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
+
+      if (submitButton) {
+        // Disable the button
+        submitButton.disabled = true;
+
+        // Optional: Add a loading class for styling
+        submitButton.classList.add('loading');
+
+        // Re-enable the button if the form submission fails
+        // This ensures the button doesn't stay disabled if there's an error
+        window.addEventListener('unload', function() {
+          submitButton.disabled = false;
+          submitButton.classList.remove('loading');
+        });
+      }
+    });
+  });
+
             // Navbar collapse auto-close on link click (Standard Mobile UX)
             const navbarCollapse = document.getElementById('navbarNav');
             if (navbarCollapse) {

templates/interviews/schedule_interviews.html

@@ -1,108 +1,247 @@
-<!-- templates/interviews/schedule_interviews.html -->
+{% extends 'base.html' %}
-{% extends "base.html" %}
+{% load static i18n %}
+
+{% block title %}Bulk Interview Scheduling - {{ job.title }} - ATS{% endblock %}
 
 {% block content %}
-<div class="container mt-4 interview-schedule">
+<div class="container-fluid py-4">
-    <h1>Schedule Interviews for {{ job.title }}</h1>
+    <style>
+    /* KAAT-S UI Variables */
+    :root {
+        --kaauh-teal: #00636e;
+        --kaauh-teal-dark: #004a53;
+        --kaauh-border: #eaeff3;
+        --kaauh-primary-text: #343a40;
+        --kaauh-success: #28a745;
+        --kaauh-info: #17a2b8;
+        --kaauh-danger: #dc3545;
+        --kaauh-warning: #ffc107;
+    }
 
-    <div class="card mt-4">
+    /* 1. Card & Container Styling */
-        <div class="card-body">
+    .kaauh-card {
-            <form method="post" id="schedule-form">
+        border: 1px solid var(--kaauh-border);
-                {% csrf_token %}
+        border-radius: 0.75rem;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+        background-color: white;
+        padding: 1.5rem;
+    }
+    .container-fluid.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
 
-                <div class="row">
+    /* 2. Typography & Headers */
-                    <div class="col-md-6">
+    .page-header {
-                        <h5>Select Candidates</h5>
+        color: var(--kaauh-teal-dark);
-                        <div class="form-group">
+        font-weight: 700;
-                            {{ form.candidates }}
+    }
-                        </div>
+    .section-header {
-                    </div>
+        color: var(--kaauh-primary-text);
+        font-weight: 600;
+        border-bottom: 2px solid var(--kaauh-border);
+        padding-bottom: 0.5rem;
+        margin-bottom: 1rem;
+    }
+    label {
+        font-weight: 500;
+        color: var(--kaauh-primary-text);
+        font-size: 0.9rem;
+        margin-bottom: 0.25rem;
+    }
+    .form-control, .form-select {
+        border-radius: 0.5rem;
+        border: 1px solid #ced4da;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+    }
+    .form-group > .form-check {
+        margin-top: 0.5rem;
+    }
 
-                    <div class="col-md-6">
+    /* --- FIX: SCROLLABLE CANDIDATE LIST --- */
-                        <h5>Schedule Details</h5>
+    .form-group select[multiple] {
+        max-height: 450px;
+        overflow-y: auto;
+        min-height: 250px;
+        padding: 0;
+    }
+    /* ------------------------------------- */
 
-                        <div class="form-group mb-3">
+    /* 3. Button Styling */
-                            <label for="{{ form.start_date.id_for_label }}">Start Date</label>
+    .btn-main-action {
-                            {{ form.start_date }}
+        background-color: var(--kaauh-teal);
-                        </div>
+        border-color: var(--kaauh-teal);
+        color: white;
+        font-weight: 600;
+        transition: all 0.2s ease;
+    }
+    .btn-main-action:hover {
+        background-color: var(--kaauh-teal-dark);
+        border-color: var(--kaauh-teal-dark);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+    .btn-secondary {
+        color: var(--kaauh-teal-dark);
+        border-color: var(--kaauh-border);
+        background-color: #f1f3f4;
+    }
 
-                        <div class="form-group mb-3">
+    /* 4. Break Times Section Styling */
-                            <label for="{{ form.end_date.id_for_label }}">End Date</label>
+    .break-time-form {
-                            {{ form.end_date }}
+        background-color: #f8f9fa;
-                        </div>
+        padding: 0.75rem;
+        border-radius: 0.5rem;
+        border: 1px solid var(--kaauh-border);
+        align-items: flex-end;
+    }
+    .remove-break {
+        width: 100%;
+    }
+    .note-box {
+        background-color: #fff3cd;
+        border-left: 5px solid var(--kaauh-warning);
+        padding: 1rem;
+        border-radius: 0.25rem;
+        font-size: 0.9rem;
+        margin-bottom: 1rem;
+    }
+</style>
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <div>
+            <h1 class="h3 page-header">
+                <i class="fas fa-calendar-alt me-2"></i>
+                {% trans "Bulk Interview Scheduling" %}
+            </h1>
+            <h2 class="h5 text-muted mb-0">
+                {% trans "Configure time slots for:" %} **{{ job.title }}**
+            </h2>
+        </div>
+        <a href="{% url 'job_detail' slug=job.slug %}" class="btn btn-outline-secondary">
+            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
+        </a>
+    </div>
 
-                        <div class="form-group mb-3">
+    <div class="kaauh-card shadow-sm">
-                            <label>Working Days</label>
+        <form method="post" id="schedule-form">
-                            {{ form.working_days }}
+            {% csrf_token %}
-                        </div>
 
-                        <div class="row">
+            <div class="row">
-                            <div class="col-md-6">
+                <div class="col-md-4">
-                                <div class="form-group mb-3">
+                    <h5 class="section-header">{% trans "Select Candidates" %}</h5>
-                                    <label for="{{ form.start_time.id_for_label }}">Start Time</label>
-                                    {{ form.start_time }}
-                                </div>
-                            </div>
 
-                            <div class="col-md-6">
+                    <div class="form-group">
-                                <div class="form-group mb-3">
+                        <label for="{{ form.candidates.id_for_label }}">
-                                    <label for="{{ form.end_time.id_for_label }}">End Time</label>
+                            {% trans "Candidates to Schedule (Hold Ctrl/Cmd to select multiple)" %}
-                                    {{ form.end_time }}
+                        </label>
-                                </div>
+                        {{ form.candidates }}
-                            </div>
+                        {% if form.candidates.errors %}
-                        </div>
+                            <div class="text-danger small mt-1">{{ form.candidates.errors }}</div>
-
+                        {% endif %}
-                        <div class="row">
-                            <div class="col-md-6">
-                                <div class="form-group mb-3">
-                                    <label for="{{ form.interview_duration.id_for_label }}">Interview Duration (minutes)</label>
-                                    {{ form.interview_duration }}
-                                </div>
-                            </div>
-
-                            <div class="col-md-6">
-                                <div class="form-group mb-3">
-                                    <label for="{{ form.buffer_time.id_for_label }}">Buffer Time (minutes)</label>
-                                    {{ form.buffer_time }}
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
 
-                <div class="row mt-4">
+                <div class="col-md-8">
-                    <div class="col-12">
+                    <h5 class="section-header">{% trans "Schedule Details" %}</h5>
-                        <h5>Break Times</h5>
+
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group mb-3">
+                                <label for="{{ form.start_date.id_for_label }}">{% trans "Start Date" %}</label>
+                                {{ form.start_date }}
+                            </div>
+                        </div>
+
+                        <div class="col-md-6">
+                            <div class="form-group mb-3">
+                                <label for="{{ form.end_date.id_for_label }}">{% trans "End Date" %}</label>
+                                {{ form.end_date }}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group mb-3">
+                        <label>{% trans "Working Days" %}</label>
+                        <div class="d-flex flex-wrap gap-3 p-2 border rounded" style="background-color: #f8f9fa;">
+                            {{ form.working_days }}
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="form-group mb-3">
+                                <label for="{{ form.start_time.id_for_label }}">{% trans "Start Time" %}</label>
+                                {{ form.start_time }}
+                            </div>
+                        </div>
+
+                        <div class="col-md-3">
+                            <div class="form-group mb-3">
+                                <label for="{{ form.end_time.id_for_label }}">{% trans "End Time" %}</label>
+                                {{ form.end_time }}
+                            </div>
+                        </div>
+
+                        <div class="col-md-3">
+                            <div class="form-group mb-3">
+                                <label for="{{ form.interview_duration.id_for_label }}">{% trans "Duration (min)" %}</label>
+                                {{ form.interview_duration }}
+                            </div>
+                        </div>
+
+                        <div class="col-md-3">
+                            <div class="form-group mb-3">
+                                <label for="{{ form.buffer_time.id_for_label }}">{% trans "Buffer (min)" %}</label>
+                                {{ form.buffer_time }}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mt-4 pt-4 border-top">
+                        <h5 class="section-header">{% trans "Daily Break Times" %}</h5>
                         <div id="break-times-container">
                             {{ break_formset.management_form }}
+                            {% for hidden in break_formset.management_form.hidden_fields %}
+                                {% if "TOTAL_FORMS" in hidden.id_for_label %}
+                                    <input type="hidden" name="{{ hidden.name }}" id="id_breaks-TOTAL_FORMS" value="{{ hidden.value }}">
+                                {% else %}
+                                    {{ hidden }}
+                                {% endif %}
+                            {% endfor %}
+
                             {% for form in break_formset %}
-                                <div class="break-time-form row mb-2">
+                                <div class="break-time-form row mb-2 g-2">
-                                    <div class="col-md-5">
+                                    <div class="col-5">
-                                        <label>Start Time</label>
+                                        <label for="{{ form.start_time.id_for_label }}">{% trans "Start Time" %}</label>
                                         {{ form.start_time }}
                                     </div>
-                                    <div class="col-md-5">
+                                    <div class="col-5">
-                                        <label>End Time</label>
+                                        <label for="{{ form.end_time.id_for_label }}">{% trans "End Time" %}</label>
                                         {{ form.end_time }}
                                     </div>
-                                    <div class="col-md-2">
+                                    <div class="col-2 d-flex align-items-end">
-                                        <label>&nbsp;</label><br>
                                         {{ form.DELETE }}
-                                        <button type="button" class="btn btn-danger btn-sm remove-break">Remove</button>
+                                        <button type="button" class="btn btn-danger btn-sm remove-break w-100">
+                                            <i class="fas fa-trash-alt"></i> {% trans "Remove" %}
+                                        </button>
                                     </div>
                                 </div>
                             {% endfor %}
                         </div>
-                        <button type="button" id="add-break" class="btn btn-secondary btn-sm mt-2">Add Break</button>
+                        <button type="button" id="add-break" class="btn btn-secondary btn-sm mt-3">
+                            <i class="fas fa-plus me-1"></i> {% trans "Add Break" %}
+                        </button>
                     </div>
-                </div>
 
-                <div class="mt-4">
-                    <button type="submit" class="btn btn-primary">Preview Schedule</button>
-                    <a href="{% url 'job_detail' slug=job.slug %}" class="btn btn-secondary">Cancel</a>
                 </div>
-            </form>
+            </div>
-        </div>
+
+            <div class="mt-4 pt-4 border-top d-flex justify-content-end gap-2">
+                <button type="submit" class="btn btn-main-action">
+                    <i class="fas fa-calendar-check me-1"></i> {% trans "Preview Schedule" %}
+                </button>
+                <a href="{% url 'job_detail' slug=job.slug %}" class="btn btn-secondary">
+                    {% trans "Cancel" %}
+                </a>
+            </div>
+        </form>
     </div>
 </div>
 
@@ -110,43 +249,59 @@
 document.addEventListener('DOMContentLoaded', function() {
     const addBreakBtn = document.getElementById('add-break');
     const breakTimesContainer = document.getElementById('break-times-container');
+    // The ID is now guaranteed to be 'id_breaks-TOTAL_FORMS' thanks to the template fix
     const totalFormsInput = document.getElementById('id_breaks-TOTAL_FORMS');
 
+    // Safety check added, though the template fix should resolve the core issue
+    if (!totalFormsInput) {
+        console.error("TOTAL_FORMS input not found. Cannot add break dynamically.");
+        return;
+    }
+
     addBreakBtn.addEventListener('click', function() {
         const formCount = parseInt(totalFormsInput.value);
+
+        // Template for a new form, ensuring the correct classes are applied
         const newFormHtml = `
-            <div class="break-time-form row mb-2">
+            <div class="break-time-form row mb-2 g-2">
-                <div class="col-md-5">
+                <div class="col-5">
-                    <label>Start Time</label>
+                    <label for="id_breaks-${formCount}-start_time">Start Time</label>
                     <input type="time" name="breaks-${formCount}-start_time" class="form-control" id="id_breaks-${formCount}-start_time">
                 </div>
-                <div class="col-md-5">
+                <div class="col-5">
-                    <label>End Time</label>
+                    <label for="id_breaks-${formCount}-end_time">End Time</label>
                     <input type="time" name="breaks-${formCount}-end_time" class="form-control" id="id_breaks-${formCount}-end_time">
                 </div>
-                <div class="col-md-2">
+                <div class="col-2 d-flex align-items-end">
-                    <label>&nbsp;</label><br>
+                    <input type="hidden" name="breaks-${formCount}-id" id="id_breaks-${formCount}-id">
+                    <input type="hidden" name="breaks-${formCount}-meeting" id="id_breaks-${formCount}-meeting">
                     <input type="checkbox" name="breaks-${formCount}-DELETE" id="id_breaks-${formCount}-DELETE" style="display:none;">
-                    <button type="button" class="btn btn-danger btn-sm remove-break">Remove</button>
+                    <button type="button" class="btn btn-danger btn-sm remove-break w-100">
+                        <i class="fas fa-trash-alt"></i> Remove
+                    </button>
                 </div>
             </div>
         `;
 
         const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = newFormHtml;
+        tempDiv.innerHTML = newFormHtml.trim();
         const newForm = tempDiv.firstChild;
 
         breakTimesContainer.appendChild(newForm);
         totalFormsInput.value = formCount + 1;
     });
 
-    // Handle remove button clicks
+    // Handle remove button clicks (both existing and dynamically added)
     breakTimesContainer.addEventListener('click', function(e) {
-        if (e.target.classList.contains('remove-break')) {
+        if (e.target.closest('.remove-break')) {
             const form = e.target.closest('.break-time-form');
-            const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
+            if (form) {
-            deleteCheckbox.checked = true;
+                const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
-            form.style.display = 'none';
+                if (deleteCheckbox) {
+                    deleteCheckbox.checked = true;
+                }
+                form.style.display = 'none';
+            }
         }
     });
 });

templates/meetings/delete_meeting_form.html

@@ -0,0 +1,7 @@
+{% load i18n %}
+<form action="{% url 'delete_meeting_for_candidate' job.slug candidate.pk meeting.pk %}" method="post">
+    {% csrf_token %}
+    <p class="text-danger">{% trans "Are you sure you want to delete this meeting? This action is irreversible." %}</p>
+    <button type="submit" class="btn btn-danger">{% trans "Delete Meeting" %}</button>
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
+</form>

templates/meetings/reschedule_meeting.html

@@ -0,0 +1,70 @@
+{% load static i18n %}
+{% load widget_tweaks %}
+
+<div class="p-3" id="reschedule-meeting-form">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h5 class="mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
+                <i class="fas fa-redo-alt me-1"></i>
+                {% trans "Update Interview" %} for {{ candidate.name }}
+            </h5>
+            <p class="text-muted mb-0 small">{% trans "Job" %}: {{ job.title }}</p>
+             {% if has_future_meeting %}
+                <div class="alert alert-info mt-2 mb-0 p-2 small" role="alert">
+                    <i class="fas fa-info-circle me-1"></i>
+                    {% trans "You are updating the existing meeting schedule." %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div>
+        <form method="post" id="updateMeeting" action="{% url 'reschedule_meeting_for_candidate' job.slug candidate.pk meeting.pk %}">
+            {% csrf_token %}
+
+            <div class="mb-3">
+                <label for="{{ form.topic.id_for_label }}" class="form-label small">
+                    {% trans "Meeting Topic" %}
+                </label>
+                {{ form.topic|add_class:"form-control" }}
+                {% for error in form.topic.errors %}
+                    <div class="text-danger small mt-1">{{ error }}</div>
+                {% endfor %}
+            </div>
+
+            <div class="row">
+                <div class="col-md-7">
+                    <div class="mb-3">
+                        <label for="{{ form.start_time.id_for_label }}" class="form-label small">
+                            {% trans "Start Time" %} (Date & Time)
+                        </label>
+                        {{ form.start_time|add_class:"form-control" }}
+                        {% for error in form.start_time.errors %}
+                            <div class="text-danger small mt-1">{{ error }}</div>
+                        {% endfor %}
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <div class="mb-3">
+                        <label for="{{ form.duration.id_for_label }}" class="form-label small">
+                            {% trans "Duration (minutes)" %}
+                        </label>
+                        {{ form.duration|add_class:"form-control" }}
+                        {% for error in form.duration.errors %}
+                            <div class="text-danger small mt-1">{{ error }}</div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+
+            <hr style="border-top: 1px solid var(--kaauh-border); margin-top: 1.5rem; margin-bottom: 1.5rem;">
+
+            <div class="d-flex justify-content-end gap-2">
+                <button type="submit" class="btn btn-main-action btn-sm">
+                    <i class="fas fa-save me-1"></i> {% trans "Update Meeting" %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

templates/meetings/schedule_meeting_form.html

@@ -0,0 +1,90 @@
+{% load i18n %}
+<div class="p-3" id="schedule-meeting-form">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h5 class="mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
+                {% if has_future_meeting %}
+                    {% trans "Update Interview" %} for {{ candidate.name }}
+                {% else %}
+                    {% trans "Schedule Interview" %} for {{ candidate.name }}
+                {% endif %}
+            </h5>
+            <p class="text-muted mb-0 small">{% trans "Job" %}: {{ job.title }}</p>
+             {% if has_future_meeting %}
+                <div class="alert alert-info mt-2 mb-0 p-2 small" role="alert">
+                    <i class="fas fa-info-circle me-1"></i>
+                    {% trans "Candidate has upcoming interviews. Updating existing schedule." %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div>
+        <form method="post" action="{% url 'schedule_meeting_for_candidate' job.slug candidate.pk %}">
+            {% csrf_token %}
+            <div class="mb-3">
+                <label for="{{ form.topic.id_for_label }}" class="form-label small">
+                    {% trans "Meeting Topic" %}
+                </label>
+                {{ form.topic }}
+                {% if form.topic.errors %}
+                    <div class="text-danger">
+                        {% for error in form.topic.errors %}
+                            <small>{{ error }}</small>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+                <div class="form-text small text-muted">
+                    {% trans "e.g., Technical Screening, HR Interview" %}
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-7">
+                    <div class="mb-3">
+                        <label for="{{ form.start_time.id_for_label }}" class="form-label small">
+                            {% trans "Start Time" %} (Date & Time)
+                        </label>
+                        {{ form.start_time }}
+                        {% if form.start_time.errors %}
+                            <div class="text-danger">
+                                {% for error in form.start_time.errors %}
+                                    <small>{{ error }}</small>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <div class="mb-3">
+                        <label for="{{ form.duration.id_for_label }}" class="form-label small">
+                            {% trans "Duration (minutes)" %}
+                        </label>
+                        {{ form.duration }}
+                        {% if form.duration.errors %}
+                            <div class="text-danger">
+                                {% for error in form.duration.errors %}
+                                    <small>{{ error }}</small>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <hr style="border-top: 1px solid var(--kaauh-border); margin-top: 1.5rem; margin-bottom: 1.5rem;">
+
+            <div class="d-flex justify-content-end gap-2">
+                <button type="submit" class="btn btn-main-action btn-sm">
+                    <i class="fas fa-save me-1"></i>
+                    {% if has_future_meeting %}
+                        {% trans "Update Meeting" %}
+                    {% else %}
+                        {% trans "Schedule Meeting" %}
+                    {% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

templates/meetings/update_meeting.html

@@ -3,169 +3,7 @@
 {% block title %}{% trans "Update Zoom Meeting" %} - {{ block.super }}{% endblock %}
 
 {% block customCSS %}
-<style>
+    <link rel="stylesheet" href="{% static 'css/update_meeting.css' %}">
-    /* UI Variables for the KAAT-S Theme */
-    :root {
-        --kaauh-teal: #00636e;
-        --kaauh-teal-dark: #004a53;
-        --kaauh-border: #eaeff3;
-        --kaauh-primary-text: #343a40;
-        --kaauh-gray: #6c757d;
-
-        /* Status Colors for alerts/messages */
-        --kaauh-success: var(--kaauh-teal);
-        --kaauh-danger: #dc3545;
-        --kaauh-info: #17a2b8;
-    }
-
-    /* CONTAINER AND CARD STYLING */
-    .container {
-        padding: 2rem 1rem;
-    }
-    .card {
-        border: 1px solid var(--kaauh-border);
-        border-radius: 0.75rem;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
-        max-width: 600px;
-        margin: 0 auto; /* Center the card */
-        padding: 1.5rem;
-    }
-
-    /* HEADER STYLING (The section outside the card) */
-    .header {
-        text-align: center;
-        margin-bottom: 2rem;
-    }
-    .header h1 {
-        font-size: 2rem;
-        color: var(--kaauh-teal-dark);
-        font-weight: 700;
-        margin-bottom: 0.25rem;
-    }
-    .header p {
-        color: var(--kaauh-gray);
-        font-size: 1rem;
-    }
-
-    /* CARD TITLE STYLING */
-    .card-title {
-        font-size: 1.25rem;
-        color: var(--kaauh-teal-dark);
-        font-weight: 600;
-        border-bottom: 1px solid var(--kaauh-border);
-        padding-bottom: 0.75rem;
-        margin-bottom: 1.5rem;
-    }
-
-    /* FORM STYLING */
-    .form-row {
-        margin-bottom: 1.5rem;
-    }
-    .form-label {
-        display: block;
-        font-weight: 600;
-        color: var(--kaauh-gray);
-        margin-bottom: 0.5rem;
-        font-size: 0.9rem;
-    }
-    .form-input {
-        display: block;
-        width: 100%;
-        padding: 0.75rem 1rem;
-        font-size: 1rem;
-        line-height: 1.5;
-        color: var(--kaauh-primary-text);
-        background-color: #fff;
-        background-clip: padding-box;
-        border: 1px solid var(--kaauh-border);
-        border-radius: 0.5rem;
-        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    }
-    .form-input:focus {
-        border-color: var(--kaauh-teal);
-        outline: 0;
-        box-shadow: 0 0 0 0.1rem rgba(0, 99, 110, 0.25);
-    }
-    input[type="datetime-local"] {
-        font-family: inherit;
-    }
-
-    /* MESSAGES/ALERTS STYLING */
-    .messages {
-        max-width: 600px;
-        margin: 0 auto 1.5rem auto;
-    }
-    .alert {
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-    }
-    .alert-success {
-        color: white;
-        background-color: var(--kaauh-success);
-        border-color: var(--kaauh-success);
-    }
-    .alert-danger {
-        color: white;
-        background-color: var(--kaauh-danger);
-        border-color: var(--kaauh-danger);
-    }
-    .alert-info {
-        color: white;
-        background-color: var(--kaauh-info);
-        border-color: var(--kaauh-info);
-    }
-
-    /* BUTTON STYLING */
-    .actions {
-        margin-top: 1.5rem;
-        display: flex;
-        gap: 1rem;
-    }
-    .btn-base {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        text-align: center;
-        vertical-align: middle;
-        cursor: pointer;
-        user-select: none;
-        padding: 0.5rem 1rem;
-        font-size: 1rem;
-        line-height: 1.5;
-        border-radius: 0.5rem;
-        font-weight: 600;
-        border: 1px solid transparent;
-        transition: all 0.2s ease;
-        text-decoration: none;
-    }
-
-    /* Primary Action Button (Update) */
-    .btn-main-action {
-        background-color: var(--kaauh-teal);
-        border-color: var(--kaauh-teal);
-        color: white;
-    }
-    .btn-main-action:hover {
-        background-color: var(--kaauh-teal-dark);
-        border-color: var(--kaauh-teal-dark);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-        color: white;
-    }
-
-    /* Secondary Button (Cancel) */
-    .btn-kaats-outline-secondary {
-        color: var(--kaauh-secondary);
-        border-color: var(--kaauh-secondary);
-        background-color: transparent;
-    }
-    .btn-kaats-outline-secondary:hover {
-        background-color: var(--kaauh-secondary);
-        color: white;
-        border-color: var(--kaauh-secondary);
-    }
-</style>
 {% endblock %}
 
 {% block content %}
@@ -190,7 +28,7 @@
         <div class="card">
             <h2 class="card-title">{% trans "Meeting Information" %}</h2>
 
-            <form method="post" action="{% url 'update_meeting' meeting.slug %}">
+            <form method="post" id="updateMeeting" action="{% url 'update_meeting' meeting.slug %}">
                 {% csrf_token %}
 
                 <div class="form-row">

templates/recruitment/candidate_exam_view.html

@@ -3,206 +3,11 @@
 
 {% block title %}Candidate Tier Management - {{ job.title }} - ATS{% endblock %}
 
-{% block customCSS %}
-<style>
-    /* KAAT-S UI Variables */
-    :root {
-        --kaauh-teal: #00636e;
-        --kaauh-teal-dark: #004a53;
-        --kaauh-border: #eaeff3;
-        --kaauh-primary-text: #343a40;
-        --kaauh-success: #28a745;
-        --kaauh-info: #17a2b8; /* Used for Exam stages (Pending status) */
-        --kaauh-danger: #dc3545;
-        --kaauh-warning: #ffc107;
-    }
-
-    /* Primary Color Overrides */
-    .text-primary-theme { color: var(--kaauh-teal) !important; }
-    .bg-primary-theme { background-color: var(--kaauh-teal) !important; }
-
-    /* 1. Main Container & Card Styling */
-    .kaauh-card {
-        border: 1px solid var(--kaauh-border);
-        border-radius: 0.75rem;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
-        background-color: white;
-    }
-
-    /* Dedicated style for the tier control block (consistent with .filter-controls) */
-    .tier-controls {
-        background-color: var(--kaauh-border); /* Light background for control sections */
-        border-radius: 0.75rem;
-        padding: 1.25rem;
-        margin-bottom: 2rem;
-        border: 1px solid var(--kaauh-border);
-    }
-    .tier-controls .form-row {
-        display: flex;
-        align-items: end;
-        gap: 1rem;
-    }
-    .tier-controls .form-group {
-        flex: 1;
-        margin-bottom: 0;
-    }
-
-    /* 2. Button Styling (Themed for Main Actions) */
-    .btn-main-action {
-        background-color: var(--kaauh-teal);
-        border-color: var(--kaauh-teal);
-        color: white;
-        font-weight: 600;
-        transition: all 0.2s ease;
-    }
-    .btn-main-action:hover {
-        background-color: var(--kaauh-teal-dark);
-        border-color: var(--kaauh-teal-dark);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-    }
-    .btn-outline-secondary {
-        color: var(--kaauh-teal-dark);
-        border-color: var(--kaauh-teal);
-    }
-    .btn-outline-secondary:hover {
-        background-color: var(--kaauh-teal-dark);
-        color: white;
-        border-color: var(--kaauh-teal-dark);
-    }
-    /* Style for Bulk Pass button */
-    .btn-bulk-pass {
-        background-color: var(--kaauh-success);
-        border-color: var(--kaauh-success);
-        color: white;
-        font-weight: 500;
-    }
-    .btn-bulk-pass:hover {
-        background-color: #1e7e34;
-        border-color: #1e7e34;
-    }
-    /* Style for Bulk Fail button */
-    .btn-bulk-fail {
-        background-color: var(--kaauh-danger);
-        border-color: var(--kaauh-danger);
-        color: white;
-        font-weight: 500;
-    }
-    .btn-bulk-fail:hover {
-        background-color: #bd2130;
-        border-color: #bd2130;
-    }
-
-    /* 3. Input and Button Height Optimization (Thin look) */
-    .form-control-sm,
-    .btn-sm {
-        /* Reduce vertical padding even more than default Bootstrap 'sm' */
-        padding-top: 0.2rem !important;
-        padding-bottom: 0.2rem !important;
-        /* Ensure a consistent, small height for inputs and buttons */
-        height: 28px !important;
-        font-size: 0.8rem !important;
-    }
-    .btn-main-action.btn-sm { font-weight: 600 !important; }
-
-    /* Container for the timeline include */
-    .applicant-tracking-timeline {
-        margin-bottom: 2rem;
-    }
-
-    /* 4. Candidate Table Styling (KAAT-S Look) */
-    .candidate-table {
-        table-layout: fixed;
-        width: 100%;
-        border-collapse: separate;
-        border-spacing: 0;
-        background-color: white;
-        border-radius: 0.5rem;
-        overflow: hidden;
-    }
-    .candidate-table thead {
-        background-color: var(--kaauh-border);
-    }
-    .candidate-table th {
-        padding: 0.75rem;
-        font-weight: 600;
-        color: var(--kaauh-teal-dark);
-        border-bottom: 2px solid var(--kaauh-teal);
-        font-size: 0.9rem;
-        vertical-align: middle;
-    }
-    .candidate-table td {
-        padding: 0.75rem;
-        border-bottom: 1px solid var(--kaauh-border);
-        vertical-align: middle;
-        font-size: 0.9rem;
-    }
-    .candidate-table tbody tr:hover {
-        background-color: #f1f3f4;
-    }
-    .candidate-name {
-        font-weight: 600;
-        color: var(--kaauh-primary-text);
-    }
-    .candidate-details {
-        font-size: 0.8rem;
-        color: #6c757d;
-    }
-    .candidate-table-responsive {
-        overflow-x: auto;
-        margin-bottom: 1rem;
-    }
-
-    /* 5. Badges */
-    .ai-score-badge {
-        background-color: var(--kaauh-teal-dark) !important;
-        color: white;
-        font-weight: 700;
-        padding: 0.4em 0.8em;
-        border-radius: 0.4rem;
-        font-size: 0.8rem;
-    }
-    .status-badge { /* Used for Exam Status (Passed/Failed/Pending) */
-        font-size: 0.75rem;
-        padding: 0.3em 0.7em;
-        border-radius: 0.35rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        display: inline-block;
-    }
-    .bg-success { background-color: var(--kaauh-success) !important; color: white; }
-    .bg-danger { background-color: var(--kaauh-danger) !important; color: white; }
-    .bg-info-pending { background-color: var(--kaauh-info) !important; color: white; }
-
-    .tier-badge { /* Used for Tier labels */
-        font-size: 0.75rem;
-        padding: 0.125rem 0.5rem;
-        border-radius: 0.5rem;
-        font-weight: 600;
-        margin-left: 0.5rem;
-        display: inline-block;
-    }
-    .tier-1-badge { background-color: var(--kaauh-success); color: white; }
-    .tier-2-badge { background-color: var(--kaauh-warning); color: #856404; }
-    .tier-3-badge { background-color: #d1ecf1; color: #0c5460; }
-
-    /* Fix table column widths for better layout */
-    .candidate-table th:nth-child(1) { width: 40px; } /* Checkbox */
-    .candidate-table th:nth-child(4) { width: 10%; } /* AI Score */
-    .candidate-table th:nth-child(5) { width: 12%; } /* Exam Status */
-    .candidate-table th:nth-child(6) { width: 15%; } /* Exam Date */
-    .candidate-table th:nth-child(7) { width: 220px; } /* Actions */
-
-    .cd_exam{
-        color: #00636e;
-    }
-</style>
-{% endblock %}
-
 {% block content %}
 <div class="container-fluid py-4">
     <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
-            <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
+            <h1 class="h3 mb-1 page-header">
                 <i class="fas fa-edit me-2"></i>
                 {% trans "Exam Management" %} - {{ job.title }}
             </h1>
@@ -215,35 +20,9 @@
         </a>
     </div>
 
-    {# APPLICANT TRACKING TIMELINE INCLUSION #}
+    <div class="applicant-tracking-timeline mb-4">
-    <div class="applicant-tracking-timeline">
         {% include 'jobs/partials/applicant_tracking.html' %}
     </div>
-    {# END APPLICANT TRACKING TIMELINE INCLUSION #}
-
-    {% comment %} <div class="tier-controls kaauh-card shadow-sm">
-        <h4 class="h6 mb-3 fw-bold" style="color: var(--kaauh-teal-dark);">
-            <i class="fas fa-sort-amount-up me-1"></i> {% trans "Define Top Candidates (Tiers)" %}
-        </h4>
-        <form method="post" class="mb-0">
-            {% csrf_token %}
-            <div class="row g-3 align-items-end">
-                <div class="col-md-3 col-sm-6">
-                    <label for="tier1_count" class="form-label small text-muted mb-1">
-                        {% trans "Number of Tier 1 Candidates (Top N)" %}
-                    </label>
-                    <input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
-                           value="{{ tier1_count }}" min="1" max="{{ total_candidates }}" placeholder="e.g., 50">
-                </div>
-                <div class="col-md-3 col-sm-6">
-                    <button type="submit" name="update_tiers" class="btn btn-main-action btn-sm w-100">
-                        <i class="fas fa-sync-alt me-1"></i> {% trans "Update Tiers" %}
-                    </button>
-                </div>
-                <div class="col-md-6 d-none d-md-block"></div>
-            </div>
-        </form> {% endcomment %}
-    </div>
 
     <h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
         {% trans "Candidate List" %}
@@ -252,27 +31,26 @@
     </h2>
 
     <div class="kaauh-card shadow-sm p-3">
-        <div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
+        {% if candidates %}
-            <div class="col-md-3 col-sm-6 mb-3 d-flex gap-2">
+        <div class="bulk-action-bar">
-                {% if candidates %}
+            <form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post" class="action-group">
-                <form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post">
+                {% csrf_token %}
-                    <div class="d-flex align-items-center">
+                <label for="update_status" class="form-label small mb-0 fw-bold">{% trans "Move Selected To:" %}</label>
-                        <select name="mark_as" id="update_status" class="form-select form-select-sm" style="height: 3rem;">
+                <select name="mark_as" id="update_status" class="form-select form-select-sm" style="width: auto;">
-                            <option value="Applied">
+                    <option value="Applied">
-                                <i class="fas fa-arrow-left me-1"></i> {% trans "Apply" %}
+                        {% trans "Screening Stage" %}
-                            </option>
+                    </option>
-                            <option value="Interview">
+                    <option value="Interview">
-                                <i class="fas fa-arrow-right me-1"></i> {% trans "Interview" %}
+                        {% trans "Interview Stage" %}
-                            </option>
+                    </option>
-                        </select>
+                </select>
-                        <button type="submit" class="btn btn-main-action btn-mds ms-2">
+                <button type="submit" class="btn btn-main-action btn-sm">
-                            <i class="fas fa-arrow-right me-1"></i> {% trans "Update" %}
+                    <i class="fas fa-arrow-right me-1"></i> {% trans "Update Status" %}
-                        </button>
+                </button>
-                    </div>
+            </form>
-                </form>
+        </div>
-                {% endif %}
+        {% endif %}
-            </div>
+        <div class="table-responsive">
-
             <form id="candidate-form" method="post">
                 {% csrf_token %}
                 <table class="table candidate-table align-middle">
@@ -308,7 +86,7 @@
                                 <td>
                                     <div class="candidate-name">
                                         {{ candidate.name }}
-                                        {# Tier logic updated to be cleaner #}
+                                        {# Tier badges now use defined stage-badge and tier-X-badge classes #}
                                         {% if forloop.counter <= tier1_count %}
                                             <span class="stage-badge tier-1-badge">Tier 1</span>
                                         {% elif forloop.counter <= tier1_count|default:0|add:tier1_count %}
@@ -333,7 +111,7 @@
                                     {% elif candidate.exam_status == "Failed" %}
                                         <span class="status-badge bg-danger">{{ candidate.exam_status }}</span>
                                     {% else %}
-                                        <span class="status-badge bg-info-pending">Pending</span>
+                                        <span class="status-badge bg-info">Pending</span>
                                     {% endif %}
                                 </td>
                                 <td>
@@ -370,7 +148,6 @@
             </form>
         </div>
     </div>
-
 </div>
 
 <div class="modal fade modal-lg" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
@@ -423,36 +200,24 @@
                     selectAllCheckbox.checked = false;
                     selectAllCheckbox.indeterminate = true;
                 }
-
-                // IMPORTANT: We do NOT fire a change event here to prevent the infinite loop.
-                // Your existing data-bind-_all logic should handle the bulk action status.
             }
 
             // 1. Logic for the 'Select All' checkbox (Clicking it updates all rows)
             selectAllCheckbox.addEventListener('change', function () {
                 const isChecked = selectAllCheckbox.checked;
 
-                // Temporarily disable the change listener on rows to prevent cascading events
                 rowCheckboxes.forEach(checkbox => checkbox.removeEventListener('change', updateSelectAllState));
 
-                // Update all row checkboxes
                 rowCheckboxes.forEach(function (checkbox) {
                     checkbox.checked = isChecked;
-
-                    // You must still dispatch the event here so your framework's data-bind-selections
-                    // picks up the change on individual elements. This should NOT trigger the updateSelectAllState.
                     checkbox.dispatchEvent(new Event('change', { bubbles: true }));
                 });
 
-                // Re-attach the change listeners to the rows
                 rowCheckboxes.forEach(checkbox => checkbox.addEventListener('change', updateSelectAllState));
-
-                // Ensure the header state is correct after forcing all changes
                 updateSelectAllState();
             });
 
             // 2. Logic to update 'Select All' state based on row checkboxes
-            // Attach the function to be called whenever a row checkbox changes
             rowCheckboxes.forEach(function (checkbox) {
                 checkbox.addEventListener('change', updateSelectAllState);
             });

templates/recruitment/candidate_interview_view.html

@@ -1,385 +1,296 @@
 {% extends 'base.html' %}
 {% load static i18n %}
 
-{% block title %}Candidate Tier Management - {{ job.title }} - ATS{% endblock %}
+{% block title %}- {{ job.title }} - ATS{% endblock %}
-
-{% block customCSS %}
-<style>
-    /* Minimal Tier Management Styles */
-    .tier-controls {
-        background-color: #f8f9fa;
-        padding: 1rem;
-        border-radius: 0.375rem;
-        margin-bottom: 1.5rem;
-    }
-    .tier-controls .form-row {
-        display: flex;
-        align-items: end;
-        gap: 0.75rem;
-    }
-    .tier-controls .form-group {
-        flex: 1;
-        margin-bottom: 0;
-    }
-    .bulk-update-controls {
-        background-color: #f8f9fa;
-        padding: 1rem;
-        border-radius: 0.375rem;
-        margin-bottom: 1.5rem;
-    }
-    .stage-groups {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 1rem;
-        margin-bottom: 2rem;
-    }
-    .stage-group {
-        border: 1px solid #dee2e6;
-        border-radius: 0.375rem;
-        overflow: hidden;
-    }
-    .stage-group .stage-header {
-        background-color: #495057;
-        color: white;
-        padding: 0.5rem 0.75rem;
-        font-weight: 500;
-        font-size: 0.95rem;
-    }
-    .stage-group .stage-body {
-        padding: 0.75rem;
-        min-height: 80px;
-    }
-    .stage-candidate {
-        padding: 0.375rem;
-        border-bottom: 1px solid #f1f3f4;
-    }
-    .stage-candidate:last-child {
-        border-bottom: none;
-    }
-    .match-score {
-        font-weight: 600;
-        color: #0056b3;
-    }
-    .btn-sm {
-        font-size: 0.75rem;
-        padding: 0.2rem 0.4rem;
-    }
-
-    /* Tab Styles for Tiers */
-    .nav-tabs {
-        border-bottom: 1px solid #dee2e6;
-        margin-bottom: 1rem;
-    }
-    .nav-tabs .nav-link {
-        border: none;
-        color: #495057;
-        font-weight: 500;
-        padding: 0.5rem 1rem;
-        transition: all 0.2s;
-    }
-    .nav-tabs .nav-link:hover {
-        border: none;
-        background-color: #f8f9fa;
-    }
-    .nav-tabs .nav-link.active {
-        color: #495057;
-        background-color: #fff;
-        border: none;
-        border-bottom: 2px solid #007bff;
-        font-weight: 600;
-    }
-    .tier-1 .nav-link {
-        color: #155724;
-    }
-    .tier-1 .nav-link.active {
-        border-bottom-color: #28a745;
-    }
-    .tier-2 .nav-link {
-        color: #856404;
-    }
-    .tier-2 .nav-link.active {
-        border-bottom-color: #ffc107;
-    }
-    .tier-3 .nav-link {
-        color: #721c24;
-    }
-    .tier-3 .nav-link.active {
-        border-bottom-color: #dc3545;
-    }
-
-    /* Candidate Table Styles */
-    .candidate-table {
-        width: 100%;
-        border-collapse: separate;
-        border-spacing: 0;
-        background-color: white;
-        border-radius: 0.375rem;
-        overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    .candidate-table thead {
-        background-color: #f8f9fa;
-    }
-    .candidate-table th {
-        padding: 0.75rem;
-        text-align: left;
-        font-weight: 600;
-        font-size: 0.875rem;
-        color: #495057;
-        border-bottom: 1px solid #dee2e6;
-    }
-    .candidate-table td {
-        padding: 0.75rem;
-        border-bottom: 1px solid #f1f3f4;
-        vertical-align: middle;
-    }
-    .candidate-table tbody tr:hover {
-        background-color: #f8f9fa;
-    }
-    .candidate-table tbody tr:last-child td {
-        border-bottom: none;
-    }
-    .candidate-name {
-        font-weight: 600;
-        font-size: 0.95rem;
-    }
-    .candidate-details {
-        font-size: 0.8rem;
-        color: #6c757d;
-    }
-    .candidate-table-responsive {
-        overflow-x: auto;
-        margin-bottom: 1rem;
-    }
-    .stage-badge {
-        padding: 0.125rem 0.5rem;
-        border-radius: 0.5rem;
-        font-size: 0.7rem;
-        font-weight: 600;
-        margin-left: 0.375rem;
-    }
-    .stage-Applied {
-        background-color: #e9ecef;
-        color: #495057;
-    }
-    .stage-Exam {
-        background-color: #cce5ff;
-        color: #004085;
-    }
-    .stage-Interview {
-        background-color: #d1ecf1;
-        color: #0c5460;
-    }
-    .stage-Offer {
-        background-color: #d4edda;
-        color: #155724;
-    }
-    .exam-controls {
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        margin-top: 0.375rem;
-    }
-    .exam-controls select,
-    .exam-controls input {
-        font-size: 0.75rem;
-        padding: 0.125rem 0.25rem;
-    }
-    .tier-badge {
-        font-size: 0.7rem;
-        padding: 0.125rem 0.375rem;
-        border-radius: 0.25rem;
-        background-color: rgba(0,0,0,0.1);
-        color: #495057;
-        margin-left: 0.375rem;
-    }
-</style>
-{% endblock %}
 
 {% block content %}
-<div class="container py-4">
+<div class="container-fluid py-4">
     <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
-            <h1 class="h3 mb-1">
+            <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
-                <i class="fas fa-layer-group me-2"></i>
+                <i class="fas fa-calendar-alt me-2"></i>
-                {% trans "Interview" %} - {{ job.title }}
+                {% trans "Interview Management" %} - {{ job.title }}
             </h1>
-
+            <h2 class="h5 text-muted mb-0">
+                {% trans "Candidates in Interview Stage:" %} <span class="fw-bold">{{ candidates|length }}</span>
+            </h2>
         </div>
         <a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary">
             <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
         </a>
     </div>
+    <div class="applicant-tracking-timeline">
+        {% include 'jobs/partials/applicant_tracking.html' %}
+    </div>
 
-    <!-- Tier Display -->
+    <div class="kaauh-card shadow-sm p-3">
-        <h2 class="h4 mb-3 mt-5">{% trans "Candidate Tiers" %}</h2>
+        {% if candidates %}
-        <div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
+            <div class="bulk-action-bar">
-            {% url "schedule_interviews" job.slug as bulk_update_candidate_exam_status_url %}
-            {% if candidates %}
-                <button class="btn btn-primary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#candidateviewModal"
-                    data-attr="{disabled: !$selections.filter(Boolean).length}"
-                    hx-get="{{bulk_update_candidate_exam_status_url}}"
-                    hx-target="#candidateviewModalBody"
-                    hx-include="#myform"
-                    hx-select=".interview-schedule"
-                    >Mark as Pass and move to Interview</button>
-                <button class="btn btn-danger"
-                    data-attr="{disabled: !$selections.filter(Boolean).length}"
-                    data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
-                        contentType: 'form',
-                        selector: '#myform',
-                        headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'fail'}
-                        })"
-                    >Mark as Failed</button>
-            {% endif %}
-                <form id="myform" action="{{bulk_update_candidate_exam_status_url}}" method="post">
-                    <table class="candidate-table">
-                        <thead>
-                            <tr>
-                                <th>
-                                    {% if candidates %}
-                                        <div class="form-check">
-                                            <input
-                                            data-bind-_all
-                                            data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
-                                            data-effect="$selections; $_all = $selections.every(Boolean)"
-                                            data-attr-disabled="$_fetching"
-                                            type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
-                                        </div>
-                                    {% endif %}
-                                </th>
-                                <th>{% trans "Name" %}</th>
-                                <th>{% trans "Contact" %}</th>
-                                <th>{% trans "Interview Date" %}</th>
-                                <th>{% trans "Interview Link" %}</th>
-                                <th>{% trans "Actions" %}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for candidate in candidates %}
-                            <tr>
-                                <td>
-                                    <div class="form-check">
-                                        <input
-                                        data-bind-selections
-                                        data-attr-disabled="$_fetching"
-                                        name="{{ candidate.id }}"
 
-                                        type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
+                <form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post" class="action-group">
-                                    </div>
+                    {% csrf_token %}
-                                </td>
+                    <select name="mark_as" id="update_status" class="form-select form-select-sm" style="width: 120px;">
-                                <td>
+                        <option value="Exam">
-                                    <div class="candidate-name">{{ candidate.name }}</div>
+                            {% trans "To Exam" %}
-                                </td>
+                        </option>
-                                <td>
+                        <option value="Offer">
-                                    <div class="candidate-details">
+                            {% trans "To Offer" %}
-                                        Email: {{ candidate.email }}<br>
+                        </option>
-                                        Phone: {{ candidate.phone }}<br>
+                    </select>
-                                    </div>
+                    <button type="submit" class="btn btn-main-action btn-sm">
-                                </td>
+                        <i class="fas fa-arrow-right me-1"></i> {% trans "Update" %}
-
+                    </button>
-                                <td>{{candidate.get_latest_meeting.start_time|date:"m-d-Y h:i A"}}</td>
-                                <td><a href="{{candidate.get_latest_meeting.join_url}}">{% include "icons/link.html" %}</a></td>
-                                <td>
-                                    <a href="{% url 'schedule_meeting_for_candidate' job.slug candidate.pk %}" class="btn btn-primary btn-sm me-1" title="{% trans 'Schedule Interview' %}">
-                                        <i class="fas fa-calendar-plus"></i>
-                                    </a>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
                 </form>
+
+                <div class="vr" style="height: 28px;"></div> <form hx-boost="true" hx-include="#candidate-form" action="{% url 'schedule_interviews' job.slug %}" method="get" class="action-group">
+                    <button type="submit" class="btn btn-main-action btn-sm">
+                        <i class="fas fa-calendar-plus me-1"></i> {% trans "Schedule Interviews" %}
+                    </button>
+                </form>
+
             </div>
-    <!-- Tab Content -->
+        {% endif %}
+        <form id="candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="get">
+            {% csrf_token %}
+            <table class="table candidate-table align-middle">
+                <thead>
+                    <tr>
+                        <th>
+                            {% if candidates %}
+                                <div class="form-check">
+                                    <input
+                                    type="checkbox" class="form-check-input" id="selectAllCheckbox">
+                                </div>
+                            {% endif %}
+                        </th>
+                        <th>{% trans "Name" %}</th>
+                        <th>{% trans "Contact" %}</th>
+                        <th>{% trans "Topic" %}</th>
+                        <th>{% trans "Duration" %}</th>
+                        <th>{% trans "Interview Date" %}</th>
+                        <th>{% trans "Interview Link" %}</th>
+                        <th>{% trans "Actions" %}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for candidate in candidates %}
+                    <tr>
+                        <td>
+                            <div class="form-check">
+                                <input name="candidate_ids" value="{{ candidate.id }}" type="checkbox" class="form-check-input rowCheckbox" id="candidate-{{ candidate.id }}">
+                            </div>
+                        </td>
+                        <td>
+                            <div class="candidate-name">
+                                {{ candidate.name }}
+                            </div>
+                        </td>
+                        <td>
+                            <div class="candidate-details">
+                                <i class="fas fa-envelope me-1"></i> {{ candidate.email }}<br>
+                                <i class="fas fa-phone me-1"></i> {{ candidate.phone }}
+                            </div>
+                        </td>
+                        <td class="candidate-details text-muted">{{ candidate.get_latest_meeting.topic }}</td>
+                        <td class="candidate-details text-muted"><div class="d-block"><i class="fas fa-clock me-1"></i> {{ candidate.get_latest_meeting.duration }} min</div></td>
+                        <td class="candidate-details text-muted">
+                            {% with latest_meeting=candidate.get_latest_meeting %}
+                                {% if latest_meeting %}
+                                    {{ latest_meeting.start_time|date:"M d, Y h:i A" }}
+                                {% else %}
+                                    <span class="text-muted">N/A</span>
+                                {% endif %}
+                            {% endwith %}
+                        </td>
+                        <td>
+                            {% with latest_meeting=candidate.get_latest_meeting %}
+                                {% if latest_meeting and latest_meeting.join_url %}
+                                    <a href="{{ latest_meeting.join_url }}" target="_blank" class="text-primary-theme" title="Join Interview">
+                                        <i class="fas fa-link"></i>
+                                    </a>
+                                {% else %}
+                                    <span class="text-muted">--</span>
+                                {% endif %}
+                            {% endwith %}
+                        </td>
+                        <td>
+                            <button type="button" class="btn btn-outline-secondary btn-sm"
+                                data-bs-toggle="modal"
+                                data-bs-target="#candidateviewModal"
+                                hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
+                                hx-target="#candidateviewModalBody"
+                                title="View Profile">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                            {% if candidate.get_latest_meeting %}
+                            <button type="button" class="btn btn-outline-secondary btn-sm"
+                                data-bs-toggle="modal"
+                                data-bs-target="#candidateviewModal"
+                                hx-get="{% url 'reschedule_meeting_for_candidate' job.slug candidate.pk candidate.get_latest_meeting.pk %}"
+                                hx-target="#candidateviewModalBody"
+                                title="Reschedule">
+                                <i class="fas fa-redo-alt"></i>
+                            </button>
+                            <button type="button" class="btn btn-outline-danger btn-sm"
+                                data-bs-toggle="modal"
+                                data-bs-target="#candidateviewModal"
+                                hx-get="{% url 'delete_meeting_for_candidate' job.slug candidate.pk candidate.get_latest_meeting.pk %}"
+                                hx-target="#candidateviewModalBody"
+                                title="Delete Meeting">
+                                <i class="fas fa-trash"></i>
+                            </button>
+
+                                {% else %}
+                                    <button type="button" class="btn btn-main-action btn-sm"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#candidateviewModal"
+                                        hx-get="{% url 'schedule_meeting_for_candidate' job.slug candidate.pk %}"
+                                        hx-target="#candidateviewModalBody"
+                                        data-modal-title="{% trans 'Schedule Interview' %}"
+                                        title="Schedule Interview">
+                                        <i class="fas fa-calendar-plus"></i>
+                                    </button>
+                                {% endif %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+            {% if not candidates %}
+                <div class="alert alert-info text-center mt-3 mb-0" role="alert">
+                    <i class="fas fa-info-circle me-1"></i>
+                    {% trans "No candidates are currently in the Interview stage for this job." %}
+                </div>
+            {% endif %}
+        </form>
+
+    </div>
+
+</div>
 
 <div class="modal fade modal-xl" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
     <div class="modal-dialog">
-        <div class="modal-content">
+        <div class="modal-content kaauh-card"> <div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
-            <div class="modal-header">
+                <h5 class="modal-title" id="candidateviewModalLabel" style="color: var(--kaauh-teal-dark);">
-                <h5 class="modal-title" id="candidateviewModalLabel">Form Settings</h5>
+                    {% trans "Candidate Details / Bulk Action Form" %}
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div id="candidateviewModalBody" class="modal-body">
-
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Main Meeting Schedule/Reschedule Modal -->
-<div class="modal fade" id="meetingModal" tabindex="-1" aria-labelledby="meetingModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="meetingModalLabel">
-                    {% trans "Schedule Interview" %} <!-- Default title -->
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div id="meetingModalBody" class="modal-body">
+            <div id="candidateviewModalBody" class="modal-body">
-                <!-- HTMX will load the form here -->
+                <div class="text-center py-5 text-muted">
-                <p class="text-center text-muted">{% trans "Loading form..." %}</p>
+                    <i class="fas fa-spinner fa-spin fa-2x"></i><br>
+                    {% trans "Loading content..." %}
+                </div>
             </div>
-            <div class="modal-footer">
+            <div class="modal-footer" style="border-top: 1px solid var(--kaauh-border);">
-                <!-- HTMX might update the button text or add specific actions here if needed -->
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
-                <!-- For now, the form itself has its own submit and cancel buttons -->
+                    {% trans "Cancel" %}
-                <!-- The cancel button inside the form will close the modal -->
+                </button>
             </div>
         </div>
     </div>
 </div>
 
+{% endblock %}
+
 {% block customJS %}
 <script>
-document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
-    const meetingModalElement = document.getElementById('meetingModal');
+        const selectAllCheckbox = document.getElementById('selectAllCheckbox');
-    const meetingModalTitle = meetingModalElement.querySelector('#meetingModalLabel');
+        const rowCheckboxes = document.querySelectorAll('.rowCheckbox');
-    // The submit button is now inside the form snippet loaded by HTMX.
-    // We will pass title info via data-* attributes or rely on the snippet's initial rendering.
 
-    // Add event listeners to buttons that trigger this modal
+        if (selectAllCheckbox) {
-    // Using event delegation for dynamically added buttons
-    document.addEventListener('click', function(event) {
-        const button = event.target.closest('button[data-bs-toggle="modal"][data-bs-target="#meetingModal"]');
-        if (button) {
-            event.preventDefault(); // Prevent default if button has an href or type="submit"
 
-            const modalTitle = button.getAttribute('data-modal-title');
+            // Function to safely update the header checkbox state
-            const modalSubmitText = button.getAttribute('data-modal-submit-text');
+            function updateSelectAllState() {
+                const checkedCount = Array.from(rowCheckboxes).filter(cb => cb.checked).length;
+                const totalCount = rowCheckboxes.length;
 
-            if (meetingModalTitle) {
+                if (checkedCount === 0) {
-                meetingModalTitle.textContent = modalTitle || "{% trans 'Schedule Interview' %}";
+                    selectAllCheckbox.checked = false;
+                    selectAllCheckbox.indeterminate = false;
+                } else if (checkedCount === totalCount) {
+                    selectAllCheckbox.checked = true;
+                    selectAllCheckbox.indeterminate = false;
+                } else {
+                    // Set to indeterminate state (partially checked)
+                    selectAllCheckbox.checked = false;
+                    selectAllCheckbox.indeterminate = true;
+                }
             }
-            // The submit button text is now handled by the meeting_form.html snippet itself,
-            // based on whether 'scheduled_interview' context is passed.
 
-            // Show the modal first, then HTMX will load the content into #meetingModalBody
+            // 1. Logic for the 'Select All' checkbox (Clicking it updates all rows)
-            const modal = new bootstrap.Modal(meetingModalElement);
+            selectAllCheckbox.addEventListener('change', function () {
-            modal.show();
+                const isChecked = selectAllCheckbox.checked;
 
-            // HTMX attributes (hx-get, hx-target, hx-swap) on the button will trigger the fetch
+                // Temporarily disable the change listener on rows to prevent cascading events
-            // after the modal is shown. HTMX handles this automatically.
+                rowCheckboxes.forEach(checkbox => checkbox.removeEventListener('change', updateSelectAllState));
+
+                // Update all row checkboxes
+                rowCheckboxes.forEach(function (checkbox) {
+                    checkbox.checked = isChecked;
+
+                    // Dispatch event for the framework (data-bind-selections)
+                    checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+                });
+
+                // Re-attach the change listeners to the rows
+                rowCheckboxes.forEach(checkbox => checkbox.addEventListener('change', updateSelectAllState));
+
+                // Ensure the header state is correct after forcing all changes
+                updateSelectAllState();
+            });
+
+            // 2. Logic to update 'Select All' state based on row checkboxes
+            // Attach the function to be called whenever a row checkbox changes
+            rowCheckboxes.forEach(function (checkbox) {
+                checkbox.addEventListener('change', updateSelectAllState);
+            });
+
+            // Initial check to set the correct state on load (in case items are pre-checked)
+            updateSelectAllState();
         }
     });
 
-    // Optional: Clear HTMX target content if modal is hidden without submission
+    // Handle Meeting Modal Opening (Rescheduling/Scheduling)
-    meetingModalElement.addEventListener('hidden.bs.modal', function () {
+    document.addEventListener('DOMContentLoaded', function() {
-        const modalBody = meetingModalElement.querySelector('#meetingModalBody');
+        // Renamed to candidateviewModal as that's the ID in the template
-        if (modalBody) {
+        const candidateviewModalElement = document.getElementById('candidateviewModal');
-            // Reset to a loading message or clear, so next open fetches fresh
+        const candidateviewModalLabel = candidateviewModalElement.querySelector('#candidateviewModalLabel');
-            modalBody.innerHTML = '<p class="text-center text-muted">{% trans "Loading form..." %}</p>';
-        }
-    });
-});
 
-// The old JS functions (loadScheduleMeetingForm, loadRescheduleMeetingForm) are no longer needed
+        // Event listener for dynamic buttons using delegation
-// as HTMX handles fetching the form. They can be removed if not used elsewhere.
+        document.addEventListener('click', function(event) {
+            // Targetting buttons with hx-get that also targets the modal body
+            const button = event.target.closest('button[data-bs-toggle="modal"][data-bs-target="#candidateviewModal"]');
+            if (button) {
+                // Do NOT preventDefault here as hx-get needs to fire.
+                // hx-get will load the content into #candidateviewModalBody.
+
+                const modalTitle = button.getAttribute('data-modal-title');
+
+                // Update the modal title if a custom one is provided (used for scheduling)
+                if (modalTitle && candidateviewModalLabel) {
+                    candidateviewModalLabel.textContent = modalTitle;
+                }
+            }
+        });
+
+        // Clear HTMX target content when modal is hidden
+        candidateviewModalElement.addEventListener('hidden.bs.modal', function () {
+            const modalBody = candidateviewModalElement.querySelector('#candidateviewModalBody');
+            if (modalBody) {
+                // Reset to the loading state message, matching the initial content
+                modalBody.innerHTML = `
+                    <div class="text-center py-5 text-muted">
+                        <i class="fas fa-spinner fa-spin fa-2x"></i><br>
+                        {% trans "Loading content..." %}
+                    </div>
+                `;
+                // Reset the modal title to its default state for next use
+                const defaultTitle = "{% trans "Candidate Details / Bulk Action Form" %}";
+                candidateviewModalLabel.textContent = defaultTitle;
+            }
+        });
+    });
 </script>
 {% endblock %}
-{% endblock %}

templates/recruitment/candidate_screening_view.html

@@ -3,184 +3,12 @@
 
 {% block title %}Candidate Management - {{ job.title }} - University ATS{% endblock %}
 
-{% block customCSS %}
-<style>
-    /* KAAT-S UI Variables */
-    :root {
-        --kaauh-teal: #00636e;
-        --kaauh-teal-dark: #004a53;
-        --kaauh-border: #eaeff3;
-        --kaauh-primary-text: #343a40;
-        --kaauh-success: #28a745;
-        --kaauh-info: #17a2b8;
-        --kaauh-danger: #dc3545;
-        --kaauh-warning: #ffc107;
-    }
-
-    /* Primary Color Overrides */
-    .text-primary-theme { color: var(--kaauh-teal) !important; }
-    .bg-primary-theme { background-color: var(--kaauh-teal) !important; }
-
-    /* 1. Main Container & Card Styling */
-    .kaauh-card {
-        border: 1px solid var(--kaauh-border);
-        border-radius: 0.75rem;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
-        background-color: white;
-    }
-
-    /* Dedicated style for the filter block */
-    .filter-controls {
-        background-color: #f8f9fa;
-        border-radius: 0.75rem;
-        padding: 1.5rem;
-        margin-bottom: 2rem;
-        border: 1px solid var(--kaauh-border);
-    }
-
-    /* 2. Button Styling (Themed for Main Actions) */
-    .btn-main-action {
-        background-color: var(--kaauh-teal);
-        border-color: var(--kaauh-teal);
-        color: white;
-        font-weight: 600;
-        transition: all 0.2s ease;
-    }
-    .btn-main-action:hover {
-        background-color: var(--kaauh-teal-dark);
-        border-color: var(--kaauh-teal-dark);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-    }
-    .btn-outline-secondary {
-        color: var(--kaauh-teal-dark);
-        border-color: var(--kaauh-teal);
-    }
-    .btn-outline-secondary:hover {
-        background-color: var(--kaauh-teal-dark);
-        color: white;
-        border-color: var(--kaauh-teal-dark);
-    }
-    /* Style for the Bulk Move button */
-    .btn-bulk-action {
-        background-color: var(--kaauh-teal-dark);
-        border-color: var(--kaauh-teal-dark);
-        color: white;
-        font-weight: 500;
-    }
-    .btn-bulk-action:hover {
-        background-color: #00363e;
-        border-color: #00363e;
-    }
-
-    /* 3. Candidate Table Styling (Aligned with KAAT-S) */
-    .candidate-table {
-        table-layout: fixed;
-        width: 100%;
-        border-collapse: separate;
-        border-spacing: 0;
-        background-color: white;
-        border-radius: 0.5rem;
-        overflow: hidden;
-    }
-    .candidate-table thead {
-        background-color: var(--kaauh-border);
-    }
-    .candidate-table th {
-        padding: 0.75rem 1rem;
-        font-weight: 600;
-        color: var(--kaauh-teal-dark);
-        border-bottom: 2px solid var(--kaauh-teal);
-        font-size: 0.9rem;
-        vertical-align: middle;
-    }
-    .candidate-table td {
-        padding: 0.75rem 1rem;
-        border-bottom: 1px solid var(--kaauh-border);
-        vertical-align: middle;
-        font-size: 0.9rem;
-    }
-    .candidate-table tbody tr:hover {
-        background-color: #f1f3f4;
-    }
-    .candidate-table thead th:nth-child(1) { width: 40px; }
-    .candidate-table thead th:nth-child(4) { width: 10%; }
-    .candidate-table thead th:nth-child(7) { width: 100px; }
-
-    .candidate-name {
-        font-weight: 600;
-        color: var(--kaauh-primary-text);
-    }
-    .candidate-details {
-        font-size: 0.8rem;
-        color: #6c757d;
-    }
-
-    /* 4. Badges and Statuses */
-    .ai-score-badge {
-        background-color: var(--kaauh-teal-dark) !important;
-        color: white;
-        font-weight: 700;
-        padding: 0.4em 0.8em;
-        border-radius: 0.4rem;
-    }
-    .status-badge {
-        font-size: 0.75rem;
-        padding: 0.3em 0.7em;
-        border-radius: 0.35rem;
-        font-weight: 700;
-    }
-    .bg-applicant { background-color: #6c757d !important; color: white; }
-    .bg-candidate { background-color: var(--kaauh-success) !important; color: white; }
-
-    /* Stage Badges */
-    .stage-badge {
-        font-size: 0.75rem;
-        padding: 0.25rem 0.6rem;
-        border-radius: 0.3rem;
-        font-weight: 600;
-        display: inline-block;
-        margin-bottom: 0.2rem;
-    }
-    .stage-Applied { background-color: #e9ecef; color: #495057; }
-    .stage-Screening { background-color: var(--kaauh-info); color: white; }
-    .stage-Exam { background-color: var(--kaauh-warning); color: #856404; }
-    .stage-Interview { background-color: #17a2b8; color: white; }
-    .stage-Offer { background-color: var(--kaauh-success); color: white; }
-
-    /* Timeline specific container */
-    .applicant-tracking-timeline {
-        margin-bottom: 2rem;
-    }
-
-    /* --- CUSTOM HEIGHT OPTIMIZATION (MAKING INPUTS/BUTTONS SMALLER) --- */
-    .form-control-sm,
-    .btn-sm {
-        /* Reduce vertical padding even more than default Bootstrap 'sm' */
-        padding-top: 0.2rem !important;
-        padding-bottom: 0.2rem !important;
-        /* Ensure a consistent, small height for both */
-        height: 28px !important;
-        font-size: 0.8rem !important; /* Slightly smaller font */
-    }
-
-    .cd_screening{
-        color: #00636e;
-
-    }
-
-</style>
-{% endblock %}
-
 {% block content %}
 
 <div class="container-fluid py-4">
-     <div class="applicant-tracking-timeline">
-        {% include 'jobs/partials/applicant_tracking.html' %}
-    </div>
-
     <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
-            <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
+            <h1 class="h3 mb-1 page-header">
                 <i class="fas fa-layer-group me-2"></i>
                 {% trans "Applicant Screening" %}
             </h1>
@@ -194,40 +22,42 @@
         </a>
     </div>
 
-    <div class="filter-controls shadow-sm">
+    <div class="applicant-tracking-timeline mb-4">
-        <h4 class="h6 mb-3 fw-bold" style="color: var(--kaauh-primary-text);">
+        {% include 'jobs/partials/applicant_tracking.html' %}
+    </div>
+
+    <div class="filter-controls">
+        <h4 class="h6 mb-3 fw-bold">
             <i class="fas fa-sort-numeric-up me-1"></i> {% trans "AI Scoring & Top Candidate Filter" %}
         </h4>
 
-      <form method="GET" class="mb-0 pb-3">
+      <form method="GET" class="mb-0">
-    {% csrf_token %}
+        <div class="row g-3 align-items-end">
-    <div class="d-flex flex-nowrap g-3 align-items-end" style="overflow-x: auto;">
 
-        <div class="p-2">
+            <div class="col-auto">
-            <label for="min_ai_score" class="form-label small text-muted mb-1">
+                <label for="min_ai_score" class="form-label small text-muted mb-1">
-                {% trans "Min AI Score" %}
+                    {% trans "Min AI Score" %}
-            </label>
+                </label>
-            <input type="number" name="min_ai_score" id="min_ai_score" class="form-control form-control-sm"
+                <input type="number" name="min_ai_score" id="min_ai_score" class="form-control form-control-sm"
-                   value="{{ min_ai_score}}" min="0" max="100" step="1"
+                       value="{{ min_ai_score}}" min="0" max="100" step="1"
-                   placeholder="e.g., 75" style="min-width: 120px;">
+                       placeholder="e.g., 75" style="width: 120px;">
-        </div>
+            </div>
 
-        <div class="p-2">
+            <div class="col-auto">
-            <label for="tier1_count" class="form-label small text-muted mb-1">
+                <label for="tier1_count" class="form-label small text-muted mb-1">
-                {% trans "Top N" %}
+                    {% trans "Top N Candidates" %}
-            </label>
+                </label>
-            <input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
+                <input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
-                   value="{{ tier1_count }}" min="1" max="{{ total_candidates }}" style="min-width: 100px;">
+                       value="{{ tier1_count }}" min="1" max="{{ total_candidates }}" style="width: 120px;">
-        </div>
+            </div>
 
-        <div class="p-2">
+            <div class="col-auto">
-            <label class="form-label small text-muted mb-1 d-block">&nbsp;</label>
+                <button type="submit" name="update_tiers" class="btn btn-main-action btn-sm">
-            <button type="submit" name="update_tiers" class="btn btn-main-action btn-sm w-100" style="min-width: 150px;">
+                    <i class="fas fa-sync-alt me-1"></i> {% trans "Update Filters" %}
-                <i class="fas fa-sync-alt me-1"></i> {% trans "Update Filters" %}
+                </button>
-            </button>
+            </div>
         </div>
-    </div>
+      </form>
-</form>
     </div>
 
     <h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
@@ -235,20 +65,22 @@
         <span class="badge bg-primary-theme ms-2">{{ candidates|length }} / {{ total_candidates }} Total</span>
     </h2>
 
-    <div class="kaauh-card shadow-sm p-3">
+    <div class="kaauh-card p-3">
         {% if candidates %}
-            <form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post">
+        <div class="bulk-action-bar">
-                <div class="d-flex align-items-center">
+            <form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post" class="action-group">
-                    <select name="mark_as" id="update_status" class="form-select form-select-sm" style="height: 3rem;">
+                {% csrf_token %}
-                        <option value="Exam">
+                <label for="update_status" class="form-label small mb-0 fw-bold">{% trans "Move Selected To:" %}</label>
-                            <i class="fas fa-arrow-right me-1"></i> {% trans "Exam" %}
+                <select name="mark_as" id="update_status" class="form-select form-select-sm" style="width: auto;">
-                        </option>
+                    <option value="Exam">
+                        {% trans "Exam Stage" %}
+                    </option>
                     </select>
-                    <button type="submit" class="btn btn-main-action btn-mds ms-2">
+                <button type="submit" class="btn btn-main-action btn-sm">
-                        <i class="fas fa-arrow-right me-1"></i> {% trans "Update" %}
+                    <i class="fas fa-arrow-right me-1"></i> {% trans "Update Status" %}
-                    </button>
+                </button>
-                </div>
             </form>
+        </div>
         {% endif %}
 
         <div class="table-responsive">
@@ -375,7 +207,6 @@
         const rowCheckboxes = document.querySelectorAll('.rowCheckbox');
 
         if (selectAllCheckbox) {
-
             // Function to safely update the header checkbox state
             function updateSelectAllState() {
                 const checkedCount = Array.from(rowCheckboxes).filter(cb => cb.checked).length;
@@ -388,40 +219,27 @@
                     selectAllCheckbox.checked = true;
                     selectAllCheckbox.indeterminate = false;
                 } else {
-                    // Set to indeterminate state (partially checked)
                     selectAllCheckbox.checked = false;
                     selectAllCheckbox.indeterminate = true;
                 }
-
-                // IMPORTANT: We do NOT fire a change event here to prevent the infinite loop.
-                // Your existing data-bind-_all logic should handle the bulk action status.
             }
 
             // 1. Logic for the 'Select All' checkbox (Clicking it updates all rows)
             selectAllCheckbox.addEventListener('change', function () {
                 const isChecked = selectAllCheckbox.checked;
 
-                // Temporarily disable the change listener on rows to prevent cascading events
                 rowCheckboxes.forEach(checkbox => checkbox.removeEventListener('change', updateSelectAllState));
 
-                // Update all row checkboxes
                 rowCheckboxes.forEach(function (checkbox) {
                     checkbox.checked = isChecked;
-
-                    // You must still dispatch the event here so your framework's data-bind-selections
-                    // picks up the change on individual elements. This should NOT trigger the updateSelectAllState.
                     checkbox.dispatchEvent(new Event('change', { bubbles: true }));
                 });
 
-                // Re-attach the change listeners to the rows
                 rowCheckboxes.forEach(checkbox => checkbox.addEventListener('change', updateSelectAllState));
-
-                // Ensure the header state is correct after forcing all changes
                 updateSelectAllState();
             });
 
             // 2. Logic to update 'Select All' state based on row checkboxes
-            // Attach the function to be called whenever a row checkbox changes
             rowCheckboxes.forEach(function (checkbox) {
                 checkbox.addEventListener('change', updateSelectAllState);
             });