kaauh_ats/templates/jobs/job_detail.html
2025-10-08 19:28:06 +03:00

569 lines
28 KiB
HTML

{% extends "base.html" %}
{% load i18n static %}
{% block title %}{{ job.title }} - University ATS{% endblock %}
{% block customCSS %}
<style>
/* Custom styles for the Job Detail Page (using variables from base.html) */
:root {
--kaauh-teal: #00636e;
--kaauh-teal-dark: #004a53;
--kaauh-border: #eaeff3;
--kaauh-primary-text: #343a40;
}
/* 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;
}
/* Mapped color classes for status badges */
.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; }
/* 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 (used for single cards or fallback) */
.card-header {
font-weight: 600;
padding: 1rem 1.25rem;
background-color: #f8f9fa; /* Light background */
border-bottom: 1px solid var(--kaauh-border);
}
.card-header h5 {
font-weight: 600;
color: var(--kaauh-primary-text);
}
.card-footer {
padding: 1rem 1.25rem;
background-color: #f8f9fa;
border-top: 1px solid var(--kaauh-border);
}
/* Left Column Tabs Theming (main details) */
.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:hover {
color: var(--kaauh-teal);
border-color: #e9ecef;
background-color: #fff;
}
.nav-tabs .nav-link.active {
color: var(--kaauh-teal-dark);
background-color: white;
border-bottom: 3px solid var(--kaauh-teal);
font-weight: 600;
}
/* ==================================== */
/* RIGHT COLUMN TABS STYLING (IMPROVED) */
/* ==================================== */
.right-column-tabs {
/* Use the .card wrapper for the main structure */
padding: 0;
margin-bottom: 0;
border-bottom: 1px solid var(--kaauh-border);
}
.right-column-tabs .nav-tabs {
padding: 0;
margin-bottom: 0;
border-bottom: none;
background-color: transparent;
display: flex; /* Ensure the nav-items take up equal space */
}
.right-column-tabs .nav-item {
flex-grow: 1;
text-align: center;
}
.right-column-tabs .nav-link {
/* Base style for all right column tabs */
padding: 0.9rem 1rem; /* Slightly larger padding for better spacing */
font-size: 0.95rem;
font-weight: 600;
color: var(--kaauh-primary-text);
border-radius: 0;
border-right: 1px solid var(--kaauh-border);
border-bottom: 1px solid var(--kaauh-border); /* Separator line */
background-color: #f8f9fa; /* Subtle background for non-active tabs */
}
.right-column-tabs .nav-item:last-child .nav-link {
border-right: none;
}
/* Active Tab */
.right-column-tabs .nav-link.active {
background-color: white; /* Lift the active tab */
color: var(--kaauh-teal-dark);
border-bottom: 3px solid var(--kaauh-teal); /* Strong accent */
border-right-color: transparent; /* Clean up border next to it */
margin-bottom: -1px; /* Overlap the border for a cleaner look */
}
/* Hover state for non-active tabs */
.right-column-tabs .nav-link:not(.active):hover {
background-color: #f0f4f7; /* Darken slightly on hover */
color: var(--kaauh-teal);
}
.right-column-tabs .tab-content {
padding: 1.5rem 1.25rem; /* Increased padding inside the content for breathing room */
background-color: white;
}
/* Section styling */
.job-section h5 {
color: var(--kaauh-teal);
font-weight: 700;
margin-bottom: 0.75rem;
font-size: 1.25rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--kaauh-border);
}
/* 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;
}
/* Primary Color Overrides */
.text-primary { color: var(--kaauh-teal) !important; }
.text-info { color: #17a2b8 !important; }
.text-success { color: #28a745 !important; }
.text-secondary { color: #6c757d !important; }
/* 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;
}
.btn-main-action:hover {
background-color: var(--kaauh-teal-dark);
border-color: var(--kaauh-teal-dark);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* Secondary outline button (for forms/back links) */
.btn-outline-secondary {
color: var(--kaauh-teal-dark);
border-color: var(--kaauh-teal);
}
.btn-outline-secondary:hover {
background-color: var(--kaauh-teal-dark);
color: white;
border-color: var(--kaauh-teal-dark);
}
/* Specific styling for the deadline box */
.deadline-box {
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid;
}
/* Table styling for the Applicant preview */
.table-applicants tbody tr:hover {
background-color: #f3f9f9; /* Light teal hover for rows */
}
.table-applicants td {
border-top: 1px solid var(--kaauh-border);
}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid py-4">
<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">
<h2>{{ job.title }}</h2>
<span class="badge bg-{{ job.status|lower|striptags|yesno:'success,warning,secondary,danger' }} status-badge">
{{ job.get_status_display }}
</span>
</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>
<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>
{% if job.application_url %}
<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>
{% endif %}
</div>
</div>
</div>
{# RIGHT COLUMN: TABBED CARDS #}
<div class="col-lg-4">
<div class="card shadow-sm no-hover">
{# 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 "Manage" %}
</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 "Info" %}
</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 "Candidates" %} (<span id="total_candidates">{{ total_candidates }}</span>)</h5>
{% if total_candidates > 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="table-responsive small">
<table class="table table-sm table-hover mb-0 table-applicants">
<tbody>
{% for candidate in candidates|slice:":5" %}
<tr>
<td>
<strong>{{ candidate.first_name }} {{ candidate.last_name }}</strong>
</td>
<td>
<span class="badge bg-{% if candidate.stage == 'Applied' %}success{% elif candidate.stage == 'Interview' %}info{% elif candidate.stage == 'Offer' %}success{% else %}secondary{% endif %}">
{{ candidate.stage }}
</span>
</td>
<td class="text-end">
<a href="{% url 'candidate_detail' candidate.slug %}" class="btn btn-sm btn-outline-secondary py-0 px-2">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if candidates|length > 5 %}
<div class="text-center mt-3">
<a href="{% url 'job_candidates_list' job.slug %}" class="btn btn-sm btn-outline-secondary">
{% trans "View All Applicants" %} ({{ total_candidates }})
</a>
</div>
{% endif %}
{% else %}
<div class="text-center py-4">
<i class="fas fa-user-slash fa-3x text-muted mb-3"></i>
<h6 class="text-muted">{% trans "No applicants yet" %}</h6>
<p class="text-muted small">{% trans "Candidates will appear here once they apply for this position." %}</p>
</div>
{% endif %}
</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) #}
<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>
{# 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>
<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>
<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>
</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>
{% include "jobs/partials/image_upload.html" %}
{% endblock %}