274 lines
19 KiB
HTML
274 lines
19 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{# Use a dynamic title for better SEO and user context #}
|
|
{% block title %}{% trans "Career Opportunities" %} | KAAUH - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="main-content-area">
|
|
|
|
{# ------------------------------------------------ #}
|
|
{# 🌟 HERO SECTION (High Visual Impact) #}
|
|
{# ------------------------------------------------ #}
|
|
<header class="hero-section text-white py-5 py-lg-6" style=" background-size: cover; background-position: center;">
|
|
{# Overlay for readability, assuming custom CSS defines .hero-overlay #}
|
|
<div class="hero-overlay"></div>
|
|
<div class="container position-relative" style="z-index: 2;">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-12 col-xl-10 text-center">
|
|
{# Use a large, commanding font size #}
|
|
<h1 class="display-4 fw-bolder mb-4 animate__animated animate__fadeInDown">
|
|
{% trans "Your Career in Health & Academia Starts Here." %}
|
|
</h1>
|
|
<p class="lead mb-5 fs-5 animate__animated animate__fadeInUp">
|
|
{% trans "Join KAAUH, a national leader in patient care, research, and education. We are building the future of healthcare." %}
|
|
</p>
|
|
|
|
{# Primary Action to scroll to listings/filters #}
|
|
<a href="#job-list-start" class="btn btn-hero-action btn-lg rounded-pill px-5 me-3 mb-3 mb-lg-0 shadow-lg animate__animated animate__zoomIn">
|
|
<i class="fas fa-compass me-2"></i> {% trans "Find Your Path" %}
|
|
</a>
|
|
{# Secondary Action #}
|
|
<a href="https://kaauh.edu.sa/about-us" class="btn btn-outline-light rounded-pill px-5 btn-lg animate__animated animate__zoomIn">
|
|
{% trans "About US" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
{# ------------------------------------------------ #}
|
|
{# 💻 JOB LISTING SECTION #}
|
|
{# ------------------------------------------------ #}
|
|
<section class="py-5 job-listing-section" id="job-list-start">
|
|
<div class="container">
|
|
|
|
<div class="row g-5">
|
|
|
|
{# 📌 LEFT COLUMN: FILTERS (Smaller on larger screens) #}
|
|
<div class="col-lg-4">
|
|
|
|
{# Mobile Filter Toggle (Used aria-controls for better accessibility) #}
|
|
<button class="btn btn-outline-dark filter-toggle-button d-lg-none w-100 mb-3" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#filterSidebar" aria-expanded="false" aria-controls="filterSidebar">
|
|
<i class="fas fa-filter me-2"></i> {% trans "Filter Jobs" %}
|
|
</button>
|
|
|
|
<div class="collapse d-lg-block filter-sidebar-collapse" id="filterSidebar">
|
|
{# Sticky top ensures filters remain visible while scrolling results #}
|
|
<div class="card border-0 shadow-sm sticky-top-filters p-4 bg-light-subtle" style="top: 20px;">
|
|
|
|
<h4 class="fw-bold mb-4 text-dark border-bottom pb-2">
|
|
<i class="fas fa-search me-2 text-primary-theme"></i>{% trans "Refine Your Search" %}
|
|
</h4>
|
|
<form method="GET" action="{% url 'kaauh_career'%}" class="d-grid gap-3">
|
|
{# NOTE: Replace select with Django form fields for real functionality #}
|
|
|
|
|
|
|
|
<select class="form-select form-select-lg" name="employment_type" aria-label="Employment Type filter" >
|
|
<option value="" {% if not selected_job_type %}selected{% endif %}>{% trans "Employment Type" %}</option>
|
|
|
|
{% for key in job_type_keys %}
|
|
<option value="{{ key }}" {% if key == selected_job_type %}selected{% endif %}>
|
|
<!-- Hard-coded mapping using IF statements -->
|
|
{% if key == 'FULL_TIME' %}{% trans "Full-time" %}{% endif %}
|
|
{% if key == 'PART_TIME' %}{% trans "Part-time" %}{% endif %}
|
|
{% if key == 'CONTRACT' %}{% trans "Contract" %}{% endif %}
|
|
{% if key == 'INTERNSHIP' %}{% trans "Internship" %}{% endif %}
|
|
{% if key == 'FACULTY' %}{% trans "Faculty" %}{% endif %}
|
|
{% if key == 'TEMPORARY' %}{% trans "Temporary" %}{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
<select class="form-select form-select-lg" name="workplace_type" aria-label="Workplace Type filter" >
|
|
<option value="" {% if not selected_workplace_type %}selected{% endif %}>{% trans "Workplace Type" %}</option>
|
|
|
|
{% for key in workplace_type_keys %}
|
|
<option value="{{ key }}" {% if key == selected_workplace_type %}selected{% endif %}>
|
|
<!-- Hard-coded mapping using IF statements -->
|
|
{% if key == 'ON_SITE' %}{% trans "On-site" %}{% endif %}
|
|
{% if key == 'REMOTE' %}{% trans "Remote" %}{% endif %}
|
|
{% if key == 'HYBRID' %}{% trans "Hybrid" %}{% endif %}
|
|
|
|
</option>
|
|
{% endfor %}
|
|
|
|
</select>
|
|
|
|
<select class="form-select form-select-lg" name="department" aria-label="Department Type filter" >
|
|
<option value="" {% if not selected_department %}selected{% endif %}>{% trans "Departments" %}</option>
|
|
|
|
{% for key in department_type_keys %}
|
|
<option value="{{ key }}" {% if key == selected_department %}selected{% endif %}>
|
|
<!-- Hard-coded mapping using IF statements -->
|
|
{{key}}
|
|
|
|
</option>
|
|
{% endfor %}
|
|
|
|
</select>
|
|
<button type="submit" class="btn btn-main-action btn-lg rounded-pill mt-3 shadow-sm">
|
|
{% trans "Apply Filters" %}
|
|
</button>
|
|
<a href="." class="btn btn-outline-secondary btn-sm">{% trans "Clear Filters" %}</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{# 📜 RIGHT COLUMN: JOB LISTINGS (Wider on larger screens) #}
|
|
<div class="col-lg-8">
|
|
|
|
{# Sticky Filter Bar (Summary of results and active filters) #}
|
|
<div class="sticky-filter-bar bg-white p-3 border-bottom mb-4 shadow-sm">
|
|
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
|
|
|
{# Dynamic Count #}
|
|
<h3 class="fw-bold mb-0 text-dark fs-5">
|
|
<span class="text-primary-theme">{{ total_open_roles|default:"0" }}</span> {% trans "Open Roles" %}
|
|
</h3>
|
|
|
|
{# Active Filter Chips (Use a dedicated class for styling) #}
|
|
<div class="d-flex flex-wrap gap-2 pt-2 pt-md-0">
|
|
|
|
{# --- Active Employment Type Filter Chip --- #}
|
|
{% if selected_job_type %}
|
|
<span class="filter-chip badge bg-primary-theme-subtle text-primary-theme fw-normal p-2 active-filter-chip">
|
|
{% trans "Type" %}:
|
|
{# Map the key back to its human-readable translation #}
|
|
<strong class="mx-1">
|
|
{% if selected_job_type == 'Full-time' %}{% trans "Full-time" %}
|
|
{% elif selected_job_type == 'Part-time' %}{% trans "Part-time" %}
|
|
{% elif selected_job_type == 'Contract' %}{% trans "Contract" %}
|
|
{% elif selected_job_type == 'Internship' %}{% trans "Internship" %}
|
|
{% elif selected_job_type == 'Faculty' %}{% trans "Faculty" %}
|
|
{% elif selected_job_type == 'Temporary' %}{% trans "Temporary" %}
|
|
{% endif %}
|
|
</strong>
|
|
{# Link to clear this specific filter: use current URL but remove `employment_type` parameter #}
|
|
<a href="?{% for key, value in request.GET.items %}{% if key != 'employment_type' %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
|
|
class="text-primary-theme text-decoration-none ms-2" role="button" aria-label="Remove Employment Type filter">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</a>
|
|
</span>
|
|
{% endif %}
|
|
|
|
{# --- Active Workplace Type Filter Chip --- #}
|
|
{% if selected_workplace_type %}
|
|
<span class="filter-chip badge bg-primary-theme-subtle text-primary-theme fw-normal p-2 active-filter-chip">
|
|
{% trans "Workplace" %}:
|
|
{# Map the key back to its human-readable translation #}
|
|
<strong class="mx-1">
|
|
{% if selected_workplace_type == 'On-site' %}{% trans "On-site" %}
|
|
{% elif selected_workplace_type == 'Remote' %}{% trans "Remote" %}
|
|
{% elif selected_workplace_type == 'Hybrid' %}{% trans "Hybrid" %}
|
|
{% endif %}
|
|
</strong>
|
|
{# Link to clear this specific filter: use current URL but remove `workplace_type` parameter #}
|
|
<a href="?{% for key, value in request.GET.items %}{% if key != 'workplace_type' %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
|
|
class="text-primary-theme text-decoration-none ms-2" role="button" aria-label="Remove Workplace Type filter">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</a>
|
|
</span>
|
|
{% endif %}
|
|
|
|
{# --- Active Department Filter Chip --- #}
|
|
{% if selected_department %}
|
|
<span class="filter-chip badge bg-primary-theme-subtle text-primary-theme fw-normal p-2 active-filter-chip">
|
|
{% trans "Department" %}:
|
|
<strong class="mx-1">{{ selected_department }}</strong>
|
|
{# Link to clear this specific filter: use current URL but remove `department` parameter #}
|
|
<a href="?{% for key, value in request.GET.items %}{% if key != 'department' %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
|
|
class="text-primary-theme text-decoration-none ms-2" role="button" aria-label="Remove Department filter">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</a>
|
|
</span>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Job Cards Grid #}
|
|
<div class="mt-4 d-grid gap-3">
|
|
|
|
{% for job in active_jobs %}
|
|
{# Optimized Job Listing Card #}
|
|
<a href="{% url 'application_detail' job.slug %}"
|
|
class="card d-block text-decoration-none text-dark job-listing-card p-4 border-2 shadow-hover transition-all">
|
|
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
{# Job Title #}
|
|
<h4 class="h5 fw-bold mb-0 text-primary-theme-hover">
|
|
{{ job.title }}
|
|
</h4>
|
|
|
|
{# Tag Badge (Prominent) #}
|
|
<span class="badge rounded-pill bg-kaauh-teal job-tag px-3 py-2 fs-6">
|
|
|
|
<i class="fas fa-tag me-1"></i>{% trans "Apply Before: " %}{{job.application_deadline}}
|
|
</span>
|
|
</div>
|
|
|
|
{# Department/Context (Sub-text) #}
|
|
<p class="text-muted small mb-3">{% trans 'Department: '%}{{ job.department|default:"KAAUH Department" }}</p>
|
|
|
|
{# Job Metadata Icons (Horizontal list for quick scan) #}
|
|
<div class="d-flex flex-wrap gap-4 small text-secondary">
|
|
|
|
<span class="d-flex align-items-center fw-medium">
|
|
<i class="fas fa-map-marker-alt me-2 text-primary-theme fa-fw"></i>
|
|
{{ job.location_country|default:"Kindom of Saudi Arabia" }} | {{job.location_state|default:"Riyadh Province"}} | {{job.location_city|default:"Riyadh"}}
|
|
</span>
|
|
|
|
<span class="d-flex align-items-center fw-medium">
|
|
<i class="fas fa-user-md me-2 text-primary-theme fa-fw"></i>
|
|
{{ job.workplace_type|default:"" }}
|
|
</span>
|
|
|
|
<span class="d-flex align-items-center fw-medium">
|
|
<i class="fas fa-calendar-alt me-2 text-primary-theme fa-fw"></i>
|
|
{{ job.job_type|default:"Full-Time" }}
|
|
</span>
|
|
|
|
{% if job.posted_date %}
|
|
<span class="d-flex align-items-center fw-medium">
|
|
<i class="fas fa-clock me-2 text-primary-theme fa-fw"></i>
|
|
{% trans "Posted:" %} {{ job.posted_date|timesince }} {% trans "ago" %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
{% empty %}
|
|
<div class="alert alert-info border-0 shadow-sm mt-5" role="alert">
|
|
<h5 class="alert-heading">{% trans "No Matching Opportunities" %}</h5>
|
|
<p>{% trans "We currently have no open roles that match your search and filters. Please modify your criteria or check back soon!" %}</p>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{# Load More Button #}
|
|
{% if show_load_more %}
|
|
<div class="text-center mt-5 mb-3">
|
|
<button class="btn btn-main-action btn-lg rounded-pill px-5 shadow-lg">
|
|
{% trans "Load More Jobs" %} <i class="fas fa-redo ms-2"></i>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
{% include "includes/paginator.html" %}
|
|
</section>
|
|
|
|
|
|
</div>
|
|
{% endblock content %} |