229 lines
13 KiB
HTML
229 lines
13 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block content %}
|
|
|
|
{# ------------------------------------------------ #}
|
|
{# 🚀 TOP NAV BAR (Sticky and Themed) #}
|
|
{# ------------------------------------------------ #}
|
|
<nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top border-bottom"
|
|
style="background-color: var(--kaauh-teal); z-index: 1030; height: 50px;">
|
|
<div class="container-fluid container-lg">
|
|
<span class="navbar-text text-white fw-bold fs-6">{% trans "Job Overview" %}</span>
|
|
</div>
|
|
</nav>
|
|
|
|
{# ------------------------------------------------ #}
|
|
{# 🔔 DJANGO MESSAGES (Refined placement and styling) #}
|
|
{# ------------------------------------------------ #}
|
|
|
|
|
|
{# ------------------------------------------------ #}
|
|
{# 💻 MAIN CONTENT CONTAINER #}
|
|
{# ------------------------------------------------ #}
|
|
<div class="container mt-4 mb-5">
|
|
<div class="row g-4 main-content-area">
|
|
|
|
{# 📌 RIGHT COLUMN: Sticky Apply Card (Desktop Only) #}
|
|
<div class="col-lg-4 order-lg-2 d-none d-lg-block">
|
|
<div class="card shadow-lg border-0" style="position: sticky; top: 70px;">
|
|
<div class="card-header bg-white border-bottom p-3">
|
|
<h5 class="mb-0 fw-bold text-kaauh-teal">
|
|
<i class="fas fa-file-signature me-2"></i>{% trans "Ready to Apply?" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body text-center p-4">
|
|
<p class="text-muted small mb-3">{% trans "Review the full job details below before submitting your application." %}</p>
|
|
|
|
{% if job.form_template %}
|
|
{% if user.is_authenticated and already_applied %}
|
|
<button class="btn btn-main-action btn-lg w-100" disabled>
|
|
<i class="fas fa-paper-plane me-2"></i> {% trans "You already applied for this position" %}
|
|
</button>
|
|
{% else %}
|
|
<a href="{% url 'application_submit_form' job.slug %}" 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 %}
|
|
{% endif %}
|
|
{% comment %} <a href="{% url 'application_submit_form' job.form_template.slug %}" class="btn btn-main-action btn-lg w-100 shadow-sm">
|
|
<i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
|
|
</a>
|
|
{% elif not job.is_expired %}
|
|
<p class="text-danger fw-bold">{% trans "Application form is unavailable." %}</p>
|
|
{% endif %} {% endcomment %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# 📝 LEFT COLUMN: Job Details #}
|
|
<div class="col-lg-8 order-lg-1">
|
|
<article class="card shadow-lg border-0">
|
|
|
|
{# Job Title Header #}
|
|
<header class="card-header bg-white border-bottom p-4">
|
|
<h1 class="h2 mb-0 fw-bolder text-kaauh-teal">{{ job.title }}</h1>
|
|
</header>
|
|
|
|
<div class="card-body p-4">
|
|
|
|
<h4 class="mb-4 fw-bold text-muted border-bottom pb-2">{% trans "Summary" %}</h4>
|
|
|
|
{# Job Metadata/Overview Grid #}
|
|
<section class="row row-cols-1 row-cols-md-2 g-3 mb-5 small text-secondary p-3 rounded bg-light-subtle border">
|
|
|
|
{# SALARY #}
|
|
{% if job.salary_range %}
|
|
<div class="col">
|
|
<i class="fas fa-money-bill-wave text-success me-2 fa-fw"></i>
|
|
<strong>{% trans "Salary:" %}</strong>
|
|
<span class="fw-bold text-success">{{ job.salary_range }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# DEADLINE #}
|
|
<div class="col">
|
|
<i class="fas fa-calendar-alt text-muted me-2 fa-fw"></i>
|
|
<strong>{% trans "Deadline:" %}</strong>
|
|
{% if job.application_deadline %}
|
|
<time datetime="{{ job.application_deadline|date:'Y-m-d' }}">
|
|
{{ job.application_deadline|date:"M d, Y" }}
|
|
</time>
|
|
{% if job.is_expired %}
|
|
<span class="badge bg-danger ms-2">{% trans "EXPIRED" %}</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted">{% trans "Ongoing" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# JOB TYPE #}
|
|
<div class="col">
|
|
<i class="fas fa-briefcase text-muted me-2 fa-fw"></i>
|
|
<strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }}
|
|
</div>
|
|
|
|
{# LOCATION #}
|
|
<div class="col">
|
|
<i class="fas fa-map-marker-alt text-muted me-2 fa-fw"></i>
|
|
<strong>{% trans "Location:" %}</strong> {{ job.get_location_display }}
|
|
</div>
|
|
|
|
{# DEPARTMENT #}
|
|
<div class="col">
|
|
<i class="fas fa-building text-muted me-2 fa-fw"></i>
|
|
<strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }}
|
|
</div>
|
|
|
|
{# JOB ID #}
|
|
<div class="col">
|
|
<i class="fas fa-hashtag text-muted me-2 fa-fw"></i>
|
|
<strong>{% trans "JOB ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }}
|
|
</div>
|
|
|
|
{# WORKPLACE TYPE #}
|
|
<div class="col">
|
|
<i class="fas fa-laptop-house text-muted me-2 fa-fw"></i>
|
|
<strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }}
|
|
</div>
|
|
|
|
</section>
|
|
|
|
{# Detailed Accordion Section #}
|
|
<div class="accordion accordion-flush" id="jobDetailAccordion">
|
|
|
|
{% with active_collapse="collapseOne" %}
|
|
|
|
{# JOB DESCRIPTION #}
|
|
{% if job.has_description_content %}
|
|
<div class="accordion-item border-top border-bottom">
|
|
<h2 class="accordion-header" id="headingOne">
|
|
<button class="accordion-button fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#{{ active_collapse }}" aria-expanded="true"
|
|
aria-controls="{{ active_collapse }}">
|
|
<i class="fas fa-info-circle me-3 fa-fw"></i> {% trans "Job Description" %}
|
|
</button>
|
|
</h2>
|
|
<div id="{{ active_collapse }}" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#jobDetailAccordion">
|
|
<div class="accordion-body text-secondary p-4">
|
|
<div class="wysiwyg-content">{{ job.description|safe }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# QUALIFICATIONS #}
|
|
{% if job.has_qualifications_content %}
|
|
<div class="accordion-item border-bottom">
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
<button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
<i class="fas fa-graduation-cap me-3 fa-fw"></i> {% trans "Qualifications" %}
|
|
</button>
|
|
</h2>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#jobDetailAccordion">
|
|
<div class="accordion-body text-secondary p-4">
|
|
<div class="wysiwyg-content">{{ job.qualifications|safe }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# BENEFITS #}
|
|
{% if job.has_benefits_content %}
|
|
<div class="accordion-item border-bottom">
|
|
<h2 class="accordion-header" id="headingThree">
|
|
<button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
<i class="fas fa-hand-holding-usd me-3 fa-fw"></i> {% trans "Benefits" %}
|
|
</button>
|
|
</h2>
|
|
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#jobDetailAccordion">
|
|
<div class="accordion-body text-secondary p-4">
|
|
<div class="wysiwyg-content">{{ job.benefits|safe }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# APPLICATION INSTRUCTIONS #}
|
|
{% if job.has_application_instructions_content %}
|
|
<div class="accordion-item border-bottom">
|
|
<h2 class="accordion-header" id="headingFour">
|
|
<button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
|
|
<i class="fas fa-file-alt me-3 fa-fw"></i> {% trans "Application Instructions" %}
|
|
</button>
|
|
</h2>
|
|
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#jobDetailAccordion">
|
|
<div class="accordion-body text-secondary p-4">
|
|
<div class="wysiwyg-content">{{ job.application_instructions|safe }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endwith %}
|
|
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# 📱 MOBILE FIXED APPLY BAR (Replaced inline style with utility classes) #}
|
|
{% if job.form_template %}
|
|
<footer class="fixed-bottom d-lg-none bg-white border-top shadow-lg p-3">
|
|
{% if user.is_authenticated and already_applied %}
|
|
<button class="btn btn-main-action btn-lg w-100" disabled>
|
|
<i class="fas fa-paper-plane me-2"></i> {% trans "You already applied for this position" %}
|
|
</button>
|
|
{% else %}
|
|
<a href="{% url 'application_submit_form' job.slug %}" 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 %}
|
|
</footer>
|
|
{% endif %}
|
|
{% endblock content%} |