800 lines
38 KiB
HTML
800 lines
38 KiB
HTML
|
|
{% extends "base.html" %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{{ job.title }} - University ATS{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
|
|
<style>
|
|
/* ================================================= */
|
|
/* THEME VARIABLES AND GLOBAL STYLES */
|
|
/* ================================================= */
|
|
:root {
|
|
--kaauh-teal: #00636e; /* Primary */
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #eaeff3;
|
|
--kaauh-primary-text: #343a40;
|
|
|
|
/* Custom Stage Colors for Tracker */
|
|
--stage-applied: var(--kaauh-teal); /* Teal */
|
|
--stage-exam: #17a2b8; /* Info Cyan */
|
|
--stage-interview: #ffc107; /* Warning Yellow */
|
|
--stage-offer: #28a745; /* Success Green */
|
|
--stage-inactive: #6c757d; /* Secondary Gray */
|
|
}
|
|
|
|
/* Primary Color Overrides */
|
|
.text-primary { color: var(--kaauh-teal) !important; }
|
|
.text-info { color: var(--stage-exam) !important; }
|
|
.text-success { color: var(--stage-offer) !important; }
|
|
.text-secondary { color: var(--stage-inactive) !important; }
|
|
.bg-success { background-color: var(--kaauh-teal) !important; }
|
|
.bg-warning { background-color: #ffc107 !important; }
|
|
.bg-secondary { background-color: #6c757d !important; }
|
|
.bg-danger { background-color: #dc3545 !important; }
|
|
|
|
/* Header styling */
|
|
.job-header-card {
|
|
background: linear-gradient(135deg, var(--kaauh-teal), #004d57);
|
|
color: white;
|
|
border-radius: 0.75rem 0.75rem 0 0;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
|
|
}
|
|
.job-header-card h2 {
|
|
font-weight: 700;
|
|
margin: 0;
|
|
font-size: 1.8rem;
|
|
}
|
|
/* Status badge */
|
|
.status-badge {
|
|
font-size: 0.9rem;
|
|
padding: 0.4em 0.8em;
|
|
border-radius: 0.4rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.7px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Card enhancements */
|
|
.card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
transition: transform 0.2s;
|
|
background-color: white;
|
|
}
|
|
.card:not(.no-hover):hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Standard Card Header */
|
|
.card-header {
|
|
font-weight: 600;
|
|
padding: 1rem 1.25rem;
|
|
background-color: #f8f9fa;
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
/* Left Column Tabs Theming */
|
|
.nav-tabs {
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
background-color: #f8f9fa;
|
|
padding: 0 1.25rem;
|
|
}
|
|
.nav-tabs .nav-link {
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
color: var(--kaauh-primary-text);
|
|
font-weight: 500;
|
|
padding: 0.75rem 1rem;
|
|
margin-right: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-tabs .nav-link.active {
|
|
color: var(--kaauh-teal-dark) !important;
|
|
background-color: white !important;
|
|
border-bottom: 3px solid var(--kaauh-teal) !important;
|
|
font-weight: 600;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Right Column Tabs */
|
|
.right-column-tabs {
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
}
|
|
.right-column-tabs .nav-link.active {
|
|
background-color: white;
|
|
color: var(--kaauh-teal-dark);
|
|
border-bottom: 3px solid var(--kaauh-teal);
|
|
border-right-color: transparent;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
/* Main Action Button Style */
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
padding: 0.6rem 1.2rem;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.btn-outline-secondary {
|
|
color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal);
|
|
}
|
|
|
|
/* Applicant stats */
|
|
.applicant-stats .stat-item {
|
|
padding: 0.75rem;
|
|
text-align: center;
|
|
border-radius: 0.5rem;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid var(--kaauh-border);
|
|
}
|
|
.applicant-stats .stat-item div:first-child {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
}
|
|
.applicant-stats .stat-item small {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Specific styling for the deadline box */
|
|
.deadline-box {
|
|
padding: 0.75rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid;
|
|
}
|
|
|
|
/* ==================================== */
|
|
/* MULTI-COLORED CANDIDATE STAGE TRACKER */
|
|
/* ==================================== */
|
|
|
|
.progress-stages {
|
|
position: relative;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.progress-stages a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.stage-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
min-width: 60px;
|
|
transition: all 0.3s ease;
|
|
color: var(--stage-inactive);
|
|
}
|
|
|
|
.stage-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: #e9ecef;
|
|
color: var(--stage-inactive);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.9rem;
|
|
z-index: 10;
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 2px #e9ecef;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* ---------------- STAGE SPECIFIC COLORS ---------------- */
|
|
|
|
/* APPLIED STAGE (Teal) */
|
|
.stage-item[data-stage="Applied"].completed .stage-icon,
|
|
.stage-item[data-stage="Applied"].active .stage-icon {
|
|
background-color: var(--stage-applied);
|
|
color: white;
|
|
}
|
|
.stage-item[data-stage="Applied"].active { color: var(--stage-applied); }
|
|
|
|
/* EXAM STAGE (Cyan/Info) */
|
|
.stage-item[data-stage="Exam"].completed .stage-icon,
|
|
.stage-item[data-stage="Exam"].active .stage-icon {
|
|
background-color: var(--stage-exam);
|
|
color: white;
|
|
}
|
|
.stage-item[data-stage="Exam"].active { color: var(--stage-exam); }
|
|
|
|
/* INTERVIEW STAGE (Yellow/Warning) */
|
|
.stage-item[data-stage="Interview"].completed .stage-icon,
|
|
.stage-item[data-stage="Interview"].active .stage-icon {
|
|
background-color: var(--stage-interview);
|
|
color: var(--kaauh-primary-text); /* Dark text for light background */
|
|
}
|
|
.stage-item[data-stage="Interview"].active { color: var(--stage-interview); }
|
|
|
|
/* OFFER STAGE (Green/Success) */
|
|
.stage-item[data-stage="Offer"].completed .stage-icon,
|
|
.stage-item[data-stage="Offer"].active .stage-icon {
|
|
background-color: var(--stage-offer);
|
|
color: white;
|
|
}
|
|
.stage-item[data-stage="Offer"].active { color: var(--stage-offer); }
|
|
|
|
/* ---------------- GENERIC ACTIVE/COMPLETED STYLING ---------------- */
|
|
|
|
/* Active State (Applies glow/scale to current stage) */
|
|
.stage-item.active .stage-icon {
|
|
box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.4);
|
|
transform: scale(1.1);
|
|
}
|
|
.stage-item.active .stage-count {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Completed State (Applies dark text color to completed stages) */
|
|
.stage-item.completed {
|
|
color: var(--kaauh-primary-text);
|
|
}
|
|
|
|
/* Connector Line */
|
|
.stage-connector {
|
|
flex-grow: 1;
|
|
height: 3px;
|
|
background-color: #e9ecef;
|
|
margin: 0 0.5rem;
|
|
position: relative;
|
|
top: -18px;
|
|
z-index: 1;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* Line in completed state (Kept the line teal/primary for consistency) */
|
|
.stage-connector.completed {
|
|
background-color: var(--kaauh-teal);
|
|
}
|
|
|
|
/* Labels and counts */
|
|
.stage-label {
|
|
font-size: 0.75rem;
|
|
margin-top: 0.4rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.stage-count {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
margin-top: 0.1rem;
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
|
|
|
|
|
|
<div class="container-fluid py-4">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'job_list' %}" class="text-secondary">Jobs</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page" class="text-secondary">Job Detail</li>
|
|
</ol>
|
|
</nav>
|
|
<div class="row g-4">
|
|
|
|
{# LEFT COLUMN: JOB DETAILS WITH TABS #}
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm no-hover">
|
|
|
|
{# HEADER SECTION #}
|
|
<div class="job-header-card d-flex justify-content-between align-items-center flex-wrap">
|
|
<div>
|
|
<h2 class="mb-1">{{ job.title }}</h2>
|
|
<small class="text-light">{% trans "JOB ID: "%}{{ job.internal_job_id }}</small>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge status-badge">
|
|
{% if job.status == "ACTIVE" %}
|
|
<span class="badge bg-success status-badge">
|
|
{% elif job.status == "DRAFT" %}
|
|
<span class="badge bg-secondary status-badge">
|
|
{% elif job.status == "CLOSED" %}
|
|
<span class="badge bg-warning status-badge">
|
|
{% elif job.status == "CANCELLED" %}
|
|
<span class="badge bg-danger status-badge">
|
|
{% elif job.status == "ARCHIVED" %}
|
|
<span class="badge bg-secondary status-badge">
|
|
{% else %}
|
|
<span class="badge bg-secondary status-badge">
|
|
{% endif %}
|
|
{{ job.get_status_display }}
|
|
<button type="button" class="btn btn-outline-light btn-sm ms-2" data-bs-toggle="modal" data-bs-target="#editStatusModal">
|
|
<i class="fas fa-edit text-primary"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{# LEFT TABS NAVIGATION #}
|
|
<ul class="nav nav-tabs" id="jobTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="true">
|
|
<i class="fas fa-info-circle me-1"></i> {% trans "Core Details" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="false">
|
|
<i class="fas fa-file-alt me-1"></i> {% trans "Description & Requirements" %}
|
|
</button>
|
|
</li>
|
|
{% if job.application_instructions %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="instructions-tab" data-bs-toggle="tab" data-bs-target="#instructions" type="button" role="tab" aria-controls="instructions" aria-selected="false">
|
|
<i class="fas fa-paper-plane me-1"></i> {% trans "Application" %}
|
|
</button>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
<div class="card-body">
|
|
<div class="tab-content" id="jobTabsContent">
|
|
|
|
{# TAB 1 CONTENT: CORE DETAILS #}
|
|
<div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
|
|
<h5 class="text-muted mb-3">{% trans "Administrative & Location" %}</h5>
|
|
<div class="row g-3 mb-4 border-bottom pb-3 small text-secondary">
|
|
<div class="col-md-6">
|
|
<i class="fas fa-building me-2 text-primary"></i> <strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<i class="fas fa-hashtag me-2 text-primary"></i> <strong>{% trans "Position No:" %}</strong> {{ job.position_number|default:"N/A" }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<i class="fas fa-briefcase me-2 text-primary"></i> <strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<i class="fas fa-map-pin me-2 text-primary"></i> <strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<i class="fas fa-globe me-2 text-primary"></i> <strong>{% trans "Location:" %}</strong> {{ job.get_location_display }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<i class="fas fa-user-tie me-2 text-primary"></i> <strong>{% trans "Created By:" %}</strong> {{ job.created_by|default:"N/A" }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<i class="fas fa-plus me-2 text-primary"></i> <strong>{% trans "Created At:" %}</strong> {{ job.created_at|default:"N/A" }}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<i class="fas fa-edit me-2 text-primary"></i> <strong>{% trans "Updated At:" %}</strong> {{ job.updated_at|default:"N/A" }}
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<button
|
|
type="button"
|
|
class="btn btn-outline-secondary"
|
|
id="copyJobLinkButton"
|
|
data-url="{{ job.application_url }}">
|
|
<i class="fas fa-link me-1"></i>
|
|
{% trans "Copy and Share Public Link" %}
|
|
</button>
|
|
|
|
<span id="copyFeedback" class="text-success ms-2 small" style="display:none;">
|
|
{% trans "Copied!" %}
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<h5 class="text-muted mb-3">{% trans "Financial & Timeline" %}</h5>
|
|
<div class="row g-3">
|
|
{% if job.salary_range %}
|
|
<div class="col-md-4">
|
|
<div class="deadline-box border-success">
|
|
<i class="fas fa-money-bill-wave me-2 text-success"></i>
|
|
<strong class="text-success">{% trans "Salary:" %}</strong> <span class="text-dark">{{ job.salary_range }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if job.start_date %}
|
|
<div class="col-md-4">
|
|
<div class="deadline-box border-info">
|
|
<i class="far fa-calendar-alt me-2 text-info"></i>
|
|
<strong class="text-info">{% trans "Start Date:" %}</strong> <span class="text-dark">{{ job.start_date }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if job.application_deadline %}
|
|
<div class="col-md-4">
|
|
<div class="deadline-box border-{% if job.is_expired %}danger{% else %}primary{% endif %} text-{% if job.is_expired %}danger{% else %}primary{% endif %}">
|
|
<i class="fas fa-calendar-times me-2"></i>
|
|
<strong>{% trans "Deadline:" %}</strong> <span class="text-dark">{{ job.application_deadline }}</span>
|
|
{% if job.is_expired %}
|
|
<span class="badge bg-danger ms-1">{% trans "EXPIRED" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{# TAB 2 CONTENT: DESCRIPTION & REQUIREMENTS #}
|
|
<div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
|
|
{% if job.description %}
|
|
<div class="mb-4">
|
|
<h5>{% trans "Job Description" %}</h5>
|
|
<div class="text-secondary">{{ job.description|safe }}</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if job.qualifications %}
|
|
<div class="mb-4">
|
|
<h5>{% trans "Required Qualifications" %}</h5>
|
|
<div class="text-secondary">{{ job.qualifications|safe }}</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if job.benefits %}
|
|
<div class="mb-4">
|
|
<h5>{% trans "Benefits" %}</h5>
|
|
<div class="text-secondary">{{ job.benefits|safe}}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# TAB 3 CONTENT: APPLICATION INSTRUCTIONS #}
|
|
{% if job.application_instructions %}
|
|
<div class="tab-pane fade" id="instructions" role="tabpanel" aria-labelledby="instructions-tab">
|
|
<div class="mb-4">
|
|
<h5>{% trans "Application Instructions" %}</h5>
|
|
<div class="text-secondary">{{ job.application_instructions|safe }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{# FOOTER ACTIONS #}
|
|
<div class="card-footer d-flex flex-wrap gap-2">
|
|
<a href="{% url 'job_update' job.slug %}" class="btn btn-main-action">
|
|
<i class="fas fa-edit"></i> {% trans "Edit Job" %}
|
|
</a>
|
|
|
|
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#myModalForm">
|
|
<i class="fas fa-image me-1"></i> {% trans "Upload Image for Post" %}
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# RIGHT COLUMN: TABBED CARDS #}
|
|
<div class="col-lg-4 ">
|
|
<div class="card shadow-sm no-hover mb-4">
|
|
<div class="card-body p-4">
|
|
<h6 class="text-muted mb-4">{% trans "Applicant Tracking" %}</h6>
|
|
<div class="progress-stages">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
|
|
{% comment %} STAGE 1: Applied {% endcomment %}
|
|
<a href="{% url 'job_candidates_list' job.slug %}?stage=Applied"
|
|
class="stage-item {% if current_stage == 'Applied' %}active{% endif %} {% if current_stage != 'Applied' and candidate.stage_history_has.Applied %}completed{% endif %}"
|
|
data-stage="Applied">
|
|
<div class="stage-icon">
|
|
<i class="fas fa-file-signature"></i>
|
|
</div>
|
|
<div class="stage-label">{% trans "Applied" %}</div>
|
|
<div class="stage-count">{{ applied_count|default:"0" }}</div>
|
|
</a>
|
|
|
|
{% comment %} CONNECTOR 1 -> 2 {% endcomment %}
|
|
<div class="stage-connector {% if current_stage != 'Applied' and candidate.stage_history_has.Exam %}completed{% endif %}"></div>
|
|
|
|
{% comment %} STAGE 2: Exam {% endcomment %}
|
|
<a href="{% url 'job_candidates_list' job.slug %}?stage=Exam"
|
|
class="stage-item {% if current_stage == 'Exam' %}active{% endif %} {% if current_stage != 'Exam' and candidate.stage_history_has.Exam %}completed{% endif %}"
|
|
data-stage="Exam">
|
|
<div class="stage-icon">
|
|
<i class="fas fa-clipboard-check"></i>
|
|
</div>
|
|
<div class="stage-label">{% trans "Exam" %}</div>
|
|
<div class="stage-count">{{ exam_count|default:"0" }}</div>
|
|
</a>
|
|
|
|
{% comment %} CONNECTOR 2 -> 3 {% endcomment %}
|
|
<div class="stage-connector {% if current_stage != 'Exam' and candidate.stage_history_has.Interview %}completed{% endif %}"></div>
|
|
|
|
{% comment %} STAGE 3: Interview {% endcomment %}
|
|
<a href="{% url 'job_candidates_list' job.slug %}?stage=Interview"
|
|
class="stage-item {% if current_stage == 'Interview' %}active{% endif %} {% if current_stage != 'Interview' and candidate.stage_history_has.Interview %}completed{% endif %}"
|
|
data-stage="Interview">
|
|
<div class="stage-icon">
|
|
<i class="fas fa-comments"></i>
|
|
</div>
|
|
<div class="stage-label">{% trans "Interview" %}</div>
|
|
<div class="stage-count">{{ interview_count|default:"0" }}</div>
|
|
</a>
|
|
|
|
{% comment %} CONNECTOR 3 -> 4 {% endcomment %}
|
|
<div class="stage-connector {% if current_stage != 'Interview' and candidate.stage_history_has.Offer %}completed{% endif %}"></div>
|
|
|
|
{% comment %} STAGE 4: Offer {% endcomment %}
|
|
<a href="{% url 'job_candidates_list' job.slug %}?stage=Offer"
|
|
class="stage-item {% if current_stage == 'Offer' %}active{% endif %} {% if current_stage != 'Offer' and candidate.stage_history_has.Offer %}completed{% endif %}"
|
|
data-stage="Offer">
|
|
<div class="stage-icon">
|
|
<i class="fas fa-handshake"></i>
|
|
</div>
|
|
<div class="stage-label">{% trans "Offer" %}</div>
|
|
<div class="stage-count">{{ offer_count|default:"0" }}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card shadow-sm no-hover" style="height:400px;">
|
|
|
|
{# RIGHT TABS NAVIGATION #}
|
|
<ul class="nav nav-tabs right-column-tabs" id="rightJobTabs" role="tablist">
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link active" id="applicants-tab" data-bs-toggle="tab" data-bs-target="#applicants-pane" type="button" role="tab" aria-controls="applicants-pane" aria-selected="true">
|
|
<i class="fas fa-users me-1 text-primary"></i> {% trans "Applicants" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link" id="manage-tab" data-bs-toggle="tab" data-bs-target="#manage-pane" type="button" role="tab" aria-controls="manage-pane" aria-selected="false">
|
|
<i class="fas fa-cogs me-1 text-secondary"></i> {% trans "Form Template" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item flex-fill" role="presentation">
|
|
<button class="nav-link" id="internal-tab" data-bs-toggle="tab" data-bs-target="#internal-pane" type="button" role="tab" aria-controls="internal-pane" aria-selected="false">
|
|
<i class="fas fa-info me-1 text-muted"></i> {% trans "Linkedin" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content mx-2 my-3" id="rightJobTabsContent">
|
|
|
|
{# TAB 1: APPLICANTS CONTENT #}
|
|
<div class="tab-pane fade show active" id="applicants-pane" role="tabpanel" aria-labelledby="applicants-tab">
|
|
<h5 class="mb-3">{% trans "Total Applicants" %} (<span id="total_candidates">{{ total_applicants }}</span>)</h5>
|
|
{% if total_applicants > 0 %}
|
|
<div class="row mb-4 applicant-stats">
|
|
<div class="col-4">
|
|
<div class="stat-item">
|
|
<div class="text-primary">{{ applied_count }}</div>
|
|
<small class="text-muted">{% trans "Applied" %}</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="stat-item">
|
|
<div class="text-info">{{ interview_count }}</div>
|
|
<small class="text-muted">{% trans "Interview" %}</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="stat-item">
|
|
<div class="text-success">{{ offer_count }}</div>
|
|
<small class="text-muted">{% trans "Offer" %}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mb-2">
|
|
<a href="{% url 'job_candidates_list' job.slug %}" class="btn btn-outline-secondary w-100">
|
|
{% trans "View All Applicants" %} ({{ total_applicants }})
|
|
</a>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
<div class="d-grid gap-2">
|
|
<a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
|
|
<i class="fas fa-user-plus"></i> {% trans "Create Applicant" %}
|
|
</a>
|
|
<a href="{% url 'candidate_tier_management' job.slug %}" class="btn btn-main-action">
|
|
<i class="fas fa-layer-group"></i> {% trans "Manage Applicants" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{# TAB 2: MANAGEMENT (LinkedIn & Forms) CONTENT #}
|
|
<div class="tab-pane fade" id="manage-pane" role="tabpanel" aria-labelledby="manage-tab">
|
|
|
|
{# LinkedIn Integration (Content from old card) #}
|
|
|
|
|
|
{# Applicant Form Management (Content from old card) #}
|
|
<h5 class="mb-3"><i class="fas fa-clipboard-list me-2 text-primary"></i>{% trans "Form Management" %}</h5>
|
|
<div class="d-grid gap-2">
|
|
<p class="text-muted small mb-3">
|
|
{% trans "Manage the custom application forms associated with this job posting." %}
|
|
</p>
|
|
|
|
{% if not job.form_template %}
|
|
<a href="{% url 'create_form_template' %}" class="btn btn-main-action">
|
|
<i class="fas fa-plus-circle me-2"></i> {% trans "Create New Form Template" %}
|
|
</a>
|
|
{% else %}
|
|
<a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-list-alt me-1"></i> {% trans "View Form Template" %}
|
|
</a>
|
|
{% endif %}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{# TAB 3: INTERNAL INFO CONTENT #}
|
|
<div class="tab-pane fade" id="internal-pane" role="tabpanel" aria-labelledby="internal-tab">
|
|
<h5 class="mb-3"><i class="fab fa-linkedin me-2 text-info"></i>{% trans "LinkedIn Integration" %}</h5>
|
|
<div class="mb-4">
|
|
{% if job.posted_to_linkedin %}
|
|
<div class="alert alert-success p-2 mb-3 small">
|
|
<i class="fas fa-check-circle me-1"></i> {% trans "Posted successfully!" %}
|
|
</div>
|
|
{% if job.linkedin_post_url %}
|
|
<a href="{{ job.linkedin_post_url }}" target="_blank" class="btn btn-main-action w-100 mb-2">
|
|
<i class="fab fa-linkedin me-1"></i> {% trans "View on LinkedIn" %}
|
|
</a>
|
|
{% endif %}
|
|
<small class="text-muted d-block text-center mb-3">
|
|
{% trans "Posted on:" %} {{ job.linkedin_posted_at|date:"M d, Y" }}
|
|
</small>
|
|
{% else %}
|
|
<p class="text-muted small mb-3">{% trans "This job has not been posted to LinkedIn yet." %}</p>
|
|
{% endif %}
|
|
|
|
<form method="post" action="{% url 'post_to_linkedin' job.slug %}" class="mt-2">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-main-action w-100"
|
|
{% if not request.session.linkedin_authenticated %}disabled{% endif %}>
|
|
<i class="fab fa-linkedin me-1"></i>
|
|
{% if job.posted_to_linkedin %}{% trans "Re-post to LinkedIn" %}{% else %}{% trans "Post to LinkedIn" %}{% endif %}
|
|
</button>
|
|
</form>
|
|
|
|
{% if not request.session.linkedin_authenticated %}
|
|
<small class="text-muted d-block mt-2 text-center">
|
|
{% trans "You need to" %} <a href="{% url 'linkedin_login' %}">{% trans "authenticate with LinkedIn" %}</a> {% trans "first." %}
|
|
</small>
|
|
{% endif %}
|
|
|
|
{% if job.linkedin_post_status and 'ERROR' in job.linkedin_post_status %}
|
|
<div class="alert alert-danger mt-3 p-2 small">
|
|
<i class="fas fa-exclamation-triangle me-1"></i>
|
|
<small>{% trans "Error:" %} {{ job.linkedin_post_status }}</small>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% comment %} {# Applicant Form Management (Content from old card) #}
|
|
<h5 class="mb-3"><i class="fas fa-clipboard-list me-2 text-primary"></i>{% trans "Form Management" %}</h5> {% endcomment %}
|
|
{% comment %} <div class="d-grid gap-2">
|
|
<p class="text-muted small mb-3">
|
|
{% trans "Manage the custom application forms associated with this job posting." %}
|
|
</p> {% endcomment %}
|
|
|
|
{% comment %} <a href="{% url 'create_form_template' %}" class="btn btn-main-action">
|
|
<i class="fas fa-plus-circle me-2"></i> {% trans "Create New Form" %}
|
|
</a>
|
|
|
|
<a href="" class="btn btn-outline-secondary">
|
|
<i class="fas fa-list-alt me-1"></i> {% trans "View All Existing Forms" %}
|
|
</a> {% endcomment %}
|
|
|
|
<a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
|
|
<i class="fas fa-user-plus"></i> {% trans "Create Candidate" %}
|
|
</a>
|
|
<a href="{% url 'candidate_screening_view' job.slug %}" class="btn btn-main-action">
|
|
<i class="fas fa-layer-group"></i> {% trans "Manage Tiers" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{# TAB 3: INTERNAL INFO CONTENT #}
|
|
<div class="tab-pane fade" id="internal-pane" role="tabpanel" aria-labelledby="internal-tab">
|
|
<h5 class="mb-3"><i class="fas fa-info-circle me-2 text-secondary"></i>{% trans "Internal Information" %}</h5>
|
|
<div class="small">
|
|
<p class="mb-1"><strong>{% trans "Internal Job ID:" %}</strong> {{ job.internal_job_id }}</p>
|
|
<p class="mb-1"><strong>{% trans "Created:" %}</strong> {{ job.created_at|date:"M d, Y" }}</p>
|
|
<p class="mb-1"><strong>{% trans "Last Updated:" %}</strong> {{ job.updated_at|date:"M d, Y" }}</p>
|
|
{% if job.reporting_to %}
|
|
<p class="mb-0"><strong>{% trans "Reports To:" %}</strong> {{ job.reporting_to }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<a href="{% url 'job_list' %}" class="btn btn-outline-secondary w-100">
|
|
<i class="fas fa-arrow-left"></i> {% trans "Back to Jobs" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--image modal class-->
|
|
{% include "jobs/partials/image_upload.html" %}
|
|
|
|
<!-- JOB STATUS MODAL-->
|
|
<div class="modal fade" id="editStatusModal" tabindex="-1" aria-labelledby="editStatusModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form method="post" action="{% url 'job_detail' slug=job.slug %}">
|
|
{% csrf_token %}
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editStatusModalLabel">{% trans "Edit Job Status" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
{% if status_form %}
|
|
<label for="{{ status_form.status.id_for_label }}" class="form-label">{% trans "Select New Status" %}</label>
|
|
{{ status_form.status }}
|
|
{% if status_form.status.errors %}
|
|
<div class="text-danger small mt-1">{{ status_form.status.errors }}</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="text-danger">{% trans "Status form not available. Please check your view." %}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary btn-lg" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<button type="submit" class="btn btn-main-action">{% trans "Save Changes" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block customJS%}
|
|
|
|
|
|
<script>
|
|
document.getElementById('copyJobLinkButton').addEventListener('click', function() {
|
|
// 1. Get the URL from the data attribute
|
|
const urlToCopy = this.getAttribute('data-url');
|
|
|
|
// 2. Use the modern Clipboard API
|
|
navigator.clipboard.writeText(urlToCopy).then(() => {
|
|
|
|
// 3. Show feedback message
|
|
const feedback = document.getElementById('copyFeedback');
|
|
feedback.style.display = 'inline';
|
|
|
|
// 4. Hide feedback after 2 seconds
|
|
setTimeout(() => {
|
|
feedback.style.display = 'none';
|
|
}, 2000);
|
|
|
|
}).catch(err => {
|
|
// Fallback for older browsers or security issues
|
|
console.error('Could not copy text: ', err);
|
|
alert("Copy failed. Please copy the URL manually: " + urlToCopy);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |