recruitment/forms.py

@@ -5,11 +5,9 @@ from django.forms.formsets import formset_factory
 from django.utils.translation import gettext_lazy as _
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import Layout, Submit, Row, Column, Field, Div
-from django.contrib.auth.models import User
 from .models import (
     ZoomMeeting, Candidate,TrainingMaterial,JobPosting,
-    FormTemplate,InterviewSchedule,BreakTime,JobPostingImage,
-    Profile
+    FormTemplate,InterviewSchedule,BreakTime,JobPostingImage
 )
 # from django_summernote.widgets import SummernoteWidget
 from django_ckeditor_5.widgets import CKEditor5Widget
@@ -507,16 +505,4 @@ class ScheduleInterviewForCandiateForm(forms.ModelForm):
             'end_time': forms.TimeInput(attrs={'type': 'time', 'class': 'form-control'}),
             'interview_duration': forms.NumberInput(attrs={'class': 'form-control'}),
             'buffer_time': forms.NumberInput(attrs={'class': 'form-control'}),
-        }
-
-class ProfileImageUploadForm(forms.ModelForm):
-    class Meta:
-        model=Profile
-        fields=['profile_image']
-
-
-
-# class UserEditForms(forms.ModelForm):
-#         class Meta:
-#             model = User
-#             fields = ['first_name', 'last_name']
+        }

recruitment/models.py

@@ -10,7 +10,6 @@ from django_countries.fields import CountryField
 from django.urls import reverse
 # from ckeditor.fields import RichTextField
 from django_ckeditor_5.fields import CKEditor5Field
-from django.utils.html import strip_tags
 
 
 
@@ -247,43 +246,6 @@ class JobPosting(Base):
             "form_wizard", kwargs={"slug": self.form_template.slug}
         )
         self.save()
-        
-    def _check_content(self, field_value):
-        """Helper to check if a field contains meaningful content."""
-        if not field_value:
-            return False
-
-        # 1. Replace the common HTML non-breaking space entity with a standard space.
-        content = field_value.replace(' ', ' ')
-        
-        # 2. Remove all HTML tags (leaving only text and remaining spaces).
-        stripped = strip_tags(content)
-        
-        # 3. Use .strip() to remove ALL leading/trailing whitespace, including the ones from step 1.
-        final_content = stripped.strip()
-        
-        # Return True if any content remains after stripping tags and spaces.
-        return bool(final_content)
-
-
-    @property
-    def has_description_content(self):
-        """Returns True if the description field has meaningful content."""
-        return self._check_content(self.description)
-
-    @property
-    def has_qualifications_content(self):
-        """Returns True if the qualifications field has meaningful content."""
-        return self._check_content(self.qualifications)
-    
-    # Add similar properties for benefits and application_instructions
-    @property
-    def has_benefits_content(self):
-        return self._check_content(self.benefits)
-
-    @property
-    def has_application_instructions_content(self):
-        return self._check_content(self.application_instructions)
 
 
 class JobPostingImage(models.Model):

recruitment/urls.py

@@ -107,7 +107,5 @@ urlpatterns = [
 
 
     # users urls
-    path('user/<int:pk>',views.user_detail,name='user_detail'),
-    path('user/user_profile_image_update/<int:pk>',views.user_profile_image_update,name='user_profile_image_update'),
-
+    path('user/<int:pk>',views.user_detail,name='user_detail')
 ]

recruitment/views.py

@@ -19,9 +19,7 @@ from .forms import (
     FormTemplateForm,
     InterviewScheduleForm,JobPostingStatusForm,
     BreakTimeFormSet,
-    JobPostingImageForm,
-    ProfileImageUploadForm,
-  
+    JobPostingImageForm
 )
 from rest_framework import viewsets
 from django.contrib import messages
@@ -53,8 +51,7 @@ from .models import (
     ZoomMeeting,
     Candidate,
     JobPosting,
-    ScheduledInterview,
-    JobPostingImage
+    ScheduledInterview
 )
 import logging
 from datastar_py.django import (
@@ -319,7 +316,7 @@ def job_detail(request, slug):
 
 
     status_form = JobPostingStatusForm(instance=job)
-    image_upload_form=JobPostingImageForm(instance=job.post_images)
+    image_upload_form=JobPostingImageForm(instance=job)
 
 
 
@@ -337,7 +334,6 @@ def job_detail(request, slug):
 
             return redirect('job_detail', slug=slug)
         else:
-            
 
             messages.error(request, "Failed to update status due to validation errors.")
 
@@ -359,32 +355,19 @@ def job_detail(request, slug):
 def job_image_upload(request, slug):
     #only for handling the post request
     job=get_object_or_404(JobPosting,slug=slug)
-    try:
-        instance = JobPostingImage.objects.get(job=job)
-    except JobPostingImage.DoesNotExist:
-        # If it doesn't exist, create a new instance placeholder
-        instance = None
-        
-    if request.method == 'POST':
-        # Pass the existing instance to the form if it exists
-        image_upload_form = JobPostingImageForm(request.POST, request.FILES, instance=instance)
-        
+    if request.method=='POST':
+        image_upload_form=JobPostingImageForm(request.POST,request.FILES)
         if image_upload_form.is_valid():
-            
-            # If creating a new one (instance is None), set the job link manually
-            if instance is None:
-                image_instance = image_upload_form.save(commit=False)
-                image_instance.job = job
-                image_instance.save()
-                messages.success(request, f"Image uploaded successfully for {job.title}.")
-            else:
-                # If updating, the form will update the instance passed to it
-                image_upload_form.save()
-                messages.success(request, f"Image updated successfully for {job.title}.")
-    
+            image_upload_form = image_upload_form.save(commit=False)
+
+            image_upload_form.job = job
+            image_upload_form.save()
+            messages.success(request, f"Image uploaded successfully for {job.title}.")
+            return redirect('job_detail', slug=job.slug)
         else:
-            
+
             messages.error(request, "Image upload failed: Please ensure a valid image file was selected.")
+
             return redirect('job_detail', slug=job.slug)
     return redirect('job_detail', slug=job.slug)
 
@@ -404,7 +387,7 @@ def kaauh_career(request):
 # job detail facing the candidate:
 def job_detail_candidate(request, slug):
     job = get_object_or_404(JobPosting, slug=slug)
-    return render(request, "forms/job_detail_candidate.html", {"job": job})
+    return render(request, "jobs/job_detail_candidate.html", {"job": job})
 
 
 def post_to_linkedin(request, slug):
@@ -2354,43 +2337,6 @@ def schedule_meeting_for_candidate(request, slug, candidate_pk):
     
 
 
-def user_profile_image_update(request, pk):
-    user = get_object_or_404(User, pk=pk)
-
-    if request.method == 'POST':
-        profile_form = ProfileImageUploadForm(request.POST, request.FILES, instance=user.profile) 
-        if profile_form.is_valid():
-            profile_form.save()
-            messages.success(request, 'Image uploaded successfully')
-            return redirect('user_detail', pk=user.pk) 
-        else:
-            messages.error(request, 'An error occurred while uploading the image')
-    else:
-        profile_form = ProfileImageUploadForm(instance=user.profile) 
-
-    context = {
-        'profile_form': profile_form,
-        'user': user,
-    }
-    return render(request, 'user/profile.html', context)
-
-
-
-def user_detail(request, pk):
-    user = get_object_or_404(User, pk=pk)
-    profile_form = ProfileImageUploadForm(instance=user.profile)
-    if request.method == 'POST':
-        first_name=request.POST.get('first_name')
-        last_name=request.POST.get('last_name')
-        if first_name:
-            user.first_name=first_name
-        if last_name:
-            user.last_name=last_name
-        user.save()
-    context = {
-       
-        'user': user,
-        'profile_form':profile_form
-       
-    }
-    return render(request, 'user/profile.html', context)
+def user_detail(requests,pk):
+        user=get_object_or_404(User,pk=pk)
+        return render(requests,'user/profile.html')

static/css/style.css

@@ -0,0 +1,947 @@
+
+/* Custom CSS for NorahUniversity ATS */
+/* Keep only essential custom styles that Bootstrap doesn't handle */
+
+/* Primary Brand Color */
+:root {
+    --primary-color: #1b8354;
+    --primary-hover: #155f3e;
+}
+
+/* Header and Navigation */
+.header {
+    background-color: white !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+    border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.navbar {
+    background-color: white !important;
+    border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.nav-link.active {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+}
+
+.nav-link:hover {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color) !important;
+}
+
+/* Buttons - Override Bootstrap primary color */
+.btn-primary {
+    background-color: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-hover) !important;
+    border-color: var(--primary-hover) !important;
+}
+
+.btn-outline-primary {
+    border-color: var(--primary-color) !important;
+    color: var(--primary-color) !important;
+}
+
+.btn-outline-primary:hover {
+    background-color: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+    color: white !important;
+}
+
+/* Cards */
+.card {
+    border: 1px solid #e0e0e0 !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+}
+
+.card-header {
+    border-bottom: 1px solid #e0e0e0 !important;
+    background-color: white !important;
+}
+
+/* Table Improvements */
+.table-hover tbody tr:hover {
+    background-color: rgba(27, 131, 84, 0.05) !important;
+}
+
+/* Custom Badge Colors */
+.badge.bg-success {
+    background-color: #28a745 !important;
+}
+
+.badge.bg-warning {
+    background-color: #ffc107 !important;
+}
+
+/* Form Improvements */
+.form-control:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.25) !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .nav-list {
+        flex-direction: column;
+    }
+
+    .nav-item {
+        margin: 0;
+    }
+}
+
+/* Utility classes */
+.text-primary-custom {
+    color: var(--primary-color) !important;
+}
+
+.bg-primary-custom {
+    background-color: var(--primary-color) !important;
+}
+
+.border-primary-custom {
+    border-color: var(--primary-color) !important;
+}
+
+/* Loading states */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+/* Icon Styling */
+.heroicon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+    flex-shrink: 0;
+}
+
+.size-6 {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+}
+
+/* Responsive icon sizing */
+.icon-sm {
+    width: 0.875rem !important;
+    height: 0.875rem !important;
+    margin-right: 0.375rem !important;
+}
+
+.icon-md {
+    width: 1.125rem !important;
+    height: 1.125rem !important;
+    margin-right: 0.625rem !important;
+}
+
+.icon-lg {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    margin-right: 0.75rem !important;
+}
+
+.icon-xl {
+    width: 2rem !important;
+    height: 2rem !important;
+    margin-right: 1rem !important;
+}
+
+/* Context-specific icon adjustments */
+.btn-sm .heroicon,
+.btn-sm .size-6,
+.btn-sm .icon-md {
+    width: 0.875rem !important;
+    height: 0.875rem !important;
+    margin-right: 0.375rem !important;
+}
+
+.nav-link .heroicon,
+.nav-link .size-6 {
+    width: 1.25rem !important;
+    height: 1.25rem !important;
+    margin-right: 0.5rem !important;
+}
+
+.card-header .heroicon,
+.card-header .size-6 {
+    width: 1.375rem !important;
+    height: 1.375rem !important;
+    margin-right: 0.625rem !important;
+}
+
+/* Print styles */
+@media print {
+    .navbar,
+    .header,
+    .btn,
+    .pagination {
+        display: none !important;
+    }
+
+    .card {
+        box-shadow: none !important;
+        border: 1px solid #ccc !important;
+    }
+}
+
+/* Responsive adjustments for icons */
+@media (max-width: 768px) {
+    .nav-link .heroicon,
+    .nav-link .size-6 {
+        width: 1rem !important;
+        height: 1rem !important;
+        margin-right: 0.375rem !important;
+    }
+
+    .card-header .heroicon,
+    .card-header .size-6 {
+        width: 1.125rem !important;
+        height: 1.125rem !important;
+        margin-right: 0.5rem !important;
+    }
+}
+
+/* Header and Search Enhancements */
+.card-header {
+    background-color: white !important;
+    border-bottom: 1px solid #e0e0e0 !important;
+    padding: 1.25rem 1.5rem !important;
+}
+
+.card-header h1,
+.card-header h2,
+.card-header h3 {
+    margin-bottom: 0 !important;
+    font-weight: 600 !important;
+}
+
+.card-header h1.h3,
+.card-header h2.h3,
+.card-header h3.h3 {
+    font-size: 1.25rem !important;
+}
+
+/* Search Form Enhancements */
+.search-form-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.input-group {
+    flex: 1;
+    min-width: 250px;
+}
+
+.input-group-text {
+    background-color: #f8f9fa !important;
+    border: 1px solid #ced4da !important;
+    /* border-right: none !important; */
+    color: #495057 !important;
+    transition: all 0.2s ease !important;
+}
+
+.input-group-text:hover {
+    background-color: #e9ecef !important;
+}
+
+.input-group-text .heroicon {
+    width: 1rem !important;
+    height: 1rem !important;
+    margin-right: 0 !important;
+}
+
+
+.form-control:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15) !important;
+}
+
+.form-control:focus + .input-group-text {
+    border-color: var(--primary-color) !important;
+    background-color: rgba(27, 131, 84, 0.05) !important;
+}
+
+/* Button Group Enhancements */
+.d-flex.gap-2 .btn {
+    white-space: nowrap !important;
+    transition: all 0.2s ease !important;
+}
+
+.d-flex.gap-2 .btn:hover {
+    transform: translateY(-1px) !important;
+}
+
+.d-flex.gap-2 .btn svg {
+    margin-right: 0.375rem !important;
+}
+
+/* Responsive Header Adjustments */
+@media (max-width: 768px) {
+    .card-header {
+        padding: 1rem 1.25rem !important;
+    }
+
+    .card-header h1.h3,
+    .card-header h2.h3,
+    .card-header h3.h3 {
+        font-size: 1.125rem !important;
+    }
+
+    .input-group {
+        min-width: 200px !important;
+        max-width: 100% !important;
+    }
+
+    .d-flex.gap-2 {
+        flex-wrap: wrap !important;
+        gap: 0.5rem !important;
+    }
+
+    .d-flex.gap-2 .btn {
+        flex: 1 !important;
+        min-width: 120px !important;
+    }
+}
+
+@media (max-width: 576px) {
+    .card-header {
+        padding: 0.875rem 1rem !important;
+    }
+
+    .input-group {
+        min-width: 100% !important;
+    }
+
+    .d-flex.gap-2 .btn {
+        font-size: 0.875rem !important;
+        padding: 0.375rem 0.75rem !important;
+    }
+}
+
+/* Search Input Placeholder */
+.form-control::placeholder {
+    color: #6c757d !important;
+    opacity: 0.7 !important;
+}
+
+/* Enhanced Focus States */
+.form-control:focus::placeholder {
+    opacity: 1 !important;
+}
+
+/* Detail Page Enhancements */
+.detail-page-header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.1) 100%);
+    border-bottom: 3px solid var(--primary-color) !important;
+}
+
+.detail-page-header h1 {
+    color: var(--primary-color) !important;
+}
+
+/* Information Cards Enhancement */
+.info-card {
+    background: #f8f9fa;
+    border-left: 4px solid var(--primary-color);
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    transition: all 0.3s ease;
+}
+
+.info-card:hover {
+    background: #e9ecef;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.info-card .info-label {
+    font-size: 0.875rem;
+    color: #6c757d;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.info-card .info-value {
+    font-size: 1rem;
+    color: #212529;
+    font-weight: 500;
+}
+
+/* Action Cards Enhancement */
+.action-card {
+    text-align: center;
+    padding: 2rem;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border-radius: 0.75rem;
+    transition: all 0.3s ease;
+}
+
+.action-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* Resume File Display */
+.resume-file {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    transition: all 0.2s ease;
+}
+
+.resume-file:hover {
+    background: #e9ecef;
+    border-color: var(--primary-color);
+}
+
+.resume-file .file-name {
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 0.25rem;
+}
+
+.resume-file .file-info {
+    font-size: 0.875rem;
+    color: #6c757d;
+}
+
+/* Parsed Data Grid Enhancement */
+.parsed-data-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.parsed-data-item {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    transition: all 0.2s ease;
+}
+
+.parsed-data-item:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 8px rgba(27, 131, 84, 0.1);
+}
+
+.parsed-data-item .data-key {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: var(--primary-color);
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.5rem;
+}
+
+.parsed-data-item .data-value {
+    font-size: 0.875rem;
+    color: #495057;
+    line-height: 1.4;
+}
+
+/* Status Badge Enhancement */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    border-radius: 2rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.status-badge .heroicon {
+    width: 1rem !important;
+    height: 1rem !important;
+}
+
+/* Contact Information Enhancement */
+.contact-info-item {
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.5rem;
+    background: white;
+    border-radius: 0.5rem;
+    border: 1px solid #e0e0e0;
+    transition: all 0.2s ease;
+}
+
+.contact-info-item:hover {
+    background: #f8f9fa;
+    border-color: var(--primary-color);
+    box-shadow: 0 2px 8px rgba(27, 131, 84, 0.1);
+}
+
+.contact-info-item .contact-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: #6c757d;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+.contact-info-item .contact-value {
+    font-size: 1rem;
+    color: #212529;
+    font-weight: 500;
+    margin-top: 0.125rem;
+}
+
+/* Responsive Detail Page Adjustments */
+@media (max-width: 768px) {
+    .detail-page-header {
+        background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.05) 100%);
+        border-bottom: 2px solid var(--primary-color);
+    }
+
+    .detail-page-header h1 {
+        font-size: 1.5rem !important;
+    }
+
+    .info-card {
+        padding: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .parsed-data-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .contact-info-item {
+        padding: 0.5rem 0.75rem;
+    }
+
+    .action-card {
+        padding: 1.5rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .detail-page-header h1 {
+        font-size: 1.25rem !important;
+    }
+
+    .info-card .info-label {
+        font-size: 0.75rem;
+    }
+
+    .info-card .info-value {
+        font-size: 0.875rem;
+    }
+
+    .status-badge {
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+    }
+}
+
+/* Loading Animation for Detail Pages */
+.detail-loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Print Styles for Detail Pages */
+@media print {
+    .detail-page-header {
+        background: white !important;
+        border: 2px solid #dee2e6 !important;
+    }
+
+    .detail-page-header h1 {
+        color: #212529 !important;
+    }
+
+    .contact-info-item,
+    .info-card,
+    .parsed-data-item {
+        border: 1px solid #dee2e6 !important;
+        break-inside: avoid;
+    }
+
+    .btn,
+    .action-card {
+        display: none !important;
+    }
+}
+
+/* Form and Update Page Enhancements */
+.form-page-header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(27, 131, 84, 0.1) 100%);
+    border-bottom: 3px solid var(--primary-color) !important;
+}
+
+.form-page-header h1 {
+    color: var(--primary-color) !important;
+}
+
+.form-page-header p {
+    color: rgba(27, 131, 84, 0.8) !important;
+}
+
+/* Form Section Enhancement */
+.form-section {
+    background: #f8f9fa;
+    border-left: 4px solid var(--primary-color);
+    border-radius: 0.375rem;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    transition: all 0.3s ease;
+}
+
+.form-section:hover {
+    background: #e9ecef;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.form-section h5 {
+    color: var(--primary-color);
+    font-weight: 600;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.form-section .section-icon {
+    width: 1.25rem !important;
+    height: 1.25rem !important;
+}
+
+/* Form Field Enhancement */
+.form-field-wrapper {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+.form-field-wrapper label {
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.form-field-wrapper .required-indicator {
+    color: #dc3545;
+    font-size: 0.875rem;
+    font-weight: bold;
+}
+
+.form-field-wrapper .field-icon {
+    position: absolute;
+    right: 1rem;
+    top: 2.5rem;
+    color: #6c757d;
+    pointer-events: none;
+}
+
+.form-control,
+.form-select {
+    border: 2px solid #e0e0e0;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+}
+
+.form-control:focus,
+.form-select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15);
+    color: #212529;
+    background-color: #fff;
+}
+
+.form-control.is-invalid,
+.form-select.is-invalid {
+    border-color: #dc3545;
+    padding-right: 2.5rem;
+    background-image: none;
+}
+
+.form-control.is-valid,
+.form-select.is-valid {
+    border-color: #28a745;
+    padding-right: 2.5rem;
+    background-image: none;
+}
+
+.form-text {
+    font-size: 0.875rem;
+    color: #6c757d;
+    margin-top: 0.25rem;
+}
+
+.invalid-feedback,
+.valid-feedback {
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
+
+.invalid-feedback {
+    color: #dc3545;
+    display: block;
+}
+
+.valid-feedback {
+    color: #28a745;
+    display: block;
+}
+
+/* Form Enhancement for Special Fields */
+.form-check-input {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.25rem;
+}
+
+.form-check-input:checked {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.form-check-label {
+    font-weight: 500;
+    color: #495057;
+}
+
+/* Action Buttons Enhancement */
+.form-action-buttons {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    margin-top: 2rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.form-action-buttons .btn {
+    min-width: 120px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.form-action-buttons .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Responsive Form Adjustments */
+@media (max-width: 768px) {
+    .form-section {
+        padding: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .form-section h5 {
+        font-size: 1.1rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .form-control,
+    .form-select {
+        font-size: 0.875rem;
+        padding: 0.625rem 0.75rem;
+    }
+
+    .form-field-wrapper label {
+        font-size: 0.875rem;
+    }
+
+    .form-text,
+    .invalid-feedback,
+    .valid-feedback {
+        font-size: 0.75rem;
+    }
+
+    .form-action-buttons {
+        padding: 1rem;
+        margin-top: 1.5rem;
+    }
+
+    .form-action-buttons .btn {
+        min-width: 100px;
+        font-size: 0.875rem;
+        padding: 0.5rem 1rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .form-section {
+        padding: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .form-section h5 {
+        font-size: 1rem;
+    }
+
+    .form-control,
+    .form-select {
+        font-size: 0.813rem;
+        padding: 0.5rem 0.625rem;
+    }
+
+    .form-field-wrapper {
+        margin-bottom: 1rem;
+    }
+
+    .form-action-buttons {
+        flex-direction: column !important;
+        gap: 0.5rem !important;
+    }
+
+    .form-action-buttons .btn {
+        min-width: auto;
+        width: 100%;
+    }
+}
+
+/* Loading State for Forms */
+.form-loading {
+    position: relative;
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.form-loading::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 1;
+}
+
+.form-loading .spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+}
+
+/* Print Styles for Forms */
+@media print {
+    .form-page-header,
+    .form-section,
+    .form-action-buttons {
+        border: 1px solid #dee2e6 !important;
+        background: white !important;
+        box-shadow: none !important;
+    }
+
+    .form-section {
+        break-inside: avoid;
+        page-break-inside: avoid;
+    }
+
+    .btn {
+        display: none !important;
+    }
+
+    .form-control,
+    .form-select {
+        border: 1px solid #000 !important;
+        background: white !important;
+    }
+}
+
+/* File Upload Enhancement */
+.form-control[type="file"] {
+    padding: 0.5rem;
+    border: 2px dashed #dee2e6;
+    background: #f8f9fa;
+    transition: all 0.2s ease;
+}
+
+.form-control[type="file"]:hover {
+    border-color: var(--primary-color);
+    background: #f0f8f4;
+}
+
+.form-control[type="file"]:focus {
+    border-color: var(--primary-color);
+    background: white;
+    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.15);
+}
+
+/* Checkbox and Radio Enhancement */
+.form-check-input:checked ~ .form-check-label::before {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.form-check-input:focus ~ .form-check-label::before {
+    box-shadow: 0 0 0 0.2rem rgba(27, 131, 84, 0.25);
+}
+
+/* Help Text Enhancement */
+.help-text {
+    font-size: 0.813rem;
+    color: #6c757d;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.help-text .help-icon {
+    width: 1rem !important;
+    height: 1rem !important;
+    color: #6c757d;
+}
+
+/* Error State Enhancement */
+.field-error {
+    border-color: #dc3545 !important;
+    background-color: #fff5f5 !important;
+}
+
+.field-error:focus {
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
+}
+
+/* Success State Enhancement */
+.field-success {
+    border-color: #28a745 !important;
+    background-color: #f8fff9 !important;
+}
+
+.field-success:focus {
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
+}

templates/base.html

@@ -1,6 +1,5 @@
-{% load static i18n %}
-{% get_current_language as LANGUAGE_CODE %}
-
+{% load i18n static %}
+{% load partials %}
 <!DOCTYPE html>
 <html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
 <head>
@@ -9,17 +8,12 @@
     <meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Applicant Tracking System' %}">
     <title>{% block title %}{% trans 'University ATS' %}{% endblock %}</title>
 
-    {% comment %} Load the correct Bootstrap CSS file for RTL/LTR {% endcomment %}
-    {% if LANGUAGE_CODE == 'ar' %}
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
-    {% else %}
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    {% endif %}
-
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <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/main.css' %}">
 
-
     {% block customCSS %}{% endblock %}
 </head>
 <body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
@@ -27,219 +21,218 @@
     <div class="top-bar d-none d-md-block">
         <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">
+                </div>
+                <div class="contact-info d-flex gap-3">
+                </div>
                 <div class="logo-container d-flex gap-2">
-                </div>
-                <div class="clogo-container d-flex gap-2">
-                </div>
-                <div class="logo-container d-flex gap-2 align-items-center">
-                    <img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy" style="height: 35px; object-fit: contain;">
-                    
-                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 me-0">
-                        <div class="hospital-text text-center text-md-start me-0">
-                            <div class="ar text-xs">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
-                            <div class="ar text-xs">ومستشفى الملك عبدالله بن عبدالرحمن التخصصي</div>
-                            <div class="en text-xs">Princess Nourah bint Abdulrahman University</div>
-                            <div class="en text-xs">King Abdullah bin Abdulaziz University Hospital</div>
+                    <img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy">
+                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 ms-4">
+                        <div class="hospital-text text-center text-md-start me-3">
+                            <div class="ar small">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
+                            <div class="ar small">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
+                            <div class="en small">Princess Nourah bint Abdulrahman University</div>
+                            <div class="en small">King Abdullah bin Abdulaziz University Hospital</div>
                         </div>
+
                     </div>
-                     <img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 40px; max-width: 40px;">
+                     <img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 100px;max-width:100px;">
                 </div>
             </div>
         </div>
     </div>
 
     <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
-        <div class="container-fluid max-width-1600">
-            
-            {# --- MOBILE BRAND LOGIC: Show small logo on mobile, large on desktop (lg) --- #}
-            <a class="navbar-brand text-white d-block d-lg-none" href="{% url 'dashboard' %}" aria-label="Home">
-                <img src="{% static 'image/kaauh_green1.png' %}"  alt="{% trans 'kaauh logo green bg' %}" class="navbar-brand-mobile">
-            </a>
-            
-            <a class="navbar-brand text-white d-none d-lg-block" href="{% url 'dashboard' %}" aria-label="Home">
-                <img src="{% static 'image/kaauh_green1.png' %}"  alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
-            </a>
+        <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' %}">
+                    <img src="{% static 'image/kaauh_green1.png' %}"  alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
+                </a>
 
-            {# Toggler: order-lg-0 ensures it's before navigation links on desktop, but it stays where it is on mobile #}
-            <button class="navbar-toggler order-lg-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            
-            {# Language and Profile Controls (Keep outside collapse for mobile access) #}
-            <div class="d-flex align-items-center order-lg-3">
-                <ul class="navbar-nav flex-row">
-                    <li class="nav-item dropdown">
-                        <a class="language-toggle-btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
-                        data-bs-offset="0, 8" aria-expanded="false" aria-label="{% trans 'Toggle language menu' %}">
-                            <i class="fas fa-globe"></i>
-                            <span class="d-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
-                        </a>
-                        <ul class="dropdown-menu {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-start{% else %}dropdown-menu-end{% endif %}" data-bs-popper="static">
-                            <li>
-                                <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-                                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
-                                    <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
-                                        <span class="me-2">🇺🇸</span> English
-                                    </button>
-                                </form>
-                            </li>
-                            <li>
-                                <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-                                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
-                                    <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
-                                        <span class="me-2">🇸🇦</span> العربية (Arabic)
-                                    </button>
-                                </form>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
 
-                <ul class="navbar-nav ms-2 ms-lg-4">
-                    <li class="nav-item dropdown">
-                        <button
-                            class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
-                            type="button"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false"
-                            aria-label="{% trans 'Toggle user menu' %}"
-                            data-bs-auto-close="outside"
-                            data-bs-offset="0, 16" {# Vertical offset remains 16px to prevent clipping #}
-                        >
-                            {% if user.profile.profile_image %}
-                                <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
-                                    style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
-                                    title="{% trans 'Your account' %}">
-                            {% else %}
-                                <div class="profile-avatar" title="{% trans 'Your account' %}">
-                                    {{ user.username|first|upper }}
-                                </div>
-                            {% endif %}
-                        </button>
-                        <ul
-                            {# FINAL FIX: Always use dropdown-menu-end. In LTR (English), this aligns right. In RTL (Arabic), this aligns left. #}
-                            class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
-                            style="min-width: 240px;"
-                        >
-                            <li class="px-4 py-3 ">
-                                <div class="d-flex align-items-center">
-                                    <div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
-                                        {% if user.profile.profile_image %}
-                                            <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
-                                                style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
-                                                title="{% trans 'Your account' %}">
-                                        {% else %}
-                                            <div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
-                                                style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
-                                                {{ user.username|first|upper }}
-                                            </div>
-                                        {% endif %}
-                                    </div>
-                                    <div>
-                                        <div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
-                                        <div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
-                                    </div>
-                                </div>
-                            </li>
-                            <li><hr class="dropdown-divider my-1"></li>
-                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
-                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
-                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
-                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
-                            
-                            {% comment %} CORRECTED LINKEDIN BLOCK {% endcomment %}
-                            {% if not request.session.linkedin_authenticated %}
-                                <li>
-                                    <a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'linkedin_login' %}">
-                                        <i class="fab fa-linkedin me-3 text-primary fs-5"></i>
-                                        <span>{% trans "Connect LinkedIn" %}</span>
-                                    </a>
-                                </li>
-                            {% else %}
-                                <li class="px-4 py-2 text-muted small">
-                                    <i class="fab fa-linkedin text-primary me-2"></i>
-                                    {% trans "LinkedIn Connected" %}
-                                </li>
-                            {% endif %}
-                            
-                            <li><hr class="dropdown-divider my-1"></li>
-                            <li>
-                                <form method="post" action="{% url 'account_logout'%}" class="d-inline">
-                                    {% csrf_token %}
-                                    <button
-                                        type="submit"
-                                        class="dropdown-item py-2 px-4 text-danger d-flex align-items-center border-0 bg-transparent text-start"
-                                        aria-label="{% trans 'Sign out' %}"
-                                    >
-                                        <i class="fas fa-sign-out-alt me-3 fs-5"></i>
-                                        <span>{% trans "Sign Out" %}</span>
-                                    </button>
-                                </form>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
-            {# End Language and Profile Controls #}
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <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">
+                                    {% include "icons/jobs.html" %}
+                                    {% trans "Jobs" %}
+                                </span>
+                            </a>
+                        </li>
 
-            {# Main Navigation Links (This collapses on mobile) - order-lg-1 ensures it is centered on desktop #}
-            <div class="collapse navbar-collapse order-lg-1" id="navbarNav">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    {# Changed me-4 to me-lg-4 so they stack tightly on mobile #}
-                    <li class="nav-item me-lg-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">
-                                {% include "icons/jobs.html" %}
-                                {% trans "Jobs" %}
-                            </span>
-                        </a>
-                    </li>
-                    <li class="nav-item me-lg-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">
-                                {% include "icons/users.html" %}
-                                {% trans "Applicants" %}
-                            </span>
-                        </a>
-                    </li>
-                    <li class="nav-item me-lg-4">
-                        <a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
-                            <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="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-lg-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">
+                        <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">
+                                    {% include "icons/users.html" %}
+                                    {% trans "Applicants" %}
+                                </span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item me-4">
+                            <a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
+                                <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="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
-                            </svg>
-                                {% trans "Training" %}
-                            </span>
-                        </a>
-                    </li>
-                    <li class="nav-item dropdown ms-lg-2">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
-                        data-bs-offset="0, 8" data-bs-auto-close="outside">
-                            {% trans "More" %}
-                        </a>
-                        <ul class="dropdown-menu" data-bs-popper="static">
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
-                        </ul>
-                    </li>
+                                <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">
+                                    <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="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
+                                </svg>
+
+                                    {% trans "Training" %}
+                                </span>
+                            </a>
+                        </li>
+
+                        <li class="nav-item dropdown ms-2">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                            data-bs-offset="0, 8" data-bs-auto-close="outside">
+                                {% trans "More" %}
+                            </a>
+                            <ul class="dropdown-menu" data-bs-popper="static">
+                                <li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
+                                <li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
+                                <li><hr class="dropdown-divider"></li>
+                                <li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
+                                <li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
+                                <li><hr class="dropdown-divider"></li>
+                                <li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
+                                <li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
+                            </ul>
+                        </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"
+                            data-bs-offset="0, 8" aria-expanded="false" aria-label="{% trans 'Toggle language menu' %}">
+                                <i class="fas fa-globe"></i>
+                                <span class="d-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+
+                                {% get_current_language as LANGUAGE_CODE %}
+
+                                <li>
+                                    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+                                        <input name="next" type="hidden" value="{{ request.get_full_path }}">
+                                        <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
+                                            <span class="me-2">🇺🇸</span> English
+                                        </button>
+                                    </form>
+                                </li>
+
+                                <li>
+                                    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
+                                        <input name="next" type="hidden" value="{{ request.get_full_path }}">
+                                        <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
+                                            <span class="me-2">🇸🇦</span> العربية (Arabic)
+                                        </button>
+                                    </form>
+                                </li>
+                            </ul>
+                        </li>
                 </ul>
+
+                    <ul class="navbar-nav ms-4">
+                        <li class="nav-item dropdown">
+                            <button
+                                class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
+                                type="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                                aria-label="{% trans 'Toggle user menu' %}"
+                                data-bs-auto-close="outside"
+                                data-bs-offset="0, 8"
+                            >
+                                {% if user.profile.profile_image %}
+                                    <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
+                                        style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
+                                        title="{% trans 'Your account' %}">
+                                {% else %}
+                                    <div class="profile-avatar" title="{% trans 'Your account' %}">
+                                        {{ user.username|first|upper }}
+                                    </div>
+                                {% endif %}
+                            </button>
+                            <ul
+                                class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
+                                data-bs-popper="static"
+                                style="min-width: 240px;"
+                            >
+                                <li class="px-4 py-3 ">
+                                    <div class="d-flex align-items-center">
+                                        <div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
+                                            {% if user.profile.profile_image %}
+                                                <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
+                                                    style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
+                                                    title="{% trans 'Your account' %}">
+                                            {% else %}
+                                                <div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
+                                                    style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
+                                                    {{ user.username|first|upper }}
+                                                </div>
+                                            {% endif %}
+                                        </div>
+                                        <div>
+                                            <div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
+                                            <div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li><hr class="dropdown-divider my-1"></li>
+                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
+                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
+                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
+                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
+                                <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#">
+                                {% if not request.session.linkedin_authenticated %}
+                                    <ul class="navbar-nav ms-auto">
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="{% url 'linkedin_login' %}">
+                                                <i class="fab fa-linkedin me-1"></i> {% trans "Connect LinkedIn" %}
+                                            </a>
+                                        </li>
+                                    </ul>
+                                {% else %}
+                                    <i class="fab fa-linkedin text-primary me-1"></i>
+                                    <span class="text-primary d-none d-lg-inline ms-auto me-3">
+                                        {% trans "LinkedIn Connected" %}
+                                    </span>
+                                {% endif %}
+                                </a></li>
+
+                                <li><hr class="dropdown-divider my-1"></li>
+                                <li>
+                                    <form method="post" action="{% url 'account_logout'%}" class="d-inline">
+                                        {% csrf_token %}
+                                        <button
+                                            type="submit"
+                                            class="dropdown-item py-2 px-4 text-danger d-flex align-items-center border-0 bg-transparent text-start"
+                                            aria-label="{% trans 'Sign out' %}"
+                                        >
+                                            <i class="fas fa-sign-out-alt me-3 fs-5"></i>
+                                            <span>{% trans "Sign Out" %}</span>
+                                        </button>
+                                    </form>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
             </div>
         </div>
     </nav>
@@ -279,24 +272,43 @@
     {% include 'includes/delete_modal.html' %}
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.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) {
-                // Select all links, including those inside the "More" dropdown
-                const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle), .dropdown-item');
+                const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle)');
                 const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse, { toggle: false });
 
                 navLinks.forEach(link => {
                     link.addEventListener('click', () => {
                         // Only collapse if the nav is actually shown (i.e., on mobile)
                         if (navbarCollapse.classList.contains('show')) {
-                            // Check if the click was on a non-dropdown-toggle or a dropdown item (which navigate away)
-                            if (!link.classList.contains('dropdown-toggle')) {
-                                bsCollapse.hide();
-                            }
+                            bsCollapse.hide();
                         }
                     });
                 });
@@ -306,15 +318,34 @@
             const logoutButton = document.querySelector('form[action$="/logout/"] button');
             if (logoutButton) {
                 logoutButton.addEventListener('click', (e) => {
-                    // Check if screen is small (Bootstrap 'lg' breakpoint is 992px)
-                    if (window.innerWidth < 992) {
+                    // Check if screen is small (e.g., Bootstrap large breakpoint is 992px)
+                    if (window.innerWidth <= 992) {
                         const confirmed = confirm('{% trans "Are you sure you want to sign out?" %}');
                         if (!confirmed) e.preventDefault();
                     }
                 });
             }
+
+             // Handle language form submission: Manually trigger click on button inside form
+            document.querySelectorAll('.language-toggle-btn').forEach(toggle => {
+                const menu = toggle.nextElementSibling;
+                if (menu) {
+                    menu.querySelectorAll('.dropdown-item').forEach(item => {
+                        item.addEventListener('click', (e) => {
+                            // Find the containing form and submit it
+                            const form = item.closest('form');
+                            if (form) {
+                                form.submit();
+                            }
+                        });
+                    });
+                }
+            });
         });
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
+    {% comment %} <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.5/bundles/datastar.js"></script> {% endcomment %}
+
     {% block customJS %}{% endblock %}
 
 </body>

templates/forms/form_wizard.html

@@ -1,6 +1,40 @@
-{% extends 'forms/partials/candidate_facing_base.html'%}
 {% load static i18n %}
-{% block content %}
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{% translate "Application Form" %}</title>
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+        />
+        <style>
+            /* KAAT-S Theme Variables */
+            :root {
+                --kaauh-teal: #00636e; /* Main Primary Color */
+                --kaauh-teal-dark: #004a53; /* Dark Primary Color */
+
+                /* Mapping wizard defaults to theme colors */
+                --primary: var(--kaauh-teal);
+                --primary-light: #007c89; /* Slightly lighter shade for subtle hover/border */
+                --secondary: var(--kaauh-teal-dark);
+                --success: #198754; /* Keeping a standard success green for Submit */
+                --error: #dc3545; /* Standard danger red */
+
+                --light: #f8f9fa;
+                --dark: #212529;
+                --gray: #6c757d;
+                --light-gray: #e9ecef;
+                --border: #dee2e6;
+                --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                --radius: 16px; /* Increased radius for a softer look */
+                --transition: all 0.3s ease;
+            }
             <style>
     /* KAAT-S Theme Variables */
     :root {
@@ -467,7 +501,57 @@
                 /* The z-index is already 1030 in the inline style, which is correct */
             }
         </style>
-  
+    </head>
+    <body>
+        <nav
+            id="topNavbar"
+            class="navbar navbar-expand-lg"
+            style="background-color: white; z-index: 1030"
+        >
+            <div class="container-fluid">
+                <a class="navbar-brand text-white fw-bold" href="/">
+                    <img
+                        src="{% static 'image/kaauh.jpeg' %}"
+                        alt="{% translate 'KAAUH IMAGE' %}"
+                        style="height: 50px; margin-right: 10px"
+                    />
+                </a>
+                <button
+                    class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarNav"
+                    aria-controls="navbarNav"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation"
+                >
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item">
+                            <a
+                                class="nav-link text-secondary"
+                                href="/applications/"
+                                >{% translate "Applications" %}</a
+                            >
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-secondary" href="/profile/"
+                                >{% translate "Profile" %}</a
+                            >
+                        </li>
+                        <li class="nav-item">
+                            <a
+                                class="nav-link text-secondary"
+                                href="https://kaauh.edu.sa/career"
+                                >{% translate "Careers" %}</a
+                            >
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
         <nav
             id="bottomNavbar"
             class="navbar navbar-expand-lg sticky-top"
@@ -532,7 +616,7 @@
                 </div>
             </div>
         </div>
-   
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
         <script>
                 // Application State
                 const csrfToken = '{{ csrf_token }}';
@@ -1260,4 +1344,5 @@
                 // Start the application
                 document.addEventListener('DOMContentLoaded', init);
         </script>
-{% endblock content %}
+    </body>
+</html>

templates/forms/job_detail_candidate.html

@@ -1,88 +0,0 @@
-{% extends 'forms/partials/candidate_facing_base.html'%}
-{% load static i18n %}
-{% block content %}
-    
-    <nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: var(--kaauh-teal); z-index: 1030;">
-        <div class="container-fluid">
-             <span class="navbar-text text-white fw-bold">{% trans "Job Overview" %}</span>
-        </div>
-    </nav>
-    
-    <div class="container">
-        <div class="row mb-5 mt-3 main-content-area">
-            
-            <div class="col-lg-4 order-lg-2 order-1 d-none d-lg-block">
-                <div class="card shadow-sm sticky-top"> 
-                    <div class="card-header bg-kaauh-teal-dark text-white">
-                        <h5 class="mb-0"><i class="fas fa-file-signature me-2"></i>{% trans "Ready to Apply?" %}</h5>
-                    </div>
-                    <div class="card-body text-center">
-                        <p class="text-muted">{% trans "Review the job details, then apply below." %}</p>
-                        
-                        {% if job.form_template %}
-                            <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
-                                <i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
-                            </a>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-8 order-lg-1 order-2">
-                <div class="card shadow-sm">
-                    <div class="card-header bg-kaauh-teal-dark text-white d-flex justify-content-between align-items-center">
-                        <h2 class="h3 mb-0 fw-bold">{{ job.title }}</h2>
-                    </div>
-
-                    <div class="card-body">
-                        
-                        <h4 class="mb-3" style="color: var(--kaauh-teal-dark);">{% trans "Job Overview" %}</h4>
-                        <div class="row row-cols-1 row-cols-md-2 g-3 mb-4 small text-secondary">
-                            {% if job.salary_range %}
-                            <div class="col">
-                                <i class="fas fa-money-bill-wave text-success me-2"></i>
-                                <strong>{% trans "Salary:" %}</strong> 
-                                <span class="fw-bold text-success">{{ job.salary_range }}</span>
-                            </div>
-                            {% endif %}
-                            
-                            <div class="col">
-                                <i class="fas fa-calendar-alt text-muted me-2"></i>
-                                <strong>{% trans "Deadline:" %}</strong> 
-                                {% if job.application_deadline %}
-                                    {{ job.application_deadline|date:"M d, Y" }}
-                                    {% if job.is_expired %}
-                                        <span class="badge bg-danger ms-2">{% trans "EXPIRED" %}</span>
-                                    {% endif %}
-                                {% else %}
-                                    <span class="text-muted">{% trans "Not specified" %}</span>
-                                {% endif %}
-                            </div>
-                            
-                            <div class="col"> <i class="fas fa-briefcase text-muted me-2"></i> <strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }} </div>
-                            <div class="col"> <i class="fas fa-map-marker-alt text-muted me-2"></i> <strong>{% trans "Location:" %}</strong> {{ job.get_location_display }} </div>
-                            <div class="col"> <i class="fas fa-building text-muted me-2"></i> <strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }} </div>
-                            <div class="col"> <i class="fas fa-hashtag text-muted me-2"></i> <strong>{% trans "JOB ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }} </div>
-                            <div class="col"> <i class="fas fa-desktop text-muted me-2"></i> <strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }} </div>
-                        </div>
-                        
-                        {% if job.has_description_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-info-circle me-2"></i>{% trans "Job Description" %}</h5><div class="text-secondary">{{ job.description|safe }}</div></div>{% endif %}
-                        {% if job.has_qualifications_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-graduation-cap me-2"></i>{% trans "Qualifications" %}</h5><div class="text-secondary">{{ job.qualifications|safe }}</div></div>{% endif %}
-                        {% if job.has_benefits_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-hand-holding-usd me-2"></i>{% trans "Benefits" %}</h5><div class="text-secondary">{{ job.benefits|safe }}</div></div>{% endif %}
-                        {% if job.has_application_instructions_content %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-file-alt me-2"></i>{% trans "Application Instructions" %}</h5><div class="text-secondary">{{ job.application_instructions|safe }}</div></div>{% endif %}
-                      
-                        
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div> 
-
-    <div class="mobile-fixed-apply-bar d-lg-none"> 
-        {% if job.form_template %}
-        <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
-            <i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
-        </a>
-        {% endif %}
-    </div>
-{% endblock content%}

templates/forms/partials/candidate_facing_base.html

@@ -1,265 +0,0 @@
-{% load static i18n %}
-{% get_current_language as LANGUAGE_CODE %}
-{% get_available_languages as LANGUAGES %}
-{% get_language_info_list for LANGUAGES as language_info_list %}
-
-<!DOCTYPE html>
-<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% translate "Application Form" %}</title>
-    
-    {% comment %} Load the correct Bootstrap CSS file for RTL/LTR {% endcomment %}
-    {% if LANGUAGE_CODE == 'ar' %}
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
-    {% else %}
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    {% endif %}
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-    /* ---------------------------------------------------------------------- */
-    /* THEME & UTILITY VARIABLES */
-    /* ---------------------------------------------------------------------- */
-    :root {
-        --kaauh-teal: #00636e;
-        --kaauh-teal-dark: #004a53;
-        --success: #198754;
-        --danger: #dc3545;
-        --light-bg: #f8f9fa; 
-        --gray-text: #6c757d;
-        --kaauh-border: #eaeff3; /* Added for dropdown styling */
-        
-        /* CALCULATED STICKY HEIGHTS */
-        --navbar-height: 56px; 
-        --navbar-gap: 16px; 
-        --sticky-navbar-total-height: 128px;
-    }
-
-    body {
-        min-height: 100vh;
-        background-color: #f0f0f5; /* Light gray background for contrast */
-        padding-top: 0;
-    }
-    
-    .btn-main-action {
-        background-color: var(--kaauh-teal);
-        color: white;
-        border: none;
-        transition: background-color 0.3s ease, transform 0.2s ease;
-        box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
-    }
-
-    .btn-main-action:hover {
-        background-color: var(--kaauh-teal-dark);
-        color: white;
-        transform: translateY(-1px);
-    }
-
-    .bg-kaauh-teal-dark {
-        background-color: var(--kaauh-teal-dark) !important;
-    }
-    
-    /* ---------------------------------------------------------------------- */
-    /* LANGUAGE TOGGLE STYLES (COPIED FROM MAIN LAYOUT) */
-    /* ---------------------------------------------------------------------- */
-    .language-toggle-btn {
-        color: var(--gray-text) !important; /* Use secondary color */
-        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: var(--light-bg) !important;
-        border-radius: 4px;
-        color: var(--kaauh-teal) !important;
-    }
-
-    /* Dropdown Menu styling for language */
-    .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: 150px;
-    }
-    .dropdown-item {
-        padding: 0.5rem 1.25rem;
-        transition: background-color 0.15s;
-        text-align: inherit; /* Ensure text alignment is controlled by dir="rtl" */
-    }
-
-    /* Use button as dropdown-item inside form for full click area */
-    .dropdown-item[type="submit"] {
-        width: 100%;
-        text-align: inherit;
-        border: none;
-    }
-
-    /* ---------------------------------------------------------------------- */
-    /* LAYOUT & STICKY POSITIONING FIXES (Desktop/Tablet) */
-    /* ---------------------------------------------------------------------- */
-
-    #topNavbar {
-        z-index: 1040; /* Higher than the bottom bar */
-    }
-    
-    /* 1. Position the dark navbar below the white navbar + gap */
-    #bottomNavbar {
-        /* 56px (white nav) + 16px (mb-3) = 72px */
-        top: calc(var(--navbar-height) + var(--navbar-gap)); 
-        z-index: 1030;
-    }
-
-    /* 2. Pushes the main content down so it's not hidden under the navbars */
-    .main-content-area {
-        /* Total Sticky Height (128px) + Extra Margin (12px) = 140px */
-        margin-top: calc(var(--sticky-navbar-total-height) + 12px); 
-    }
-
-    /* 3. Positions the sticky sidebar correctly */
-    .card.sticky-top {
-        /* Start scrolling the sidebar just below the two navbars + a small gap */
-        top: calc(var(--sticky-navbar-total-height) + 15px);
-    }
-
-    /* ---------------------------------------------------------------------- */
-    /* RTL / ARABIC SUPPORT - Optimized */
-    /* ---------------------------------------------------------------------- */
-    html[dir="rtl"] {
-        text-align: right;
-    }
-    
-    /* Flip Margin Utilities (m-end and m-start) */
-    html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
-    html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
-    html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
-    html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
-    html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } /* For the globe icon */
-    
-    /* Flip alignment for text-end/text-start */
-    html[dir="rtl"] .text-end { text-align: left !important; }
-    html[dir="rtl"] .text-start { text-align: right !important; }
-
-    /* ---------------------------------------------------------------------- */
-    /* MOBILE RESPONSIVE STYLES (Below 992px) */
-    /* ---------------------------------------------------------------------- */
-    @media (max-width: 991.98px) {
-        
-        /* Ensures dropdown items in mobile menu align correctly */
-        html[dir="rtl"] .navbar-collapse .dropdown-menu {
-            text-align: right;
-            left: auto;
-            right: 0;
-        }
-
-        /* On mobile, the top navbar is generally only 56px tall when collapsed. */
-        #bottomNavbar {
-            top: calc(var(--navbar-height) + var(--navbar-gap));
-        }
-        
-        .main-content-area {
-            /* Reduced margin-top for smaller screens */
-            margin-top: calc(var(--sticky-navbar-total-height) / 2); 
-        }
-        
-        /* Mobile Fixed Footer Bar for Application */
-        .mobile-fixed-apply-bar {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-            padding: 15px;
-            background-color: var(--light-bg);
-            border-top: 1px solid #ddd;
-            z-index: 1000;
-            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
-        }
-
-        /* Add padding to the bottom of the body content to prevent it from hiding under the fixed bar */
-        body {
-            padding-bottom: 90px;
-        }
-
-        /* Fix job overview grid responsiveness (ensures 1 column) */
-        .row-cols-md-2 > .col {
-            flex: 0 0 100%;
-            max-width: 100%;
-        }
-    }
-</style>
-</head>
-<body>
-   
-    <nav id="topNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: white; z-index: 1040;">
-    <div class="container-fluid">
-        <a class="navbar-brand text-white fw-bold" href="{% url 'kaauh_career' %}">
-            <img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
-        </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ms-auto">
-               
-                <li class="nav-item">
-                    <a class="nav-link text-secondary" href="/applications/">{% translate "Applications" %}</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-secondary" href="/profile/">{% translate "Profile" %}</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-secondary" href="{% url 'kaauh_career' %}">{% translate "Careers" %}</a>
-                </li>
-
-                <li class="nav-item dropdown">
-                    <button class="language-toggle-btn dropdown-toggle" type="button" 
-                        data-bs-toggle="dropdown" data-bs-offset="0, 8" aria-expanded="false" 
-                        aria-label="{% trans 'Toggle language menu' %}">
-                        <i class="fas fa-globe"></i>
-                        <span class="d-inline">{{ LANGUAGE_CODE|upper }}</span>
-                    </button>
-                    
-                    <ul class="dropdown-menu {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-start{% else %}dropdown-menu-end{% endif %}" aria-labelledby="navbarLanguageDropdown">
-                        
-                        {% comment %} English Button {% endcomment %}
-                        <li>
-                            <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-                                <input name="next" type="hidden" value="{{ request.get_full_path }}">
-                                <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
-                                    <span class="me-2">🇺🇸</span> English
-                                </button>
-                            </form>
-                        </li>
-
-                        {% comment %} Arabic Button {% endcomment %}
-                        <li>
-                            <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-                                <input name="next" type="hidden" value="{{ request.get_full_path }}">
-                                <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
-                                    <span class="me-2">🇸🇦</span> العربية (Arabic)
-                                </button>
-                            </form>
-                        </li>
-                    </ul>
-                </li>
-                </ul>
-        </div>
-    </div>
-</nav>
-  {% block content %}
-
-  {% endblock content %}
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-</body>
-</html>

templates/includes/language_options.html

@@ -1,18 +0,0 @@
-{% load i18n %}
-
-<li>
-    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-        <input name="next" type="hidden" value="{{ next_url }}">
-        <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
-            <span class="me-2">🇺🇸</span> English
-        </button>
-    </form>
-</li>
-<li>
-    <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
-        <input name="next" type="hidden" value="{{ next_url }}">
-        <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
-            <span class="me-2">🇸🇦</span> العربية
-        </button>
-    </form>
-</li>

templates/jobs/base_public.html

@@ -0,0 +1,628 @@
+{% load i18n static %}
+<!DOCTYPE html>
+<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{% trans 'Careers' %} - KAAUH{% endblock %}</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+    
+    <style>
+        :root {
+            --kaauh-teal: #00636e;
+            --kaauh-teal-dark: #004a53;
+            --kaauh-light-bg: #f9fbfd;
+            --kaauh-border: #eaeff3;
+            --kaauh-green-dark: #00363a;
+            --kaauh-nav-bg: #004a53;
+            --kaauh-dark-nav-active: #00363a;
+        }
+
+        body {
+            background-color: white;
+        }
+
+        .max-width-container {
+            max-width: 1600px;
+            margin-left: auto;
+            margin-right: auto;
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+        
+        /* === Header Top Info === */
+        .header-top-info {
+            background-color: white;
+            padding: 15px 0;
+            font-size: 0.95rem;
+            color: #333;
+            border-bottom: 1px solid #eee;
+        }
+
+        .header-top-info .section-divider {
+            border-inline-start: 1px solid #ddd;
+            height: 60px;
+            margin: 0 15px;
+        }
+
+        .header-top-info .follow-us-section {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            font-weight: 500;
+        }
+        .header-top-info .social-icon-circle {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background-color: var(--kaauh-teal);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            text-decoration: none;
+            transition: background-color 0.2s;
+        }
+        .header-top-info .social-icon-circle:hover {
+            background-color: var(--kaauh-teal-dark);
+        }
+
+        .header-top-info .contact-block {
+            display: flex;
+            align-items: center;
+            min-width: 200px;
+        }
+
+        .header-top-info .contact-icon-block {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            padding: 0 15px;
+            min-height: 60px;
+        }
+        .header-top-info .contact-icon {
+            font-size: 2rem;
+            color: var(--kaauh-teal);
+            margin-inline-end: 15px;
+        }
+        .header-top-info .contact-details {
+            display: flex;
+            flex-direction: column;
+            text-align: start;
+        }
+        .header-top-info .contact-details span:first-child {
+            font-weight: bold;
+            color: var(--kaauh-teal);
+        }
+        .header-top-info .contact-details span:last-child {
+            font-size: 0.85rem;
+            color: #555;
+        }
+
+        .header-top-info .logo-section {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .header-top-info .vision-logo-container {
+            border-inline-start: 1px solid #ddd;
+            padding-inline-start: 20px;
+            min-height: 60px;
+            display: flex;
+            align-items: center;
+        }
+        .header-top-info .vision-logo {
+            max-height: 50px;
+            width: auto;
+        }
+        .header-top-info .kaauh-logo-container {
+            display: flex;
+            align-items: center;
+            border-inline-start: 1px solid #ddd;
+            padding-inline-start: 20px;
+        }
+        .header-top-info .kaauh-logo-container img {
+            max-height: 80px;
+            width: auto;
+            margin-inline-end: 10px;
+        }
+        .header-top-info .hospital-text {
+            line-height: 1.2;
+            text-align: initial;
+        }
+        .header-top-info .hospital-text .ar {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: var(--kaauh-teal-dark);
+        }
+        .header-top-info .hospital-text .en {
+            font-size: 0.8rem;
+            color: #555;
+        }
+
+        /* === Main Navbar === */
+        .navbar-main {
+            background-color: var(--kaauh-nav-bg);
+            padding: 0;
+            min-height: 60px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .navbar-main .nav-link {
+            color: white !important;
+            font-weight: 500;
+            font-size: 0.95rem;
+            padding: 1.1rem 1.2rem;
+            transition: background-color 0.2s;
+            border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
+            line-height: 1;
+        }
+        .navbar-main .nav-link:hover,
+        .navbar-main .nav-link.active {
+            background-color: var(--kaauh-dark-nav-active);
+            border-inline-end: 1px solid var(--kaauh-dark-nav-active);
+        }
+        .navbar-main .nav-icons-group {
+            display: flex;
+            align-items: center;
+            background-color: var(--kaauh-dark-nav-active);
+            height: 100%;
+            min-height: 60px;
+        }
+        .navbar-main .nav-icon {
+            color: white;
+            padding: 0 15px;
+            font-size: 1.5rem;
+            cursor: pointer;
+            text-decoration: none;
+            transition: opacity 0.2s;
+        }
+        .navbar-main .nav-icon:hover {
+            opacity: 0.8;
+        }
+        .navbar-main .profile-icon {
+            font-size: 1.8rem;
+        }
+        .navbar-main .lang-switch {
+            font-size: 1.2rem;
+            font-weight: bold;
+            text-transform: uppercase;
+            line-height: 1;
+        }
+        .navbar-main .dropdown-menu {
+            border-radius: 0;
+            margin-top: 0;
+            border: none;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+        }
+        .navbar-main .dropdown-item:hover {
+            background-color: var(--kaauh-light-bg);
+            color: var(--kaauh-teal-dark);
+        }
+        .navbar-toggler {
+            border: none;
+            padding: 0;
+        }
+        .navbar-toggler:focus {
+            box-shadow: none;
+        }
+        .navbar-toggler-icon {
+            filter: invert(1);
+        }
+        .navbar-main .collapse {
+            justify-content: flex-start !important;
+        }
+
+        /* === Footer === */
+        .footer-main {
+            background-color: var(--kaauh-green-dark);
+            color: white;
+            padding-top: 3rem;
+        }
+        .footer-main a {
+            color: white;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .footer-main a:hover {
+            color: var(--kaauh-teal);
+        }
+        .footer-main h5 {
+            color: var(--kaauh-teal);
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+        }
+        .footer-main .social-icons a {
+            font-size: 1.5rem;
+            margin-inline-end: 15px;
+        }
+        .footer-main .contact-info,
+        .footer-main .app-download {
+            font-size: 0.95rem;
+        }
+        .footer-bottom {
+            background-color: #00282b;
+            padding: 1rem 0;
+            font-size: 0.85rem;
+            color: rgba(255, 255, 255, 0.7);
+        }
+        .footer-bottom strong {
+            color: white;
+        }
+        .footer-main .col-lg-3, .footer-main .col-lg-5 {
+            padding-bottom: 2rem;
+        }
+        .footer-main .vision-logo {
+            max-width: 100px;
+        }
+        .footer-main .app-store-badge,
+        .footer-main .play-store-badge {
+            max-width: 150px;
+            height: auto;
+            margin-top: 10px;
+        }
+
+        /* === Hero Section === */
+        .hero-section {
+            height: 50vh;
+            background: url('{% static "image/hospital-bg.jpg" %}') no-repeat center center;
+            background-size: cover;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            text-align: center;
+        }
+        .hero-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.45);
+        }
+        .hero-content {
+            z-index: 10;
+        }
+        .hero-content h1 {
+            font-size: 3rem;
+            font-weight: 700;
+        }
+        .breadcrumb-section {
+            padding: 10px 0;
+            background-color: #f1f1f1;
+            font-size: 0.9rem;
+        }
+        .breadcrumb-item a {
+            color: #6c757d;
+        }
+        .breadcrumb-item.active {
+            font-weight: 600;
+            color: var(--kaauh-teal-dark);
+        }
+
+        /* === RTL Adjustments === */
+        html[dir="rtl"] {
+            text-align: right;
+            direction: rtl;
+        }
+        html[dir="rtl"] .max-width-container {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+        html[dir="rtl"] .header-top-info .section-divider {
+            border-inline-start: none;
+            border-inline-end: 1px solid #ddd;
+        }
+        html[dir="rtl"] .header-top-info .contact-icon {
+            margin-inline-end: 0;
+            margin-inline-start: 15px;
+        }
+        html[dir="rtl"] .header-top-info .contact-details {
+            text-align: right;
+        }
+        html[dir="rtl"] .header-top-info .vision-logo-container {
+            border-inline-start: none;
+            border-inline-end: 1px solid #ddd;
+            padding-inline-start: 0;
+            padding-inline-end: 20px;
+        }
+        html[dir="rtl"] .header-top-info .kaauh-logo-container {
+            border-inline-start: none;
+            border-inline-end: 1px solid #ddd;
+            padding-inline-start: 0;
+            padding-inline-end: 20px;
+        }
+        html[dir="rtl"] .header-top-info .kaauh-logo-container img {
+            margin-inline-end: 0;
+            margin-inline-start: 10px;
+        }
+        html[dir="rtl"] .header-top-info .hospital-text {
+            text-align: right;
+        }
+        html[dir="rtl"] .navbar-main .nav-link {
+            border-inline-end: none;
+            border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        html[dir="rtl"] .navbar-main .nav-link:hover,
+        html[dir="rtl"] .navbar-main .nav-link.active {
+            border-inline-start: 1px solid var(--kaauh-dark-nav-active);
+        }
+        html[dir="rtl"] .nav-icons i {
+            margin-inline-start: 10px;
+            margin-inline-end: 0;
+        }
+        html[dir="rtl"] .top-bar .social-icons a {
+            margin-inline-start: 0;
+            margin-inline-end: 10px;
+        }
+        html[dir="rtl"] .footer-main .social-icons a {
+            margin-inline-start: 15px;
+            margin-inline-end: 0;
+        }
+
+        /* === Responsive Adjustments for Small Screens === */
+        @media (max-width: 991.98px) {
+            .header-top-info .max-width-container {
+                flex-direction: column !important;
+                align-items: flex-start !important;
+                gap: 15px;
+            }
+
+            .header-top-info .follow-us-section,
+            .header-top-info .d-flex.align-items-center.flex-grow-1.justify-content-end {
+                width: 100%;
+                justify-content: space-between !important;
+            }
+
+            .header-top-info .contact-block,
+            .header-top-info .logo-section {
+                flex-wrap: wrap;
+                gap: 10px;
+            }
+
+            .header-top-info .section-divider {
+                display: none;
+            }
+
+            .header-top-info .kaauh-logo-container img {
+                max-height: 60px;
+            }
+
+            .header-top-info .hospital-text .ar,
+            .header-top-info .hospital-text .en {
+                font-size: 0.9rem;
+            }
+
+            .header-top-info .contact-icon {
+                font-size: 1.5rem;
+            }
+
+            .header-top-info .contact-icon-block {
+                min-height: auto;
+                padding: 8px 0;
+            }
+        }
+
+        @media (max-width: 575.98px) {
+            .header-top-info .kaauh-logo-container,
+            .header-top-info .vision-logo-container {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+
+            .header-top-info .hospital-text {
+                text-align: center !important;
+            }
+
+            .header-top-info .kaauh-logo-container img {
+                max-height: 50px;
+            }
+
+            .header-top-info .follow-us-section span,
+            .header-top-info .contact-details span {
+                font-size: 0.85rem;
+            }
+
+            .header-top-info .social-icon-circle {
+                width: 26px;
+                height: 26px;
+                font-size: 0.85rem;
+            }
+
+            .hero-content h1 {
+                font-size: 2rem;
+            }
+        }
+    </style>
+    {% block customCSS %}{% endblock %}
+</head>
+<body class="d-flex flex-column min-vh-100">
+
+    <!-- Responsive Header Top Info -->
+    <div class="header-top-info">
+        <div class="max-width-container d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
+
+            <div class="follow-us-section d-flex flex-wrap align-items-center gap-2">
+                <span>{% trans "Follow Us On:" %}</span>
+                <div class="d-flex gap-2">
+                    <a href="#" class="social-icon-circle"><i class="fab fa-facebook-f"></i></a>
+                    <a href="#" class="social-icon-circle"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="social-icon-circle"><i class="fab fa-instagram"></i></a>
+                </div>
+            </div>
+
+            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3 w-100 w-md-auto">
+                <div class="d-flex flex-wrap justify-content-between gap-3">
+                    <div class="contact-icon-block d-flex align-items-center">
+                        <i class="fas fa-headset contact-icon"></i>
+                        <div class="contact-details ms-2">
+                            <span>24/7 {% trans "Online Support" %}</span>
+                            <span class="d-block d-md-inline">info@kaauh.edu.sa</span>
+                        </div>
+                    </div>
+
+                    <div class="contact-icon-block d-flex align-items-center">
+                        <i class="fas fa-phone-alt contact-icon"></i>
+                        <div class="contact-details ms-2">
+                            <span>{% trans "Contact Us Free" %}</span>
+                            <span class="d-block d-md-inline">+966118200000</span>
+                        </div>
+                    </div>
+                </div>
+
+               
+                <div class="logo-section d-flex flex-wrap align-items-center gap-3 mt-2 mt-md-0">
+                   
+                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2">
+                        <img src="{% static 'image/vision.svg' %}" alt="Vision 2030" class="vision-logo" style="min-height: 70px; min-width:300px;">
+                    </div>
+                </div>
+
+                <div class="logo-section d-flex flex-wrap align-items-center gap-3 mt-2 mt-md-0  ms-6">
+                    
+                    <div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 ms-4">
+                        <div class="hospital-text text-center text-md-start me-3">
+                            <div class="ar">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
+                            <div class="ar">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
+                            <div class="en">Princess Nourah bint Abdulrahman University</div>
+                            <div class="en">King Abdullah bin Abdulaziz University Hospital</div>
+                        </div>
+                        <img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 80px;min-width:80px;">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark navbar-main">
+        <div class="max-width-container d-flex justify-content-between align-items-stretch w-100">
+            <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#publicNavCollapse"
+                aria-controls="publicNavCollapse" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="publicNavCollapse">
+                <ul class="navbar-nav mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">{% trans "About KAAUH" %}</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            {% trans "Patients & Visitor" %}
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a class="dropdown-item" href="#">{% trans "Find a Doctor" %}</a></li>
+                            <li><a class="dropdown-item" href="#">{% trans "Visiting Hours" %}</a></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            {% trans "Training & Education" %}
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a class="dropdown-item" href="#">{% trans "Courses" %}</a></li>
+                            <li><a class="dropdown-item" href="#">{% trans "Residency" %}</a></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">{% trans "Gallery" %}</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">{% trans "Connect" %}</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <div class="nav-icons-group d-none d-lg-flex">
+                <a href="#" class="nav-icon profile-icon"><i class="fas fa-user-circle"></i></a>
+                <a href="#" class="nav-icon lang-switch">ع</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="flex-grow-1">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer-main mt-auto">
+        <div class="max-width-container">
+            <div class="row">
+                <div class="col-lg-3 col-md-6 app-download">
+                    <h5 class="text-white-50">{% trans "Download our mobile app" %}</h5>
+                    <p>{% trans "Get the latest updates and services on the go." %}</p>
+                    <div class="d-flex flex-column gap-2 mt-3">
+                        <a href="#"><img src="{% static 'image/google-play-badge.png' %}" alt="Google Play" class="play-store-badge"></a>
+                        <a href="#"><img src="{% static 'image/app-store-badge.png' %}" alt="App Store" class="app-store-badge"></a>
+                    </div>
+                </div>
+
+                <div class="col-lg-2 col-md-6">
+                    <h5>{% trans "Information" %}</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="#">{% trans "About the Hospital" %}</a></li>
+                        <li><a href="{% url 'kaauh_career' %}">{% trans "Careers" %}</a></li>
+                        <li><a href="#">{% trans "Today's Clinic Hours" %}</a></li>
+                        <li><a href="#">{% trans "Support Us" %}</a></li>
+                    </ul>
+                </div>
+
+                <div class="col-lg-3 col-md-6">
+                    <h5>{% trans "Need Help" %}</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="#">{% trans "Support and Services" %}</a></li>
+                        <li><a href="#">{% trans "Contact Us" %}</a></li>
+                        <li><a href="#">{% trans "FAQ" %}</a></li>
+                        <li><a href="#">{% trans "Sitemap" %}</a></li>
+                    </ul>
+                    <div class="contact-info mt-3">
+                        <i class="fas fa-phone-alt me-2 text-white-50"></i> <strong class="text-white">966118200000</strong><br>
+                        <i class="fas fa-envelope me-2 text-white-50"></i> <a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a>
+                    </div>
+                </div>
+
+                <div class="col-lg-4 col-md-6">
+                    <h5>{% trans "Contact & Address" %}</h5>
+                    <p>{% trans "KAAUH Campus, Riyadh, Saudi Arabia" %}</p>
+                    <p class="small text-white-50">{% trans "Postal Code 11564, King Fahd Road, Al-Rabi District." %}</p>
+
+                    <div class="d-flex align-items-center justify-content-start gap-3 mt-4">
+                        <img src="{% static 'image/vision.svg' %}" alt="Vision 2030" class="vision-logo">
+                        <div class="social-icons">
+                            <a href="#"><i class="fab fa-facebook-f"></i></a>
+                            <a href="#"><i class="fab fa-twitter"></i></a>
+                            <a href="#"><i class="fab fa-instagram"></i></a>
+                            <a href="#"><i class="fab fa-youtube"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="footer-bottom mt-5">
+            <div class="max-width-container d-flex justify-content-between align-items-center flex-wrap">
+                <p class="mb-0">
+                    &copy; {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %} 
+                    {% trans "All rights reserved." %}
+                </p>
+                <p class="mb-0">
+                    {% trans "Powered by" %} <strong class="text-white">Tenhal</strong>
+                </p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    {% block customJS %}{% endblock %}
+</body>
+</html>

templates/jobs/career.html

@@ -1,568 +1,154 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="author" content="KAAUH" />
-    <meta name="title" content="Regions no.1 University Hospital">
-    <meta name="description" content="King Abdullah bin Abdulaziz University Hospital is among the premier and esteemed institutions. KAAUH is the epitome of education in the healthcare sector." />
-    <meta name="keywords" content="Best hospital in Saudi Arabia,Healthcare providers near me,Top healthcare providers,Health care services in saudi arabia,Best hospital in saudi arabia,Healthcare system in saudi arabia" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>King Abdullah bin Abdulaziz University Hospital</title>
-    <link rel="apple-touch-icon" sizes="57x57" href="https://kaauh.edu.sa/assets/images/apple-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="https://kaauh.edu.sa/assets/images/apple-icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="https://kaauh.edu.sa/assets/images/apple-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="https://kaauh.edu.sa/assets/images/apple-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="https://kaauh.edu.sa/assets/images/apple-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="https://kaauh.edu.sa/assets/images/apple-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="https://kaauh.edu.sa/assets/images/apple-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="https://kaauh.edu.sa/assets/images/apple-icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="https://kaauh.edu.sa/assets/images/apple-icon-180x180.png" />
-    <link rel="icon" type="image/png" sizes="192x192" href="https://kaauh.edu.sa/assets/images/android-icon-192x192.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="https://kaauh.edu.sa/assets/images/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="https://kaauh.edu.sa/assets/images/favicon-96x96.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="https://kaauh.edu.sa/assets/images/favicon-16x16.png" />
-    <link rel="manifest" href="https://kaauh.edu.sa/assets/images/manifest.json" />
-    <link href="https://kaauh.edu.sa/assets/css/bootstrap.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="https://kaauh.edu.sa/assets/fonts/css/all.min.css" />
-    <link href="https://kaauh.edu.sa/assets/css/flaticon.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/menu.css" rel="stylesheet" />
-    <link id="effect" href="https://kaauh.edu.sa/assets/css/dropdown-effects/fade-down.css" media="all" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/magnific-popup.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/owl.carousel.min.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/owl.theme.default.min.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/animate.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/normalize.min.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/style.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/responsive.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/custom.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/sweetalert2.min.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/css/toastmin.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/css/select2min.css" rel="stylesheet" />
-    <link href="https://kaauh.edu.sa/assets/css/bootstrap-datepicker.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-    <style>
-        b{font-weight: bold;}
-        @font-face {font-family: Poppins-Regular;src: url("https://kaauh.edu.sa/assets/fonts/POPPINS-REGULAR.TTF");}
-        @font-face {font-family: Poppins-Extrabold;src: url("https://kaauh.edu.sa/assets/fonts/POPPINS-EXTRABOLD.TTF");}
-        @font-face {font-family: Rajdhani-Regular;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-REGULAR.TTF");}
-        @font-face {font-family: Rajdhani-Semibold;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-SEMIBOLD.TTF");}
-        @font-face {font-family: Rajdhani-Bold;src: url("https://kaauh.edu.sa/assets/fonts/RAJDHANI-BOLD.TTF");}
-        @font-face {font-family: Serti;src: url("https://kaauh.edu.sa/assets/fonts/SERTI.OTF");}
-        @font-face {font-family: Serti-bold;src: url("https://kaauh.edu.sa/assets/fonts/SERTIBOLD.OTF");}
-        .lang-area span {background: #fff;width: 38px;height: 38px;display: block;border-radius: 50%;font-size: 24px;font-weight: 600;padding: 0px 14px;}
-        body.yf_rtl .lang-area span {background: #fff;width: 38px;height: 38px;display: block;border-radius: 50%;font-size: 17px;font-weight: 600;padding:7px 9px;}
-        @media only screen and (max-width: 767px){/* body .lang-area {display : none !important} */}
-    </style>
-</head>
-<body class="" data-spy="scroll" data-target="#myScrollspy" data-offset="1" >
-    <div id="loader-wrapper">
-        <div id="loader">
-            <div class="loader-inner" style="background:url(https://kaauh.edu.sa/assets/images/loader-kaauh.png);background-size: contain; background-position: center !important;"></div>
-        </div>
-    </div>
-    <div id="page" class="page">
-        <header id="header-2" class="header">
-            <div class="wsmobileheader clearfix">
-                <a id="wsnavtoggle" class="wsanimated-arrow"><span></span></a>
-                <span class="smllogo"><a href="https://kaauh.edu.sa"><img src="https://kaauh.edu.sa/assets/images/logo.png" width="180" height="40" alt="mobile-logo"></a></span>
-                <div class="lang-area" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
-                    <a title="عربى" href="https://kaauh.edu.sa/changelanguage/ar"><span>ع</span></a>
-                </div>
-            </div>
-            <div class="hero-widget clearfix">
-                <div class="shape-img"><img src="https://kaauh.edu.sa/assets/images/hos.svg" alt=""></div>
-                <div class="container-fluid">
-                    <div class="row d-flex align-items-center">
-                        <div class="col-md-9 col-xl-9">
-                            <div class="row align-items-center">
-                                <div class="col-md-4">
-                                    <div class="header-widget icon-xs">
-                                        <div class="socials-links">
-                                            <h3>Follow us on :</h3>
-                                            <ul class="foo-socials text-center clearfix">
-                                                <li><a href="javascript:;" target="_blank" class="ico-facebook"><i class="fab fa-facebook-f"></i></a></li>
-                                                <li><a href="https://twitter.com/KAAUH_PNU?lang=ar" target="_blank" class="ico-twitter"><i class="fab fa-twitter"></i></a></li>
-                                                <li><a href="https://www.instagram.com/kaauh_pnu/" target="_blank" class="ico-insta"><i class="fab fa-instagram"></i></a></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="email-and-call">
-                                        <div class="header-widget icon-xs online_support">
-                                            <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/Customer-care.svg" alt="" /></span>
-                                            <div class="header-widget-txt">
-                                                <p>24x7 online Support</p>
-                                                <p class="header-widget-phone steelblue-color"><a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
-                                            </div>
-                                        </div>
-                                        <div class="header-widget icon-xs online_support call-support">
-                                            <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/call.svg" alt="" /></span>
-                                            <div class="header-widget-txt">
-                                                <p>Contact Us Free</p>
-                                                <p class="header-widget-phone steelblue-color"><a href="tel:+966118200000">+966118200000</a></p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-2">
-                                    <div class="lang-with-vision-logo">
-                                        <div class="saudi-log"><img src="https://kaauh.edu.sa/assets/images/vision.svg" alt=""></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-3 col-xl-3 logo-col">
-                            <div class="desktoplogo"><a href="https://kaauh.edu.sa"><img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" /></a></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="wsmainfull menu clearfix original" style="visibility: visible;">
-                <div class="container-fluid">
-                    <div class="wsmainwp clearfix">
-                        <nav class="wsmenu clearfix">
-                            <div class="overlapblackbg"></div>
-                            <ul class="wsmenu-list">
-                                <li class="fist"><a href="https://kaauh.edu.sa/about-us">About KAAUH</a></li>
-                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Patients &amp; Visitor<span class="wsarrow"></span></a>
-                                    <ul class="sub-menu">
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/registration-and-appointments">Registration &amp; Appointments</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/meet-your-doctor">Meet your doctor</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/eligibility">Eligibility</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/visiting-hours">Visiting hours</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-rights-and-responsibilities">Patient rights &amp; responsibilities</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-experience">Patient Experience</a></li>
-                                    </ul>
-                                </li>
-                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Training &amp; Education<span class="wsarrow"></span></a>
-                                    <ul class="sub-menu">
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/training-and-development">Training &amp; Development</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/student-training-office">Student Training Office</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/scholarship-and-postgraduate">Scholarship &amp; Postgraduate</a></li>
-                                    </ul>
-                                </li>
-                                <li><a href="{% url 'kaauh_career' %}">Careers</a></li>
-                                <li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
-                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Connect<span class="wsarrow"></span></a>
-                                    <ul class="sub-menu">
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
-                                    </ul>
-                                </li>
-                            </ul>
-                        </nav>
-                        <div class="lang-area d-none d-sm-none d-md-flex" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
-                            <a title="عربى" href='https://kaauh.edu.sa/changelanguage/ar'><span>ع</span></a>
-                        </div>
-                        
-                        <div class="serch-area appointment-are"><a href="javascript:;" data-toggle="modal" data-target="#appointment-check" data-placement="top" title="Our Appointment"><i class="fa fa-user"></i></a></div>
-                        </div>
-                </div>
-            </div>
-            <div class="wsmainfull menu clearfix cloned" style="position: fixed; top: 0px; margin-top: 0px; z-index: 500; left: 0px; width: 1519.2px; display: none;">
-                <div class="container-fluid">
-                    <div class="wsmainwp clearfix">
-                        <nav class="wsmenu clearfix">
-                            <div class="overlapblackbg"></div>
-                            <ul class="wsmenu-list">
-                                <li class="fist"><a href="https://web.archive.org/web/20240215180141/https://www.kaauh.edu.sa/about-us">About KAAUH</a></li>
-                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Patients &amp; Visitor<span class="wsarrow"></span></a>
-                                    <ul class="sub-menu">
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/registration-and-appointments">Registration &amp; Appointments</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/meet-your-doctor">Meet your doctor</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/eligibility">Eligibility</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/visiting-hours">Visiting hours</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-rights-and-responsibilities">Patient rights &amp; responsibilities</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/patients-visitor/patient-experience">Patient Experience</a></li>
-                                    </ul>
-                                </li>
-                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Training &amp; Education<span class="wsarrow"></span></a>
-                                    <ul class="sub-menu">
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/training-and-development">Training &amp; Development</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/student-training-office">Student Training Office</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/training-education/scholarship-and-postgraduate">Scholarship &amp; Postgraduate</a></li>
-                                    </ul>
-                                </li>
-                                <li><a href="{% url 'kaauh_career' %}">Careers</a></li>
-                                <li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
-                                <li aria-haspopup="true"><span class="wsmenu-click"><i class="wsmenu-arrow"></i></span><a href="javascript:;">Connect<span class="wsarrow"></span></a>
-                                    <ul class="sub-menu">
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
-                                        <li aria-haspopup="true"><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
-                                    </ul>
-                                </li>
-                            </ul>
-                        </nav>
-                        <div class="lang-area d-none d-sm-none d-md-flex" style="float: right;height: 60px;display: flex;justify-content: center;align-items: center">
-                            <a title="عربى" href='https://kaauh.edu.sa/changelanguage/ar'><span>ع</span></a>
-                        </div>
-                        <div class="serch-area"><a href="javascript:;" data-toggle="modal" data-target="#serch"><i class="fa fa-magnifying-glass"></i></a></div>
-                        <div class="serch-area appointment-are"><a href="javascript:;" data-toggle="modal" data-target="#appointment-check" data-placement="top" title="Our Appointment"><i class="fa fa-user"></i></a></div>
-                        </div>
-                </div>
-            </div>
-            </header>
-        <div class="breadcrumb-area dark-bg" style="background:url(https://kaauh.edu.sa/assets/images/career_page.jpg)">
-            <div class="container">
-                <ul class="page-list">
-                    <li class="item-home"><a class="bread-link" href="https://kaauh.edu.sa" title="Home">Home</a></li>
-                </ul>
-                <h1 class="breadcrumb-title">Careers</h1>
-            </div>
-        </div>
-        <div class="career_page_section">
-            <div class="container mb-5 mt-3">
-                <div class="card">
-                    {% load i18n %}
-<div class="table-responsive">
-    <table class="table table-stripped w-100" id="career_table">
-        <thead>
-            <tr>
-                <th class="col-job-id">{% trans 'Job ID#' %}</th>
-                <th class="col-job-title">{% trans 'Job Title' %}</th>
-                <th class="col-hiring"><i class="fa fa-user" style="color:#00636e"></i> {% trans 'Hiring' %}</th>
-                <th class="col-date d-none d-md-table-cell"><i class="fa fa-calendar" style="color:#00636e"></i> {% trans 'Posting Date' %}</th>
-                <th class="col-date d-none d-sm-table-cell"><i class="fa fa-calendar" style="color:#00636e"></i> {% trans 'Apply Before' %}</th>
-                <th class="col-link"><i class="fa fa-link" style="color:#00636e"></i> {% trans 'Link' %}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for job in active_jobs %}
-            <tr>
-                {# The columns below directly correspond to the headers above #}
-                
-                <td class="col-job-id" data-label="{% trans 'Job ID#' %}">{{ job.internal_job_id }}</td>
-                
-                <td class="col-job-title" data-label="{% trans 'Job Title' %}">{{ job.title }}</td>
-                
-                <td class="col-hiring" data-label="{% trans 'Hiring' %}">{{ job.open_positions }}</td>
-                
-                {# Hidden on small screens to prioritize space #}
-                <td class="col-date d-none d-md-table-cell" data-label="{% trans 'Posting Date' %}">{{ job.application_start_date }}</td>
-                
-                {# Hidden only on extra-small screens #}
-                <td class="col-date d-none d-sm-table-cell" data-label="{% trans 'Apply Before' %}">{{ job.application_deadline }}</td>
-                
-                <td class="col-link" data-label="{% trans 'Link' %}">
-                    <a style="background-color : #00636e;color : #FFF; padding : 4px 10px; white-space: nowrap;" 
-                       href="{% url 'job_detail_candidate' job.slug %}" 
-                       target="_blank">
-                       {% trans 'Apply' %}
-                    </a>
-                </td>
-            </tr>
-            {% endfor %}
-            
-        </tbody>
-    </table>
-</div>
-
+{% extends "jobs/base_public.html" %}
+{% load i18n static %}
 
+{% block customCSS %}
 <style>
-    /*
-     * Custom CSS for mobile stacking (displaying the table as a list) on screens <= 576px.
-     */
-    @media (max-width: 576px) {
-        .table thead {
-            display: none; /* Hide header row */
-        }
-        .table tr {
-            display: block;
-            margin-bottom: 1rem;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-        .table td {
-            display: block;
-            text-align: right;
-            padding-left: 50% !important;
-            position: relative;
-            border-top: none;
-            word-wrap: break-word;
-        }
-        .table td::before {
-            /* This is where the magic happens: it pulls the translated header text from the data-label attribute */
-            content: attr(data-label);
-            position: absolute;
-            left: 6px;
-            width: 45%;
-            padding-right: 10px;
-            white-space: nowrap;
-            text-align: left;
-            font-weight: bold;
-        }
-        
-        /* Ensure the link button is visible and positioned correctly */
-        .col-link a {
-            display: inline-block;
-            margin: 5px 0;
-        }
+    /* Custom style for the job list table */
+    .job-listing-section {
+        padding: 3rem 0;
+        background-color: white;
+    }
+    .job-table {
+        border-collapse: separate;
+        border-spacing: 0;
+        overflow: hidden;
+        border-radius: 8px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+        width: 100%;
+    }
+    .job-table thead th {
+        background-color: var(--kaauh-teal-dark);
+        color: white;
+        font-weight: 600;
+        padding: 1rem 1.5rem;
+        text-align: start;
+        border-bottom: 2px solid var(--kaauh-teal);
+    }
+    .job-table tbody td {
+        padding: 1rem 1.5rem;
+        vertical-align: middle;
+        border-bottom: 1px solid var(--kaauh-border);
+        font-size: 0.95rem;
+        font-weight: 500;
+        color: var(--kaauh-primary-text);
+    }
+    .job-table tbody tr:hover {
+        background-color: var(--kaauh-light-bg);
+    }
+    .job-link-cell {
+        font-size: 0.85rem;
+        text-align: center; /* Center the button in its cell */
+    }
+    .job-link-cell i {
+        color: var(--kaauh-teal);
+    }
+
+    /* Apply Button */
+    .btn-apply {
+        background-color: var(--kaauh-teal);
+        color: white;
+        font-weight: 600;
+        padding: 0.4rem 1.2rem;
+        border-radius: 5px;
+        transition: background-color 0.2s;
+        min-width: 80px;
+        display: inline-block;
+        text-align: center;
+        text-decoration: none;
+        border: 1px solid var(--kaauh-teal);
+    }
+    .btn-apply:hover {
+        background-color: var(--kaauh-teal-dark);
+        color: white;
+    }
+    .hero-section{
+        background-image: url("{% static 'image/kaauh_banner.png' %}");
+        background-size: cover;
+        background-position: center;
+    }
+
+    /* Hero Text Positioning */
+    .hero-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .arabic-title {
+        font-size: 4rem;
+        font-weight: 900;
+        line-height: 1;
+        margin-top: 0.5rem;
+    }
+
+    /* RTL specific table alignment */
+    html[dir="rtl"] .job-table thead th {
+        text-align: right;
+    }
+    html[dir="rtl"] .job-link-cell {
+        text-align: center; /* Ensure button remains centered in RTL */
     }
 </style>
+{% endblock %}
+
+{% block content %}
 
 
-                </div>
-            </div>
-        </div>
-        <footer id="footer-1" class="bg-image wide-40 footer division">
-            <div class="footer-center-logo"><a href="/"><img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" /></a></div>
-            <div class="container-fluid">
-                <div class="row">
-                    <div class="col-md-6 col-lg-3">
-                        <div class="footer-info mb-30">
-                            <div class="lang-with-vision-logo footer-lang"><img src="https://kaauh.edu.sa/assets/images/vision-f.svg" alt="footer-logo" width="180" height="40"></div>
-                            <h5 class="h5-xs mb-0">Address</h5>
-                            <p class="p-sm mt-10">Airport Road, King Khalid International Airport, Riyadh 11564, Saudi Arabia</p>
-                            <h5 class="h5-xs">Follow us on</h5>
-                            <div class="footer-socials-links mt-20">
-                                <ul class="foo-socials text-center clearfix">
-                                    <li><a href="javascript:;" target="_blank" class="ico-facebook"><i class="fa-brands fa-facebook-f"></i></a></li>
-                                    <li><a href="https://twitter.com/KAAUH_PNU?lang=ar" target="_blank" class="ico-twitter"><i class="fa-brands fa-twitter"></i></a></li>
-                                    <li><a href="https://www.instagram.com/kaauh_pnu/" target="_blank" class="ico-insta"><i class="fab fa-instagram"></i></a></li>
-                                    <li><a href="https://mail.kaauh.edu.sa/" target="_blank" class="ico-insta"><i class="fa fa-envelope"></i></a></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-6 col-lg-3">
-                        <div class="footer-box mb-30 need-help f-space">
-                            <h5 class="h5-xs">Need help</h5>
-                            <p class="sales-services">Sales &amp; Service Support</p>
-                            <a href="tel:+966118200000">+966118200000</a><br /><br />
-                            <p>Monday -Friday: 9:00-20:00<br />Saturday: 9:00-15:00</p>
-                            <p class="foo-email mt-20">Email: <a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
-                        </div>
-                    </div>
-                    <div class="col-md-6 col-lg-2">
-                        <div class="footer-box mb-30 info-links f-space">
-                            <h5 class="h5-xs">Information</h5>
-                            <ul>
-                                <li><a href="https://kaauh.edu.sa/about-us">About KAAUH</a></li>
-                                <li><a href="{% url 'kaauh_career' %}">Careers</a></li>
-                                <li><a href="https://kaauh.edu.sa/gallery">Gallery</a></li>
-                                <li><a href="https://kaauh.edu.sa/need-help">Need Help</a></li>
-                                <li><a href="https://kaauh.edu.sa/contact">Contact Us</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="col-md-6 col-lg-4">
-                        <div class="footer-box mb-30 apps-contact-info f-space">
-                            <h5 class="h5-xs">Download Our Mobile App</h5>
-                            <ul>
-                                <li><a href="https://apps.apple.com/us/app/kaauh-patient/id1502802835" target="_blank"><img src="https://kaauh.edu.sa/assets/images/app1.png" alt="" /></a></li>
-                                <li class="adroid"><a href="javascript:;"><img src="https://kaauh.edu.sa/assets/images/app2.png" alt="" /></a></li>
-                            </ul>
-                            <div class="email-and-call">
-                                <div class="header-widget icon-xs online_support">
-                                    <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/support-f.svg" alt="" /></span>
-                                    <div class="header-widget-txt">
-                                        <p>24x7 online Support</p>
-                                        <p class="header-widget-phone steelblue-color"><a href="mailto:info@kaauh.edu.sa">info@kaauh.edu.sa</a></p>
-                                    </div>
-                                </div>
-                                <div class="header-widget icon-xs online_support call-support">
-                                    <span class="icon-img"><img src="https://kaauh.edu.sa/assets/images/call-f.svg" alt="" /></span>
-                                    <div class="header-widget-txt">
-                                        <p>Contact Us Free</p>
-                                        <p class="header-widget-phone steelblue-color"><a href="tel:+966118200000">+966118200000</a></p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="ads_banner"><img src="https://kaauh.edu.sa/ads.jpg" alt=""></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bottom-footer">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <p class="footer-copyright">&copy; 2022 Kaauh. All Rights Reserved</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            </footer>
-        <div class="modal fade commom-popup" id="serch">
-            <div class="modal-dialog modal-lg center">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <div class="form-area">
-                            <div class="search-input">
-                                <div class="form-group">
-                                    <input type="text" name="" class="form-control" placeholder="Seaching......" required="" />
-                                    <button><i class="fa fa-magnifying-glass"></i></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="modal fade commom-popup" id="appointment-check">
-            <div class="modal-dialog modal-md center">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <div class="form-area">
-                            <div class="text-center"><img src="https://kaauh.edu.sa/assets/images/logo-2.png" alt="header-logo" width="15%"/></div>
-                            <h2 class="text-center">Login With Patient Mobile</h2>
-                            <div class="search-input">
-                                <div class="form-group" id="enterMobile">
-                                    <input type="text" id="mobile_numner" class="form-control" placeholder="Mobile number"/>
-                                    <button onclick="sendOtpToMobile()">Request OTP <i class="fa fa-location-arrow"></i></button>
-                                </div>
-                                <div class="form-group d-none" id="enterOTP">
-                                    <input type="text" id="mobile_otp" class="form-control" placeholder="Enter OTP" />
-                                    <button onclick="verifyMobileOtp()">Verify <i class="fa fa-location-arrow"></i></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="modal fade commom-popup" id="referal">
-            <div class="modal-dialog modal-xl">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h4 class="modal-title"><a href="javascript:;" data-dismiss="modal"><i class="fa fa-arrow-left"></i></a> Patient Referral</h4>
-                        <img src="https://kaauh.edu.sa/assets/images/logo.png" alt="header-logo" />
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    </div>
-                    <div class="modal-body">
-                        <div class="form-area">
-                            <div class="row">
-                                <div class="col-md-12">
-                                    <div class="form-holder">
-                                        <form name="contactForm" method="POST" action="https://kaauh.edu.sa/patient-referral-form" class="row contact-form">
-                                            <input type="hidden" name="_token" value="HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7">
-                                            <ul>
-                                                <li>Authorize healthcare providers to administer medical treatment, and/or perform diagnostic tests as may be deemed necessary or advisable in the diagnosis and treatment required.</li>
-                                                <li>I also agree:<div claa="space-l"><ul><li>(a) To have the patient transferred to another facility if medically needed. </li><li>(b) To vacate the room for medical isolation purposes or other treatment reasons.</li></ul></div></li>
-                                                <li>I am aware that the hospital provide a safe for keeping personal belongings (money, jewelry, glasses, mobile,phone, documents, others). Therefore, the hospital will not be responsible for the loss of any belongings ifnot placed in the safe.</li>
-                                                <li>I am aware that the hospital is an Academic Institution and it is likely that non-consultant physicians willparticipate in healthcare under the supervision of the Consultant.</li>
-                                                <li>I have received Patient & Family’s Bill of Rights booklet, and | was briefed on its contents by the assignedemployee upon Admission/Registration.</li>
-                                                <li>I understand that my discharge from the hospital is recommendedby my attending physician based on my medical condition. Therefore, | agree to leave the hospital on thedate of discharge.</li>
-                                            </ul>
-                                            <div class="col-lg-12">
-                                                <div class="form-check">
-                                                    <label class="form-check-label"><input required class="form-check-input" type="checkbox" id="check1">I have read and agree to all information mentioned above</label>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-12 mt-15 form-btn">
-                                                <button type="submit" class="btn btn-blue blue-hover submit">Submit new referral request</button>
-                                            </div>
-                                        </form>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="modal fade commom-popup" id="doctorLogin">
-            <div class="modal-dialog modal-md center">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <div class="form-area">
-                            <div class="search-input">
-                                <div class="text-center"><img src="https://kaauh.edu.sa/assets/images/logo-2.png" alt="header-logo" width="15%"/></div>
-                                <h2 class="text-center">Login With Doctor Email</h2>
-                                <form method="POST" action="https://kaauh.edu.sa/doctorLogin" class="user" autocomplete="off">
-                                    <input type="hidden" name="_token" value="HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7">
-                                    <div class="form-group">
-                                        <input type="text" name="email" class="form-control" placeholder="Email" >
-                                        <input type="password" name="password" class="form-control" placeholder="Password">
-                                        <button type="submit">Login <i class="fas fa-sign-in-alt"></i></button>
-                                    </div>
-                                </form>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="need_lelp_buttn">
-            <ul class="circle">
-                <li><a href="https://kaauh.edu.sa/need-help"><i class="fa fa-headphones"></i> </a> <span>Need Help</span></li>
-            </ul>
+    <div class="hero-section">
+        <div class="hero-overlay"></div>
+        <div class="hero-content">
+            <p class="text-uppercase small fw-bold mb-1">
+                {% trans "Home Page" %}
+            </p>
+            <h1 class="arabic-title">
+                {% if LANGUAGE_CODE == 'ar' %}التوظيف{% else %}Careers{% endif %}
+            </h1>
         </div>
     </div>
-    <script src="https://kaauh.edu.sa/assets/js/jquery-3.6.3.min.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/bootstrap.min.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/modernizr.custom.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/menu.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/sticky.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/materialize.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/owl.carousel.min.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/jquery.magnific-popup.min.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/imagesloaded.pkgd.min.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/wow.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/sweetalert2.min.js"></script>
-    <script src="https://kaauh.edu.sa/assets/js/bootstrap-datepicker.min.js"></script>
-    <script src="https://kaauh.edu.sa/js/toastmin.js"></script>
-    <script src="https://kaauh.edu.sa/js/select2min.js"></script>
-    <script>new WOW().init();</script>
-    <script></script>
-    <script>
-        var preloader = $('#loader-wrapper'),loader = preloader.find('.loader-inner');loader.fadeOut();preloader.delay(400).fadeOut('slow');
-        function sendOtpToMobile(){
-            let mobile_number = $('#mobile_numner').val();
-            mobile_number = mobile_number.replace(/\s/g, '')
-            if(mobile_number == ''){
-                Swal.fire({title: 'Warning',text: 'Mobile Number Required',icon: 'warning',confirmButtonText: 'OK'});
-                return false;
-            }
-            var regex = new RegExp(/^(009665|9665|\+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/);
-            if(!regex.test(mobile_number)){
-                Swal.fire({title: 'Warning',text: 'Invalid Mobile Number',icon: 'warning',confirmButtonText: 'OK'});
-                return false;
-            }
-            var url ="https://kaauh.edu.sa/otp-request";
-            $.post(url, {_token:"HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7",mobile:mobile_number,},
-            function (data) {
-                if (data=='true') {
-                    $('#enterOTP').removeClass('d-none');
-                    $('#enterMobile').addClass('d-none');
-                }else{
-                    console.log(data);
-                }
-            })
-        }
-        function verifyMobileOtp(){
-            let contact_number = $('#mobile_numner').val();
-            contact_number = contact_number.replace(/\s/g, '')
-            var otp=$('#mobile_otp').val();
-            var url ="https://kaauh.edu.sa/otp-request-verify";
-            $.post(url, {_token:"HnGLM2FHMNifpfgqfmGAiC0GcW9SEHjLa6r7INf7",mobile:contact_number,otp:otp},
-            function (data) {
-                if (data=='true') {
-                    location.href = 'https://kaauh.edu.sa/appointments'
-                }else{
-                    console.log(data);
-                    Swal.fire({title: 'Warning',text: 'Invalid OTP',icon: 'warning',confirmButtonText: 'OK'});
-                }
-            })
-        }
-        var search = window.location.search;
-        var hrefname = window.location.href;
-        hrefname = hrefname.replace(search, '');
-        var active = $('[href="'+hrefname+'"]').closest('li');
-        if (active.parents('.sub-menu').length) {
-            active.parents('.sub-menu').parent('li').addClass('active');
-        }else{
-            $('[href="'+hrefname+'"]').closest('li').addClass('active');
-        }
-        $('#datepicker').datepicker({format: 'dd-mm-yyyy',autoclose:true,startDate: new Date()});
-        $('.datepicker_dob').datepicker({format: 'dd-mm-yyyy',autoclose:true,endDate:new Date()});
-        $('#datepicker_ref').datepicker({format: 'yyyy-mm-dd',autoclose:true,endDate: new Date()});
-        $('.image-link').magnificPopup({type: 'image'});
-        $('.video-popup1').magnificPopup({type: 'iframe',iframe: {patterns: {youtube: {index: 'youtube.com',src: 'https://www.youtube.com/embed/SZEflIVnhH8'}}}});
-        $('.datepicker_psd').datepicker({format: 'dd-mm-yyyy',autoclose:true,endDate:new Date()});
-    </script>
-    <script></script>
-    <script>$(".speciality").select2({tags: true});</script>
-</body>
-</html>
+
+    <div class="job-listing-section">
+        <div class="max-width-container">
+            <h2 class="h3 mb-4 text-center" style="color: var(--kaauh-teal-dark); font-weight: 700;">
+                {% trans "Open Positions" %}
+            </h2>
+
+            <div class="table-responsive">
+                <table class="job-table">
+                    <thead>
+                        <tr>
+                            <th scope="col" style="width: 10%;">{% trans "Job ID" %}</th>
+                            <th scope="col">{% trans "Job Title" %}</th>
+                            <th scope="col" style="width: 10%;">{% trans "Hiring" %}</th>
+                            <th scope="col" style="width: 15%;">{% trans "Posting Date" %}</th>
+                            <th scope="col" style="width: 15%;">{% trans "Apply Before" %}</th>
+                            <th scope="col" style="width: 10%;">{% trans "Apply" %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% comment %} Django loop would typically go here: {% for job in jobs %} {% endcomment %}
+                        {% for job in active_jobs %}
+                        <tr>
+                            <td class="text-nowrap">{{job.internal_job_id}}</td>
+                            <td class="text-nowrap">{{job.title}}</td>
+                            <td>{{job.open_positions}}</td>
+                            <td>{{job.application_start_date}}</td>
+                            <td>{{job.application_deadline}}</td>
+                            <td class="job-link-cell">
+                                <a href="{% url 'job_detail_candidate' job.slug %}" class="btn-apply">{% trans "Apply" %}</a>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                        
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="text-center mt-5">
+                <a href="#" class="btn btn-lg btn-secondary">
+                    <i class="fas fa-list-alt me-2"></i> {% trans "View All Openings" %}
+                </a>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}

templates/jobs/job_detail.html

@@ -280,10 +280,10 @@
                                     <i class="fas fa-edit me-2 text-primary"></i> <strong>{% trans "Updated At:" %}</strong> {{ job.updated_at|default:"N/A" }}
                                 </div>
 
-                                <div class="col-md-4">
+                                <div class="col-md-6">
                                 <button
                                     type="button"
-                                    class="btn btn-main-action btn-sm"
+                                    class="btn btn-main-action"
                                     id="copyJobLinkButton"
                                     data-url="{{ job.application_url }}">
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@@ -298,6 +298,7 @@
                                 </span>
                                  </div>
 
+
                             </div>
                             <h5 class="text-muted mb-3">{% trans "Financial & Timeline" %}</h5>
                             <div class="row g-3">

templates/jobs/job_detail_candidate.html

@@ -0,0 +1,260 @@
+{% load static i18n %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% translate "Application Form" %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+    /* ---------------------------------------------------------------------- */
+    /* THEME & UTILITY VARIABLES */
+    /* ---------------------------------------------------------------------- */
+    :root {
+        --kaauh-teal: #00636e;
+        --kaauh-teal-dark: #004a53;
+        --success: #198754;
+        --light-bg: #f8f9fa; 
+        
+        /* CALCULATED STICKY HEIGHTS */
+        /* Standard Bootstrap Navbar Height (approx 56px) */
+        --navbar-height: 56px; 
+        /* Bootstrap mb-3 spacing (1rem or 16px) */
+        --navbar-gap: 16px; 
+        
+        /* Combined height of the two navbars when collapsed on desktop (56 + 16 + 56 = 128px) */
+        --sticky-navbar-total-height: 128px;
+    }
+
+    .btn-main-action {
+        background-color: var(--kaauh-teal);
+        color: white;
+        border: none;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+        box-shadow: 0 4px 12px rgba(0, 99, 110, 0.3);
+    }
+
+    .btn-main-action:hover {
+        background-color: var(--kaauh-teal-dark);
+        color: white;
+        transform: translateY(-1px);
+    }
+
+    .bg-kaauh-teal-dark {
+        background-color: var(--kaauh-teal-dark) !important;
+    }
+
+    /* ---------------------------------------------------------------------- */
+    /* LAYOUT & STICKY POSITIONING FIXES (Desktop/Tablet) */
+    /* ---------------------------------------------------------------------- */
+
+    /* 1. Position the dark navbar below the white navbar + gap */
+    #bottomNavbar {
+        /* 56px (white nav) + 16px (mb-3) = 72px */
+        top: calc(var(--navbar-height) + var(--navbar-gap)); 
+        z-index: 1030;
+    }
+
+    /* 2. Pushes the main content down so it's not hidden under the navbars */
+    .main-content-area {
+        /* Total Sticky Height (128px) + Extra Margin (12px) = 140px */
+        margin-top: calc(var(--sticky-navbar-total-height) + 12px); 
+    }
+
+    /* 3. Positions the sticky sidebar correctly */
+    .card.sticky-top {
+        /* Start scrolling the sidebar just below the two navbars + a small gap */
+        top: calc(var(--sticky-navbar-total-height) + 15px);
+    }
+
+    /* ---------------------------------------------------------------------- */
+    /* MOBILE RESPONSIVE STYLES (Below 992px) */
+    /* ---------------------------------------------------------------------- */
+    @media (max-width: 991.98px) {
+        
+        /* --- FIX: Spacing for Collapsed Hamburger Menu --- */
+        #navbarNav .nav-item {
+            margin-top: 5px;
+            margin-bottom: 5px;
+            padding: 5px 0;
+            border-bottom: 1px solid #f0f0f0; 
+        }
+        
+        #navbarNav .nav-item:last-child {
+            border-bottom: none; 
+        }
+        
+        #navbarNav .nav-link {
+            padding: 8px 15px; 
+            display: block;
+        }
+        /* --- END FIX --- */
+        
+        /* On mobile, the top navbar is generally only 56px tall when collapsed. 
+           The bottom navbar position remains correct (72px down). */
+        #bottomNavbar {
+            top: calc(var(--navbar-height) + var(--navbar-gap));
+        }
+        
+        /* Main content area needs less margin on mobile since the sidebar isn't active 
+           and the navs are collapsed by default. */
+        .main-content-area {
+            /* Reduced margin-top for smaller screens */
+            margin-top: calc(var(--sticky-navbar-total-height) / 2); 
+        }
+        
+        /* Mobile Fixed Footer Bar for Application */
+        .mobile-fixed-apply-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+            padding: 15px;
+            background-color: var(--light-bg);
+            border-top: 1px solid #ddd;
+            z-index: 1000;
+            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
+        }
+
+        /* Add padding to the bottom of the body content to prevent it from hiding under the fixed bar */
+        body {
+            padding-bottom: 90px;
+        }
+
+        /* Fix job overview grid responsiveness (ensures 1 column) */
+        .row-cols-md-2 > .col {
+            flex: 0 0 100%;
+            max-width: 100%;
+        }
+    }
+</style>
+</head>
+<body>
+   
+    <nav id="topNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: white; z-index: 1030;">
+    <div class="container-fluid">
+        <span class="navbar-brand text-white fw-bold">
+            <img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
+        </span>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+               
+                <li class="nav-item">
+                    <a class="nav-link text-secondary" href="/applications/">{% translate "Applications" %}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-secondary" href="/profile/">{% translate "Profile" %}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link text-secondary" href="https://kaauh.edu.sa/career">{% translate "Careers" %}</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+    
+    <nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top" style="background-color: var(--kaauh-teal); z-index: 1030;">
+        <div class="container-fluid">
+             <span class="navbar-text text-white fw-bold">{% translate "Job Overview" %}</span>
+        </div>
+    </nav>
+    
+    <div class="container">
+        <div class="row mb-5 mt-3 main-content-area">
+            
+            <div class="col-lg-4 order-lg-2 order-1 d-none d-lg-block">
+                <div class="card shadow-sm sticky-top" style="top: var(--sticky-navbar-total-height);"> 
+                    <div class="card-header bg-kaauh-teal-dark text-white">
+                        <h5 class="mb-0"><i class="fas fa-file-signature me-2"></i>Ready to Apply?</h5>
+                    </div>
+                    <div class="card-body text-center">
+                        <p class="text-muted">Review the job details, then apply below.</p>
+                        
+                        {% if job.form_template %}
+                            <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
+                                <i class="fas fa-paper-plane me-2"></i> Apply for this Position
+                            </a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-8 order-lg-1 order-2">
+                <div class="card shadow-sm">
+                    <div class="card-header bg-kaauh-teal-dark text-white d-flex justify-content-between align-items-center">
+                        <h2 class="h3 mb-0 fw-bold">{{ job.title }}</h2>
+                        
+                        {% comment %} {% with status_class=job.status|lower %}
+                        <span class="badge 
+                            {% if status_class == 'open' %}bg-success
+                            {% elif status_class == 'closed' %}bg-danger
+                            {% elif status_class == 'draft' %}bg-secondary
+                            {% else %}bg-primary
+                            {% endif %}
+                            status-badge fw-bold p-2">
+                            {{ job.get_status_display }}
+                        </span>
+                        {% endwith %} {% endcomment %}
+                    </div>
+
+                    <div class="card-body">
+                        
+                        <h4 class="mb-3" style="color: var(--kaauh-teal-dark);">Job Overview</h4>
+                        <div class="row row-cols-1 row-cols-md-2 g-3 mb-4">
+                            {% if job.salary_range %}
+                            <div class="col">
+                                <i class="fas fa-money-bill-wave text-success me-2"></i>
+                                <strong>Salary:</strong> 
+                                <span class="fw-bold text-success">{{ job.salary_range }}</span>
+                            </div>
+                            {% endif %}
+                            
+                            <div class="col">
+                                <i class="fas fa-calendar-alt text-muted me-2"></i>
+                                <strong>Deadline:</strong> 
+                                {% if job.application_deadline %}
+                                    {{ job.application_deadline|date:"M d, Y" }}
+                                    {% if job.is_expired %}
+                                        <span class="badge bg-danger ms-2">EXPIRED</span>
+                                    {% endif %}
+                                {% else %}
+                                    <span class="text-muted">Not specified</span>
+                                {% endif %}
+                            </div>
+                            
+                            <div class="col"> <i class="fas fa-briefcase text-muted me-2"></i> <strong>Job Type:</strong> {{ job.get_job_type_display }} </div>
+                            <div class="col"> <i class="fas fa-map-marker-alt text-muted me-2"></i> <strong>Location:</strong> {{ job.get_location_display }} </div>
+                            <div class="col"> <i class="fas fa-building text-muted me-2"></i> <strong>Department:</strong> {{ job.department|default:"Not specified" }} </div>
+                            <div class="col"> <i class="fas fa-hashtag text-muted me-2"></i> <strong>JOB ID:</strong> {{ job.internal_job_id|default:"N/A" }} </div>
+                            <div class="col"> <i class="fas fa-desktop text-muted me-2"></i> <strong>Workplace:</strong> {{ job.get_workplace_type_display }} </div>
+                            {% comment %} <div class="col"> <i class="fas fa-user-tie text-muted me-2"></i> <strong>Created By:</strong> {{ job.created_by|default:"N/A" }} </div> {% endcomment %}
+                        </div>
+                        
+                        {% if job.description %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-info-circle me-2"></i>Job Description</h5><div class="text-secondary">{{ job.description|safe }}</div></div>{% endif %}
+                        {% if job.qualifications %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-graduation-cap me-2"></i>Qualifications</h5><div class="text-secondary">{{ job.qualifications|safe }}</div></div>{% endif %}
+                        {% if job.benefits %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-hand-holding-usd me-2"></i>Benefits</h5><div class="text-secondary">{{ job.benefits|safe }}</div></div>{% endif %}
+                        {% if job.application_instructions %}<hr class="my-4"><div class="mb-4"><h5 class="fw-bold" style="color: var(--kaauh-teal-dark);"><i class="fas fa-file-alt me-2"></i>Application Instructions</h5><div class="text-secondary">{{ job.application_instructions|safe }}</div></div>{% endif %}
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div> 
+
+    <div class="mobile-fixed-apply-bar d-lg-none"> 
+        {% if job.form_template %}
+        <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-main-action btn-lg w-100">
+            <i class="fas fa-paper-plane me-2"></i> Apply for this Position
+        </a>
+        {% endif %}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

templates/jobs/job_list.html

@@ -225,14 +225,14 @@
                                 <option value="ARCHIVED" {% if status_filter == 'ARCHIVED' %}selected{% endif %}>{% trans "Archived" %}</option>
                             </select>
                         </div>
-                        <div class="col-md-7">
+                        <div class="col-md-5">
                             <div class="filter-buttons">
                                
-                                <button type="submit" class="btn btn-main-action">
+                                <button type="submit" class="btn btn-main-action btn-lg">
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
                                 {% if job_filter or search_query %}
-                                    <a href="{% url 'job_list' %}" class="btn btn-outline-secondary">
+                                    <a href="{% url 'job_list' %}" class="btn btn-outline-secondary btn-lg">
                                         <i class="fas fa-times me-1"></i> {% trans "Clear" %}
                                     </a>
                                 {% endif %}

templates/meetings/list_meetings.html

@@ -168,7 +168,7 @@
                     <form method="GET" class="row g-3 align-items-end" >
                         {% if search_query %}<input type="hidden" name="q" value="{{ search_query }}">{% endif %}
 
-                        <div class="col-md-4">
+                        <div class="col-md-3">
                             <label for="status" class="form-label small text-muted">{% trans "Filter by Status" %}</label>
                             <select name="status" id="status" class="form-select form-select-sm">
                                 <option value="">{% trans "All Statuses" %}</option>
@@ -178,13 +178,13 @@
                             </select>
                         </div>
 
-                        <div class="col-md-7">
+                        <div class="col-md-5">
                             <div class="filter-buttons">
-                                <button type="submit" class="btn btn-main-action">
+                                <button type="submit" class="btn btn-main-action btn-lg">
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
                                 {% if status_filter or search_query %}
-                                    <a href="{% url 'meeting_list' %}" class="btn btn-outline-secondary">
+                                    <a href="{% url 'meeting_list' %}" class="btn btn-outline-secondary btn-lg">
                                         <i class="fas fa-times me-1"></i> {% trans "Clear" %}
                                     </a>
                                 {% endif %}

templates/recruitment/candidate_list.html

@@ -165,7 +165,7 @@
                     <form method="GET" class="row g-3 align-items-end" >
                         {% if search_query %}<input type="hidden" name="q" value="{{ search_query }}">{% endif %}
 
-                        <div class="col-md-4">
+                        <div class="col-md-3">
                             <label for="job_filter" class="form-label small text-muted">{% trans "Filter by Job" %}</label>
                             <select name="job" id="job_filter" class="form-select form-select-sm">
                                 <option value="">{% trans "All Jobs" %}</option>
@@ -175,13 +175,13 @@
                             </select>
                         </div>
 
-                        <div class="col-md-8">
+                        <div class="col-md-5">
                             <div class="filter-buttons">
-                                <button type="submit" class="btn btn-main-action">
+                                <button type="submit" class="btn btn-main-action btn-lg">
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
                                 {% if job_filter or search_query %}
-                                    <a href="{% url 'candidate_list' %}" class="btn btn-outline-secondary">
+                                    <a href="{% url 'candidate_list' %}" class="btn btn-outline-secondary btn-lg">
                                         <i class="fas fa-times me-1"></i> {% trans "Clear" %}
                                     </a>
                                 {% endif %}

templates/user/profile.html

@@ -104,7 +104,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="container mt-4" style="max-width: 900px;">
+<div class="container" style="max-width: 900px;">
     
     <div class="profile-header d-flex align-items-center justify-content-between">
         <div>
@@ -122,7 +122,7 @@
             <div class="card p-5">
                 <h5 class="fw-bold mb-4 text-accent">{% trans "Personal Information" %}</h5>
                 
-                <form method="post" action="{% url 'user_detail' user.pk %}">
+                <form method="post" action="#">
                     {% csrf_token %}
                     
                     <div class="row g-4"> <div class="col-md-6">
@@ -139,7 +139,7 @@
                             <label for="id_email" class="form-label">{% trans "Email Address" %}</label>
                             <input type="email" class="form-control" id="id_email" value="{{ user.email }}" disabled>
                             <div class="form-text mt-2">
-                                <a href="{% url 'account_email' %}" class="small text-accent">{% trans "Manage email addresses" %}</a>
+                                <a href="#" class="small text-accent">{% trans "Manage email addresses" %}</a>
                             </div>
                         </div>
 
@@ -160,9 +160,9 @@
                     <a href="{% url 'account_change_password' %}" class="btn btn-outline-danger w-100 rounded-pill py-2">
                         <i class="fas fa-lock me-2"></i> {% trans "Change Password" %}
                     </a>
-                     <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#myModalForm">
-                        <i class="fas fa-image me-1"></i> {% trans "Change Profile Image" %}
-                    </button>
+                    {% comment %} <a href="#" class="btn btn-outline-secondary w-100 rounded-pill py-2">
+                        <i class="fas fa-shield-alt me-2"></i> {% trans "Two-Factor Auth" %}
+                    </a> {% endcomment %}
                 </div>
             </div>
 
@@ -192,32 +192,4 @@
     </div> 
     
 </div>
-
-<!--modal for image upload-->
-<div class="modal fade mt-4" id="myModalForm" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="myModalLabel">Upload Profile image</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <form method="post" action="{% url 'user_profile_image_update' user.pk %}" enctype="multipart/form-data" >
-          {% csrf_token %}
-          {{ profile_form.as_p}}
-        
-            {% if image_upload_form.instance.post_image %}
-                <p>Current Image:</p>
-                <img src="{{ image_upload_form.instance.post_image.url }}" alt="Post Image" style="max-width: 200px;">
-            {% endif %}
-         <div class="modal-footer mt-2">
-            <button type="button" class="btn  btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="submit" class="btn btn-primary">Save changes</button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
-
 {% endblock %}