<!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>
