926 lines
37 KiB
HTML
926 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
{% load i18n %}
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ candidate.resume_data.full_name|default:"Candidate" }} - Candidate Profile</title>
|
|
<!-- Use a modern icon set -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<style>
|
|
/* --- Color Variables --- */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-light-bg: #f9fbfd;
|
|
--kaauh-border: #eaeff3;
|
|
--score-green: #10b981;
|
|
--score-yellow: #f59e0b;
|
|
--score-red: #ef4444;
|
|
--cert-gold: #d97706;
|
|
|
|
--color-white: #ffffff;
|
|
--color-gray-100: #f3f4f6;
|
|
--color-gray-200: #e5e7eb;
|
|
--color-gray-500: #6b7280;
|
|
--color-gray-600: #4b5563;
|
|
--color-gray-700: #374151;
|
|
--color-gray-800: #1f2937;
|
|
--color-gray-900: #111827;
|
|
}
|
|
|
|
/* --- General Layout and Typography --- */
|
|
body {
|
|
background-color: var(--kaauh-light-bg);
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1280px; /* max-w-7xl */
|
|
margin: 0 auto;
|
|
padding: 1rem; /* p-4 */
|
|
}
|
|
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem; /* gap-6 */
|
|
}
|
|
|
|
/* Responsive Layout for large screens (lg:grid-cols-3) */
|
|
@media (min-width: 1024px) {
|
|
.content-grid {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
}
|
|
|
|
/* --- Card Styles --- */
|
|
.card-section {
|
|
background-color: var(--color-white);
|
|
border-radius: 0.75rem; /* rounded-xl */
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
|
|
padding: 1.5rem; /* p-6 */
|
|
border: 1px solid var(--kaauh-border);
|
|
margin-bottom: 1.5rem; /* space-y-6 */
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem; /* text-2xl */
|
|
font-weight: bold;
|
|
color: var(--color-gray-800);
|
|
margin-bottom: 1rem; /* mb-4 */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-title i {
|
|
color: var(--kaauh-teal);
|
|
margin-right: 0.75rem; /* mr-3 */
|
|
}
|
|
|
|
/* --- Header Section --- */
|
|
.header-box {
|
|
background: linear-gradient(145deg, var(--kaauh-teal), var(--kaauh-teal-dark));
|
|
color: var(--color-white);
|
|
padding: 2rem; /* p-8 */
|
|
border-radius: 0.75rem; /* rounded-xl */
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
|
|
margin-bottom: 1.5rem; /* mb-6 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.header-box {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.header-info h1 {
|
|
font-size: 2.25rem; /* text-4xl */
|
|
font-weight: 800; /* font-extrabold */
|
|
margin-bottom: 0.25rem; /* mb-1 */
|
|
}
|
|
|
|
.header-info p {
|
|
font-size: 1.25rem; /* text-xl */
|
|
color: rgba(204, 251, 252, 0.9); /* text-teal-100 */
|
|
margin-bottom: 1rem; /* mb-4 */
|
|
}
|
|
|
|
.contact-details {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem; /* gap-6 */
|
|
font-size: 0.875rem; /* text-sm */
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.contact-item i {
|
|
margin-right: 0.5rem; /* mr-2 */
|
|
}
|
|
|
|
.contact-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Match Score Box */
|
|
.score-box {
|
|
background-color: rgba(255, 255, 255, 0.2); /* bg-white bg-opacity-20 */
|
|
border-radius: 0.75rem;
|
|
padding: 1rem; /* p-4 */
|
|
text-align: center;
|
|
width: 8rem; /* w-32 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* shadow-inner */
|
|
}
|
|
|
|
.score-value {
|
|
font-size: 2.25rem; /* text-4xl */
|
|
font-weight: bold;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.score-text {
|
|
font-size: 0.875rem; /* text-sm */
|
|
}
|
|
|
|
.assessment-rating {
|
|
font-size: 0.75rem; /* text-xs */
|
|
margin-top: 0.25rem; /* mt-1 */
|
|
font-weight: 600; /* font-semibold */
|
|
}
|
|
|
|
/* --- Dynamic Color Classes (Match Score) --- */
|
|
.score-red { color: var(--score-red); }
|
|
.score-yellow { color: var(--score-yellow); }
|
|
.score-green { color: var(--score-green); }
|
|
.text-green-check { color: var(--score-green); }
|
|
.text-yellow-exclaim { color: var(--score-yellow); }
|
|
.text-red-x { color: var(--score-red); }
|
|
|
|
|
|
/* --- Summary Section --- */
|
|
.summary-text {
|
|
color: var(--color-gray-700);
|
|
line-height: 1.625; /* leading-relaxed */
|
|
border-left: 4px solid var(--kaauh-teal-dark);
|
|
padding-left: 1rem; /* pl-4 */
|
|
}
|
|
|
|
/* --- Experience Section --- */
|
|
.experience-item {
|
|
margin-bottom: 1.5rem; /* mb-6 */
|
|
padding-bottom: 1.5rem; /* pb-6 */
|
|
border-bottom: 1px solid var(--color-gray-100);
|
|
}
|
|
|
|
.experience-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.experience-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 0.5rem; /* mb-2 */
|
|
}
|
|
|
|
.experience-header h3 {
|
|
font-size: 1.25rem; /* text-xl */
|
|
font-weight: bold;
|
|
color: var(--color-gray-800);
|
|
}
|
|
|
|
.experience-header p {
|
|
color: var(--kaauh-teal);
|
|
font-weight: 600; /* font-semibold */
|
|
}
|
|
|
|
.experience-tag {
|
|
background-color: var(--kaauh-light-bg);
|
|
color: var(--kaauh-teal);
|
|
padding: 0.25rem 0.75rem; /* px-3 py-1 */
|
|
border-radius: 9999px; /* rounded-full */
|
|
font-size: 0.875rem; /* text-sm */
|
|
font-weight: 500; /* font-medium */
|
|
border: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
.experience-meta {
|
|
color: var(--color-gray-600);
|
|
margin-bottom: 0.75rem; /* mb-3 */
|
|
font-size: 0.875rem; /* text-sm */
|
|
}
|
|
|
|
.experience-meta i {
|
|
margin-right: 0.5rem; /* mr-2 */
|
|
}
|
|
|
|
.experience-meta span {
|
|
margin-left: 1rem; /* ml-4 */
|
|
}
|
|
|
|
.achievement-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
.achievement-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.achievement-list i {
|
|
color: var(--kaauh-teal-dark);
|
|
margin-top: 0.25rem; /* mt-1 */
|
|
margin-right: 0.5rem; /* mr-2 */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* --- Education Section --- */
|
|
.education-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--color-gray-100);
|
|
transition: background-color 0.15s ease-in-out; /* transition duration-150 */
|
|
padding: 0.5rem; /* p-2 */
|
|
margin: -0.5rem; /* -m-2 */
|
|
border-radius: 0.5rem; /* rounded-lg */
|
|
}
|
|
|
|
.education-item:hover {
|
|
background-color: var(--kaauh-light-bg); /* hover:bg-kaauh-light-bg */
|
|
}
|
|
|
|
.education-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.icon-badge {
|
|
background-color: #e0f2f7; /* teal-100 */
|
|
padding: 0.75rem; /* p-3 */
|
|
border-radius: 9999px;
|
|
margin-right: 1rem; /* mr-4 */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon-badge i {
|
|
color: var(--kaauh-teal);
|
|
}
|
|
|
|
.education-details {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.education-details h3 {
|
|
font-size: 1.125rem; /* text-lg */
|
|
font-weight: bold;
|
|
color: var(--color-gray-800);
|
|
}
|
|
|
|
.education-details p {
|
|
color: var(--kaauh-teal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.education-details .meta {
|
|
color: var(--color-gray-600);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.education-details .meta i {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* --- Projects Section --- */
|
|
.project-item {
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--color-gray-100);
|
|
}
|
|
|
|
.project-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.project-item h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: bold;
|
|
color: var(--color-gray-800);
|
|
}
|
|
|
|
.project-item .description {
|
|
color: var(--color-gray-600);
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem; /* gap-2 */
|
|
}
|
|
|
|
.tag-item {
|
|
background-color: #e0f2f7; /* bg-teal-100 */
|
|
color: var(--kaauh-teal);
|
|
padding: 0.25rem 0.75rem; /* px-3 py-1 */
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem; /* text-xs */
|
|
font-weight: 500;
|
|
border: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
/* --- Analysis Section --- */
|
|
.analysis-summary {
|
|
background-color: #fffbeb; /* bg-yellow-50 */
|
|
border-left: 4px solid var(--score-yellow);
|
|
padding: 1rem; /* p-4 */
|
|
border-radius: 0 0.5rem 0.5rem 0; /* rounded-r-lg */
|
|
}
|
|
|
|
.analysis-summary h3 {
|
|
font-weight: 600;
|
|
color: #b45309; /* text-yellow-800 */
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.analysis-summary p {
|
|
color: #a16207; /* text-yellow-700 */
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.analysis-metric, .criteria-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 0.25rem;
|
|
border-bottom: 1px solid var(--color-gray-100);
|
|
}
|
|
|
|
.analysis-metric:last-child, .criteria-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.metric-label {
|
|
color: var(--color-gray-600);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.metric-label i {
|
|
margin-right: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: var(--kaauh-teal);
|
|
}
|
|
|
|
.metric-value {
|
|
font-weight: bold;
|
|
color: var(--color-gray-900);
|
|
}
|
|
|
|
.metric-title {
|
|
font-weight: 500;
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.progress-container {
|
|
width: 100%;
|
|
background-color: var(--color-gray-200);
|
|
border-radius: 9999px;
|
|
height: 0.75rem; /* h-3 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 0.75rem;
|
|
border-radius: 9999px;
|
|
transition: width 1s ease-in-out;
|
|
}
|
|
|
|
/* Language fluency bar */
|
|
.language-bar {
|
|
height: 0.5rem;
|
|
border-radius: 9999px;
|
|
background-color: var(--kaauh-teal);
|
|
}
|
|
|
|
/* --- Strength/Weakness/Flag Boxes --- */
|
|
.narrative-box {
|
|
padding-top: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.red-flag-box {
|
|
border-top: 1px solid #fee2e2; /* border-red-100 */
|
|
}
|
|
|
|
.strength-box {
|
|
border-top: 1px solid #d1fae5; /* border-green-100 */
|
|
}
|
|
|
|
.flag-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.flag-title i {
|
|
margin-right: 0.5rem;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.flag-title.red { color: #b91c1c; } /* text-red-700 */
|
|
.flag-title.green { color: #065f46; } /* text-green-700 */
|
|
|
|
.flag-title.red i { color: #ef4444; } /* text-red-500 */
|
|
|
|
.narrative-text {
|
|
color: var(--color-gray-700);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* --- Keywords Section --- */
|
|
.keyword-tag {
|
|
background-color: #e0f2f7; /* bg-teal-100 */
|
|
color: var(--kaauh-teal-dark);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border: 1px solid var(--kaauh-border);
|
|
}
|
|
|
|
.cultural-tag {
|
|
background-color: #f3e8ff; /* bg-purple-100 */
|
|
color: #6b21a8; /* text-purple-800 */
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.keyword-subheader {
|
|
font-weight: 600;
|
|
color: var(--color-gray-700);
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.keyword-subheader i {
|
|
margin-right: 0.5rem;
|
|
color: var(--kaauh-teal);
|
|
}
|
|
|
|
/* Specific Fixes */
|
|
.max-w-50-percent {
|
|
max-width: 50%;
|
|
}
|
|
|
|
/* Animation Re-implementation */
|
|
@keyframes fade-in-grow {
|
|
from { width: 0%; }
|
|
}
|
|
|
|
.progress-bar-animated {
|
|
animation: fade-in-grow 1s ease-in-out forwards;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body class="bg-kaauh-light-bg font-sans">
|
|
|
|
<div class="container container-fluid flex-grow-1" style="max-width: 1600px; margin: 0 auto;">
|
|
|
|
{% include 'recruitment/partials/ai_overview_breadcromb.html' %}
|
|
<!-- Header Section -->
|
|
<header class="header-box">
|
|
<div class="header-info">
|
|
<h1>{{ candidate.resume_data.full_name|default:"Candidate Name" }}</h1>
|
|
<p>{{ candidate.resume_data.current_title|default:"Professional Title" }}</p>
|
|
<div class="contact-details">
|
|
<div class="contact-item">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>{{ candidate.resume_data.location|default:"Location" }}</span>
|
|
</div>
|
|
<!-- Displaying the raw contact string (which contains both phone and email in the example) -->
|
|
<div class="contact-item">
|
|
<i class="fas fa-id-card"></i>
|
|
<span title="Contact Information: Phone and Email">{{ candidate.resume_data.contact|default:"Contact Information" }}</span>
|
|
</div>
|
|
<!-- GitHub and LinkedIn links for quick access (null in example but included for completeness) -->
|
|
{% if candidate.resume_data.linkedin %}
|
|
<div class="contact-item">
|
|
|
|
<a href="{{ candidate.resume_data.linkedin }}" target="_blank"><i class="fab fa-linkedin text-white"></i></a>
|
|
</div>
|
|
{% endif %}
|
|
{% if candidate.resume_data.github %}
|
|
<div class="contact-item">
|
|
|
|
<a href="{{ candidate.resume_data.github }}" target="_blank"><i class="fab fa-github text-white"></i></a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="score-box">
|
|
<div class="score-value">{{ candidate.analysis_data.match_score|default:0 }}%</div>
|
|
<div class="score-text">Match Score</div>
|
|
<div class="assessment-rating
|
|
{% if candidate.analysis_data.match_score|default:0 < 50 %}score-red{% elif candidate.analysis_data.match_score|default:0 < 75 %}score-yellow{% else %}score-green{% endif %}">
|
|
<!-- scoring_data.screening_stage_rating -->
|
|
{{ candidate.analysis_data.screening_stage_rating|default:"Assessment" }}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="content-grid">
|
|
<!-- Left Column: Primary Content -->
|
|
<div class="space-y-6">
|
|
|
|
<!-- Summary Section -->
|
|
<section class="card-section">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-user-circle"></i>
|
|
Summary
|
|
</h2>
|
|
<p class="summary-text">
|
|
<!-- candidate.resume_data.summary, falling back to scoring_data.job_fit_narrative -->
|
|
{{ candidate.resume_data.summary|default:"Professional summary not available." }}
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Experience Section -->
|
|
<section class="card-section">
|
|
<h2 class="section-title" style="margin-bottom: 1.5rem;">
|
|
<i class="fas fa-briefcase"></i>
|
|
Experience
|
|
</h2>
|
|
{% for experience in candidate.resume_data.experience %}
|
|
<div class="experience-item">
|
|
<div class="experience-header">
|
|
<div>
|
|
<h3>{{ experience.job_title }}</h3>
|
|
<p>{{ experience.company }}</p>
|
|
</div>
|
|
<span class="experience-tag">
|
|
{% if experience.end_date == "Present" %}Present{% else %}{{ experience.end_date|default:"Current" }}{% endif %}
|
|
</span>
|
|
</div>
|
|
<p class="experience-meta">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
{% if experience.start_date %}{{ experience.start_date }}{% endif %} -
|
|
{% if experience.end_date and experience.end_date != "Present" %}{{ experience.end_date }}{% else %}Present{% endif %}
|
|
<!-- candidate.resume_data.experience[].location -->
|
|
{% if experience.location %}<span style="margin-left: 1rem;"><i class="fas fa-map-pin"></i>{{ experience.location }}</span>{% endif %}
|
|
</p>
|
|
{% if experience.key_achievements %}
|
|
<ul class="achievement-list">
|
|
{% for achievement in experience.key_achievements %}
|
|
<li><i class="fas fa-caret-right"></i>{{ achievement }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<!-- Education Section -->
|
|
<section class="card-section">
|
|
<h2 class="section-title" style="margin-bottom: 1.5rem;">
|
|
<i class="fas fa-graduation-cap"></i>
|
|
Education
|
|
</h2>
|
|
{% for education in candidate.resume_data.education %}
|
|
<div class="education-item">
|
|
<div class="icon-badge">
|
|
<i class="fas fa-certificate"></i>
|
|
</div>
|
|
<div class="education-details">
|
|
<h3>{{ education.degree }}</h3>
|
|
<p>{{ education.institution }}</p>
|
|
{% if education.year %}
|
|
<p class="meta"><i class="fas fa-calendar-alt"></i> {{ education.year }}</p>
|
|
{% endif %}
|
|
{% if education.gpa %}
|
|
<p class="meta"><i class="fas fa-award"></i> GPA: {{ education.gpa }}</p>
|
|
{% endif %}
|
|
<!-- candidate.resume_data.education[].relevant_courses -->
|
|
{% if education.relevant_courses %}
|
|
<p class="meta" style="margin-top: 0.25rem;">Courses: {{ education.relevant_courses|join:", " }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section class="card-section">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-project-diagram"></i>
|
|
Projects
|
|
</h2>
|
|
{% for project in candidate.resume_data.projects %}
|
|
<div class="project-item">
|
|
<h3>{{ project.name }}</h3>
|
|
<p class="description">{{ project.brief_description }}</p>
|
|
{% if project.technologies_used %}
|
|
<div class="tag-list">
|
|
{% for tech in project.technologies_used %}
|
|
<span class="tag-item">{{ tech }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% if not candidate.resume_data.projects %}
|
|
<p style="color: var(--color-gray-500); font-size: 0.875rem;">No projects detailed in the resume.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<!-- Keywords Section (NOW IN THE LEFT COLUMN) -->
|
|
{% if candidate.analysis_data.top_3_keywords or candidate.analysis_data.cultural_fit_keywords %}
|
|
<section class="card-section" style="margin-top: 0;">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-tags"></i>
|
|
Keywords
|
|
</h2>
|
|
|
|
{% if candidate.analysis_data.top_3_keywords %}
|
|
<div style="margin-bottom: 1rem;">
|
|
<h3 class="keyword-subheader"><i class="fas fa-key"></i>Top Keywords (Job Match)</h3>
|
|
<div class="tag-list">
|
|
<!-- scoring_data.top_3_keywords -->
|
|
{% for keyword in candidate.analysis_data.top_3_keywords %}
|
|
<span class="keyword-tag">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.cultural_fit_keywords %}
|
|
<div>
|
|
<h3 class="keyword-subheader"><i class="fas fa-users"></i>Cultural Fit Keywords</h3>
|
|
<div class="tag-list">
|
|
<!-- scoring_data.cultural_fit_keywords -->
|
|
{% for keyword in candidate.analysis_data.cultural_fit_keywords %}
|
|
<span class="cultural-tag">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Right Column: Skills & Analysis -->
|
|
<div class="space-y-6">
|
|
<!-- Analysis Section -->
|
|
<section class="card-section">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-chart-line"></i>
|
|
Analysis
|
|
</h2>
|
|
|
|
{% if candidate.analysis_data.category %}
|
|
<div class="analysis-metric" style="margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-gray-100);">
|
|
<span class="metric-title">Target Role Category:</span>
|
|
<!-- scoring_data.category -->
|
|
<span class="metric-value" style="color: var(--kaauh-teal);">{{ candidate.analysis_data.category }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{% if candidate.analysis_data.red_flags %}
|
|
<div class="narrative-box">
|
|
<h3 class="flag-title red"><i class="fas fa-flag"></i>Red Flags</h3>
|
|
<!-- scoring_data.red_flags -->
|
|
<p class="narrative-text">{{ candidate.analysis_data.red_flags|join:". "|default:"None." }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.strengths %}
|
|
<div class="narrative-box strength-box">
|
|
<h3 class="flag-title green"><i class="fas fa-circle-check"></i>Strengths</h3>
|
|
<!-- scoring_data.strengths -->
|
|
<p class="narrative-text">{{ candidate.analysis_data.strengths }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.weaknesses %}
|
|
<div class="narrative-box" style="margin-bottom: 1rem;">
|
|
<h3 class="flag-title red"><i class="fas fa-triangle-exclamation"></i>Weaknesses</h3>
|
|
<!-- scoring_data.weaknesses -->
|
|
<p class="narrative-text">{{ candidate.analysis_data.weaknesses }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.recommendation %}
|
|
<div class="analysis-summary">
|
|
<h3 style="font-size: 0.875rem;">Recommendation</h3>
|
|
<!-- scoring_data.recommendation -->
|
|
<p style="font-size: 0.875rem;">{{ candidate.analysis_data.recommendation }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<!-- Criteria Checklist Section -->
|
|
{% if candidate.analysis_data.criteria_checklist %}
|
|
<section class="card-section">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-list-check"></i>
|
|
Required Criteria Check
|
|
</h2>
|
|
<div style="margin-top: 0.75rem;">
|
|
{% for criterion, status in candidate.analysis_data.criteria_checklist.items %}
|
|
<div class="criteria-item">
|
|
<span class="text-gray-700">{{ criterion }}</span>
|
|
<span class="metric-value" style="font-size: 0.875rem;">
|
|
{% if status == 'Met' %}<span class="text-green-check"><i class="fas fa-check-circle"></i> Met</span>
|
|
{% elif status == 'Not Mentioned' %}<span class="text-yellow-exclaim"><i class="fas fa-exclamation-circle"></i> Not Mentioned</span>
|
|
{% else %}<span class="text-red-x"><i class="fas fa-times-circle"></i> {{ status }}</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Skills Section -->
|
|
<section class="card-section">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-tools"></i>
|
|
Skills
|
|
</h2>
|
|
{% if candidate.resume_data.skills %}
|
|
{% for category, skills in candidate.resume_data.skills.items %}
|
|
<div style="margin-bottom: 1rem;">
|
|
<!-- candidate.resume_data.skills -->
|
|
<h3 class="keyword-subheader" style="color: var(--color-gray-700);"><i class="fas fa-list-alt" style="color: transparent;"></i>{{ category|cut:"_"|title }}</h3>
|
|
<div class="tag-list">
|
|
{% for skill in skills %}
|
|
<span class="tag-item" style="color: var(--kaauh-teal-dark);">{{ skill }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p style="color: var(--color-gray-500); font-size: 0.875rem;">Skills information not available.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<!-- Languages Section -->
|
|
<section class="card-section">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-language"></i>
|
|
Languages
|
|
</h2>
|
|
{% if candidate.analysis_data.language_fluency %}
|
|
{% for language in candidate.analysis_data.language_fluency %}
|
|
<div style="margin-bottom: 0.75rem;">
|
|
<div class="analysis-metric" style="margin-bottom: 0.25rem; border-bottom: none;">
|
|
<!-- scoring_data.language_fluency -->
|
|
<span class="metric-title">{{ language }}</span>
|
|
</div>
|
|
<div class="progress-container" style="height: 0.5rem;">
|
|
{% with fluency_check=language|lower %}
|
|
<div class="language-bar"
|
|
style="width: {% if 'native' in fluency_check %}100{% elif 'fluent' in fluency_check %}85{% elif 'intermediate' in fluency_check %}50{% elif 'basic' in fluency_check %}25{% else %}10{% endif %}%">
|
|
</div>
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p style="color: var(--color-gray-500); font-size: 0.875rem;">Language information not available.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
|
|
<!-- Key Metrics -->
|
|
<section class="card-section">
|
|
<h2 class="section-title">
|
|
<i class="fas fa-chart-pie"></i>
|
|
Key Metrics
|
|
</h2>
|
|
<div style="margin-top: 0.75rem;">
|
|
{% if candidate.analysis_data.min_req_met_bool is not none %}
|
|
<div class="analysis-metric">
|
|
<span class="metric-label"><i class="fas fa-shield-halved"></i>Min Requirements Met:</span>
|
|
<!-- scoring_data.min_req_met_bool -->
|
|
<span class="metric-value {% if candidate.analysis_data.min_req_met_bool %}text-green-check{% else %}text-red-x{% endif %}">
|
|
{% if candidate.analysis_data.min_req_met_bool %}<i class="fas fa-check-circle"></i> Yes{% else %}<i class="fas fa-times-circle"></i> No{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.years_of_experience is not none %}
|
|
<div class="analysis-metric">
|
|
<span class="metric-label"><i class="fas fa-clock"></i>Total Experience:</span>
|
|
<!-- scoring_data.years_of_experience -->
|
|
<span class="metric-value">{{ candidate.analysis_data.years_of_experience|floatformat:1 }} years</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.most_recent_job_title %}
|
|
<div class="analysis-metric">
|
|
<span class="metric-label"><i class="fas fa-id-badge"></i>Most Recent Title (Scoring):</span>
|
|
<!-- scoring_data.most_recent_job_title (explicitly added) -->
|
|
<span class="metric-value max-w-50-percent" style="text-align: right;">{{ candidate.analysis_data.most_recent_job_title }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.seniority_level_match is not none %}
|
|
<div class="analysis-metric">
|
|
<span class="metric-label"><i class="fas fa-user-tie"></i>Seniority Match:</span>
|
|
<!-- scoring_data.seniority_level_match -->
|
|
<span class="metric-value">{{ candidate.analysis_data.seniority_level_match|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.soft_skills_score is not none %}
|
|
<div class="analysis-metric">
|
|
<span class="metric-label"><i class="fas fa-handshake"></i>Soft Skills Score:</span>
|
|
<!-- scoring_data.soft_skills_score -->
|
|
<span class="metric-value">{{ candidate.analysis_data.soft_skills_score|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.employment_stability_score is not none %}
|
|
<div class="analysis-metric">
|
|
<span class="metric-label"><i class="fas fa-anchor"></i>Stability Score:</span>
|
|
<!-- scoring_data.employment_stability_score -->
|
|
<span class="metric-value">{{ candidate.analysis_data.employment_stability_score|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if candidate.analysis_data.experience_industry_match is not none %}
|
|
<div class="analysis-metric" style="border-bottom: none; padding-bottom: 0;">
|
|
<span class="metric-label"><i class="fas fa-industry"></i>Industry Match:</span>
|
|
<!-- scoring_data.experience_industry_match -->
|
|
<span class="metric-value">{{ candidate.analysis_data.experience_industry_match|default:0 }}/100</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if candidate.analysis_data.transferable_skills_narrative %}
|
|
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-gray-100); font-size: 0.875rem; color: var(--color-gray-500);">
|
|
<i class="fas fa-puzzle-piece" style="margin-right: 0.25rem;"></i> Transferable Skills:
|
|
<!-- scoring_data.transferable_skills_narrative -->
|
|
{{ candidate.analysis_data.transferable_skills_narrative }}
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Simple progress bar animation
|
|
window.addEventListener('load', () => {
|
|
const progressBars = document.querySelectorAll('.progress-bar');
|
|
progressBars.forEach(bar => {
|
|
// The width is already set in the style attribute via DTL
|
|
const width = bar.style.width;
|
|
// Temporarily set to 0 to prepare for animation
|
|
bar.style.width = '0%';
|
|
// Add class to trigger CSS animation defined in the style block
|
|
bar.classList.add('progress-bar-animated');
|
|
});
|
|
|
|
// Note: The progress-bar-animated class with the CSS keyframe will handle the width transition.
|
|
// The original setTimeout logic is replaced by the CSS animation for smoother performance.
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|