501 lines
13 KiB
HTML
501 lines
13 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Application" %}-{{ job.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-wrapper">
|
|
<!-- Simple Header -->
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<a href="{% url 'kaauh_career' %}" class="back-link">
|
|
<i data-lucide="arrow-left" class="icon-sm"></i>
|
|
<span>{% trans "All Positions" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="content-wrapper">
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Job Header -->
|
|
<div class="job-header">
|
|
<h1 class="job-title">{{ job.title }}</h1>
|
|
<div class="job-meta">
|
|
<span class="meta-item">
|
|
<i data-lucide="building-2" class="icon-sm"></i>
|
|
{{ job.department }}
|
|
</span>
|
|
<span class="meta-item">
|
|
<i data-lucide="map-pin" class="icon-sm"></i>
|
|
{{ job.get_location_display }}
|
|
</span>
|
|
<span class="meta-item">
|
|
<i data-lucide="briefcase" class="icon-sm"></i>
|
|
{{ job.get_job_type_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Job Details Grid -->
|
|
<div class="details-grid">
|
|
{% if job.salary_range %}
|
|
<div class="detail-item">
|
|
<div class="detail-label">{% trans "Salary" %}</div>
|
|
<div class="detail-value">{{ job.salary_range }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="detail-item">
|
|
<div class="detail-label">{% trans "Deadline" %}</div>
|
|
<div class="detail-value">
|
|
{% if job.application_deadline %}
|
|
{{ job.application_deadline|date:"M d, Y" }}
|
|
{% else %}
|
|
{% trans "Open" %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-item">
|
|
<div class="detail-label">{% trans "Work Mode" %}</div>
|
|
<div class="detail-value">{{ job.workplace_type|default:"On-site" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Sections -->
|
|
{% if job.has_description_content %}
|
|
<section class="content-section">
|
|
<h2 class="section-heading">{% trans "About the Role" %}</h2>
|
|
<div class="section-content">
|
|
{{ job.description|safe }}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{% if job.has_qualifications_content %}
|
|
<section class="content-section">
|
|
<h2 class="section-heading">{% trans "What We're Looking For" %}</h2>
|
|
<div class="section-content">
|
|
{{ job.qualifications|safe }}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
</main>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="apply-card">
|
|
{% if job.form_template %}
|
|
{% if user.is_authenticated and already_applied %}
|
|
<div class="applied-badge">
|
|
<i data-lucide="check-circle" class="icon-md"></i>
|
|
<span>{% trans "Applied" %}</span>
|
|
</div>
|
|
<p class="apply-text">{% trans "Your application has been submitted" %}</p>
|
|
{% else %}
|
|
<a href="{% url 'application_submit_form' job.slug %}" class="apply-button">
|
|
{% trans "Apply for this Position" %}
|
|
<i data-lucide="arrow-right" class="icon-sm"></i>
|
|
</a>
|
|
{% if job.application_deadline %}
|
|
<p class="apply-deadline">
|
|
{% trans "Apply before" %} {{ job.application_deadline|date:"M d, Y" }}
|
|
</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Quick Info -->
|
|
<div class="info-card">
|
|
<h3 class="info-title">{% trans "Quick Info" %}</h3>
|
|
<div class="info-list">
|
|
{% if job.internal_job_id %}
|
|
<div class="info-item">
|
|
<span class="info-label">{% trans "Job ID" %}</span>
|
|
<span class="info-value">{{ job.internal_job_id }}</span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="info-item">
|
|
<span class="info-label">{% trans "Posted" %}</span>
|
|
<span class="info-value">{{ job.created_at|date:"M d, Y" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Apply -->
|
|
{% if job.form_template and not already_applied %}
|
|
<div class="mobile-apply">
|
|
<a href="{% url 'application_submit_form' job.slug %}" class="mobile-apply-btn">
|
|
{% trans "Apply Now" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--red: #9d2235;
|
|
--red-dark: #7a1a29;
|
|
--gray-50: #fafafa;
|
|
--gray-100: #f5f5f5;
|
|
--gray-200: #e5e5e5;
|
|
--gray-400: #a3a3a3;
|
|
--gray-600: #525252;
|
|
--gray-900: #171717;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
color: var(--gray-900);
|
|
background: #ffffff;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Layout */
|
|
.page-wrapper {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.page-header {
|
|
border-bottom: 1px solid var(--gray-200);
|
|
padding: 1.5rem 0;
|
|
background: #ffffff;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.container {
|
|
max-width: 75rem;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.content-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.content-wrapper {
|
|
grid-template-columns: 1fr 22rem;
|
|
gap: 4rem;
|
|
}
|
|
}
|
|
|
|
/* Back Link */
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--gray-600);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: var(--red);
|
|
}
|
|
|
|
/* Job Header */
|
|
.job-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.job-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.job-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
color: var(--gray-600);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Details Grid */
|
|
.details-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
padding: 2rem;
|
|
background: var(--gray-50);
|
|
border-radius: 0.75rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--gray-600);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
/* Content Sections */
|
|
.content-section {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section-heading {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.section-content {
|
|
font-size: 1rem;
|
|
line-height: 1.75;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.section-content h1,
|
|
.section-content h2,
|
|
.section-content h3,
|
|
.section-content h4 {
|
|
font-weight: 600;
|
|
color: var(--gray-900);
|
|
margin: 2rem 0 1rem;
|
|
}
|
|
|
|
.section-content h2 { font-size: 1.25rem; }
|
|
.section-content h3 { font-size: 1.125rem; }
|
|
|
|
.section-content p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-content ul,
|
|
.section-content ol {
|
|
margin: 1rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.section-content li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-content strong {
|
|
font-weight: 600;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
.section-content a {
|
|
color: var(--red);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
position: sticky;
|
|
top: 7rem;
|
|
align-self: start;
|
|
}
|
|
|
|
.apply-card,
|
|
.info-card {
|
|
background: #ffffff;
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: 0.75rem;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Apply Button */
|
|
.apply-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--red);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
border-radius: 0.5rem;
|
|
text-decoration: none;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.apply-button:hover {
|
|
background: var(--red-dark);
|
|
}
|
|
|
|
.apply-text {
|
|
font-size: 0.875rem;
|
|
color: var(--gray-600);
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.apply-deadline {
|
|
font-size: 0.8125rem;
|
|
color: var(--gray-600);
|
|
margin-top: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Applied Badge */
|
|
.applied-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
background: var(--gray-50);
|
|
border-radius: 0.5rem;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
/* Info Card */
|
|
.info-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
.info-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.info-label {
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.info-value {
|
|
font-weight: 500;
|
|
color: var(--gray-900);
|
|
}
|
|
|
|
/* Mobile Apply */
|
|
.mobile-apply {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.mobile-apply {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1rem;
|
|
background: #ffffff;
|
|
border-top: 1px solid var(--gray-200);
|
|
z-index: 100;
|
|
}
|
|
|
|
.mobile-apply-btn {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
background: var(--red);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
border-radius: 0.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar {
|
|
position: static;
|
|
}
|
|
|
|
body {
|
|
padding-bottom: 5rem;
|
|
}
|
|
}
|
|
|
|
/* Icons */
|
|
.icon-sm {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
}
|
|
|
|
.icon-md {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.job-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.details-grid {
|
|
grid-template-columns: 1fr;
|
|
padding: 1.5rem;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding: 2rem 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |