294 lines
12 KiB
HTML
294 lines
12 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Application" %}-{{ job.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
/* 1. LAYOUT & GRID */
|
|
.page-container {
|
|
max-width: 1200px;
|
|
margin: 2rem auto 5rem;
|
|
padding-inline: 1.5rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr 350px;
|
|
gap: 2rem;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.page-container { grid-template-columns: 1fr; }
|
|
.desktop-sidebar { display: none; }
|
|
}
|
|
|
|
/* 2. STICKY TOP NAV */
|
|
.job-nav {
|
|
background-color: var(--kaauh-teal);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
font-weight: 700;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* 3. CARDS & SECTIONS */
|
|
.content-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
background: white;
|
|
}
|
|
|
|
.card-body { padding: 1.5rem; }
|
|
|
|
/* 4. METADATA GRID */
|
|
.meta-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.25rem;
|
|
background: #f9fafb;
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.75rem;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.9rem;
|
|
color: var(--gray-text);
|
|
}
|
|
|
|
.meta-item svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
color: var(--kaauh-teal);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 5. PURE CSS ACCORDION */
|
|
.accordion-item { border-bottom: 1px solid var(--border); }
|
|
.accordion-toggle { display: none; }
|
|
|
|
.accordion-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.25rem;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
color: var(--kaauh-teal-dark);
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.accordion-header:hover { background: #f8fafc; }
|
|
|
|
.accordion-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.accordion-toggle:checked + .accordion-header + .accordion-content {
|
|
max-height: 2000px; /* Large enough for content */
|
|
padding: 1rem 1.25rem 2rem;
|
|
}
|
|
|
|
.accordion-icon {
|
|
transition: transform 0.3s;
|
|
}
|
|
.accordion-toggle:checked + .accordion-header .accordion-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* 6. SIDEBAR & BUTTONS */
|
|
.sticky-sidebar {
|
|
position: sticky;
|
|
top: 80px;
|
|
}
|
|
|
|
.btn-apply {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
background: var(--kaauh-teal);
|
|
color: white;
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
width: 100%;
|
|
border: none;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.btn-apply:disabled { background: #9ca3af; cursor: not-allowed; }
|
|
.btn-apply:not(:disabled):hover { background: var(--kaauh-teal-dark); }
|
|
|
|
/* 7. MOBILE FOOTER */
|
|
.mobile-apply-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
padding: 1rem;
|
|
border-top: 1px solid var(--border);
|
|
box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
@media (min-width: 993px) { .mobile-apply-bar { display: none; } }
|
|
</style>
|
|
|
|
<nav class="job-nav">
|
|
<div style="max-width: 1200px; margin: 0 auto;">
|
|
{% trans "Job Overview" %}
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="page-container">
|
|
<main>
|
|
<article class="content-card">
|
|
<header class="card-header">
|
|
<h1 style="font-size: 1.875rem; font-weight: 800; color: var(--kaauh-teal-dark); margin: 0;">
|
|
{{ job.title }}
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="card-body">
|
|
<h4 style="font-size: 1.1rem; font-weight: 700; color: #6b7280; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem; margin-bottom: 1.5rem;">
|
|
{% trans "Summary" %}
|
|
</h4>
|
|
|
|
<section class="meta-section">
|
|
{% if job.salary_range %}
|
|
<div class="meta-item">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
<strong>{% trans "Salary:" %}</strong> <span style="color: #059669; font-weight: 700;">{{ job.salary_range }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="meta-item">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
|
<strong>{% trans "Deadline:" %}</strong>
|
|
{% if job.application_deadline %}
|
|
{{ job.application_deadline|date:"M d, Y" }}
|
|
{% if job.is_expired %}<span style="color: #dc2626; font-size: 0.7rem; font-weight: 800;">(EXPIRED)</span>{% endif %}
|
|
{% else %}{% trans "Ongoing" %}{% endif %}
|
|
</div>
|
|
|
|
<div class="meta-item">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
|
|
<strong>{% trans "Type:" %}</strong> {{ job.get_job_type_display }}
|
|
</div>
|
|
|
|
<div class="meta-item">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
|
|
<strong>{% trans "Location:" %}</strong> {{ job.get_location_display }}
|
|
</div>
|
|
|
|
<div class="meta-item">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
|
|
<strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }}
|
|
</div>
|
|
|
|
<div class="meta-item">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path></svg>
|
|
<strong>{% trans "ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }}
|
|
</div>
|
|
</section>
|
|
|
|
<div class="accordion-container">
|
|
|
|
{% if job.has_description_content %}
|
|
<div class="accordion-item">
|
|
<input type="checkbox" id="acc1" class="accordion-toggle" checked>
|
|
<label for="acc1" class="accordion-header">
|
|
<span style="display: flex; align-items: center; gap: 0.75rem;">
|
|
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
{% trans "Job Description" %}
|
|
</span>
|
|
<svg class="accordion-icon heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</label>
|
|
<div class="accordion-content">
|
|
<div class="wysiwyg-content">{{ job.description|safe }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if job.has_qualifications_content %}
|
|
<div class="accordion-item">
|
|
<input type="checkbox" id="acc2" class="accordion-toggle">
|
|
<label for="acc2" class="accordion-header">
|
|
<span style="display: flex; align-items: center; gap: 0.75rem;">
|
|
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>
|
|
{% trans "Qualifications" %}
|
|
</span>
|
|
<svg class="accordion-icon heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</label>
|
|
<div class="accordion-content">
|
|
<div class="wysiwyg-content">{{ job.qualifications|safe }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<aside class="desktop-sidebar">
|
|
<div class="content-card sticky-sidebar">
|
|
<header class="card-header">
|
|
<h5 style="margin: 0; font-weight: 800; color: var(--kaauh-teal); display: flex; align-items: center; gap: 0.5rem;">
|
|
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
|
|
{% trans "Ready to Apply?" %}
|
|
</h5>
|
|
</header>
|
|
<div class="card-body" style="text-align: center;">
|
|
<p style="color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem;">
|
|
{% trans "Review the details before submitting your application." %}
|
|
</p>
|
|
|
|
{% if job.form_template %}
|
|
{% if user.is_authenticated and already_applied %}
|
|
<button class="btn-apply" disabled>
|
|
{% trans "Already Applied" %}
|
|
</button>
|
|
{% else %}
|
|
<a href="{% url 'application_submit_form' job.slug %}" class="btn-apply">
|
|
<svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
|
|
{% trans "Apply Now" %}
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
{% if job.form_template %}
|
|
<div class="mobile-apply-bar">
|
|
{% if user.is_authenticated and already_applied %}
|
|
<button class="btn-apply" disabled style="width: 100%;">{% trans "Already Applied" %}</button>
|
|
{% else %}
|
|
<a href="{% url 'application_submit_form' job.slug %}" class="btn-apply">{% trans "Apply for this Position" %}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endblock %} |