{% 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 %}>
                                                {{key}}
                                            </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 %}>
                                               {{key}}
                                              
                                            </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 'job_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 d-none d-lg-inline-block">
                                        <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" }}&nbsp;|&nbsp;{{job.location_state|default:"Riyadh Province"}}&nbsp;|&nbsp;{{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  text-primary-theme 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 %}