172 lines
10 KiB
HTML
172 lines
10 KiB
HTML
{% extends 'applicant/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>
|
|
|
|
|
|
{# ================================================= #}
|
|
{# DJANGO MESSAGE BLOCK - Placed directly below the main navbar #}
|
|
{# ================================================= #}
|
|
{% if messages %}
|
|
<div class="container-fluid message-container">
|
|
<div class="row">
|
|
{# Using responsive columns to center the message content, similar to your form structure #}
|
|
<div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-12">
|
|
{% for message in messages %}
|
|
{# Use 'alert-{{ message.tags }}' to apply Bootstrap styling based on Django's tag (success, error/danger, info, warning) #}
|
|
<div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{# ================================================= #}
|
|
|
|
<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 bg-white p-3">
|
|
<h5 class="mb-0 fw-bold"><i class="fas fa-file-signature me-2" style="color: var(--kaauh-teal);"></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 'application_submit_form' job.form_template.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 %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-8 order-lg-1 order-2">
|
|
<div class="card shadow-sm">
|
|
|
|
<div class="card-header bg-white border-bottom p-4">
|
|
<h1 class="h3 mb-0 fw-bold" style="color: var(--kaauh-teal);">{{ job.title }}</h1>
|
|
</div>
|
|
|
|
<div class="card-body p-4">
|
|
|
|
<h4 class="mb-3 fw-bold" style="color: var(--kaauh-teal-dark);">{% trans "Job Overview" %}</h4>
|
|
<div class="row row-cols-1 row-cols-md-2 g-3 mb-5 small text-secondary border p-3 rounded">
|
|
{% 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>
|
|
|
|
|
|
<div class="accordion" id="jobDetailAccordion">
|
|
|
|
{% if job.has_description_content %}
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingOne">
|
|
<button class="accordion-button fw-bold fs-5 text-primary-theme" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
<i class="fas fa-info-circle me-3"></i> {% trans "Job Description" %}
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#jobDetailAccordion">
|
|
<div class="accordion-body text-secondary p-4">
|
|
{{ job.description|safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if job.has_qualifications_content %}
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
<button class="accordion-button collapsed fw-bold fs-5 text-primary-theme" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
<i class="fas fa-graduation-cap me-3"></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">
|
|
{{ job.qualifications|safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if job.has_benefits_content %}
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingThree">
|
|
<button class="accordion-button collapsed fw-bold fs-5 text-primary-theme" 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"></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">
|
|
{{ job.benefits|safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if job.has_application_instructions_content %}
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingFour">
|
|
<button class="accordion-button collapsed fw-bold fs-5 text-primary-theme" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
|
|
<i class="fas fa-file-alt me-3"></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">
|
|
{{ job.application_instructions|safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mobile-fixed-apply-bar d-lg-none text-center">
|
|
{% if job.form_template %}
|
|
<a href="{% url 'application_submit_form' job.form_template.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 %}
|
|
</div>
|
|
|
|
|
|
{% endblock content%} |