{% extends "base.html" %}
{% load static i18n humanize %}

{% block title %}{{ application.name }} - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
    /* Card Hover Effects */
    .detail-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .detail-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
    
    /* Tab Button Effects */
    .tab-btn {
        transition: all 0.2s ease;
    }
    
    .tab-btn:hover {
        background-color: rgba(157, 34, 53, 0.05);
    }
    
    .tab-btn.active {
        border-bottom-color: #9d2235;
        color: #9d2235;
        background-color: #ffffff;
    }
    
    /* Button Hover Effects */
    .btn-action {
        transition: all 0.2s ease;
    }
    
    .btn-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .btn-primary {
        transition: all 0.2s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(157, 34, 53, 0.4);
    }
    
    /* Timeline Animation */
    .timeline-item {
        transition: all 0.2s ease;
    }
    
    .timeline-item:hover {
        transform: translateX(4px);
    }
    
    /* Info Card Animation */
    .info-card {
        transition: all 0.2s ease;
    }
    
    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    /* Progress Bar Animation */
    .progress-bar {
        transition: width 0.5s ease;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">

    {# Breadcrumb #}
    <nav class="mb-6" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm">
            <li><a href="{% url 'dashboard' %}" class="text-gray-500 hover:text-temple-red transition flex items-center gap-1">
                <i data-lucide="home" class="w-4 h-4"></i> {% trans "Home" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li><a href="{% url 'job_detail' application.job.slug %}" class="text-gray-500 hover:text-temple-red transition">
                {% trans "Job:" %} ({{ application.job.title }})
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="text-temple-red font-semibold" aria-current="page">{% trans "Application Detail" %}</li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        {# LEFT COLUMN: MAIN DETAILS AND TABS #}
        <div class="lg:col-span-8">
            <div class="detail-card bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">

                {# HEADER SECTION #}
                <div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white p-6">
                    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                        <div class="flex-1">
                            <h1 class="text-2xl sm:text-3xl font-bold mb-2">{{ application.name }}</h1>
                            <div class="flex items-center gap-2 mb-2">
                                <span class="inline-block text-xs font-bold uppercase tracking-wide px-3 py-1.5 rounded-full bg-white/20 backdrop-blur-sm">
                                    {% trans "Stage:" %} <span class="font-normal">{{ application.stage }}</span>
                                </span>
                            </div>
                            <p class="text-sm text-white/80">
                                {% trans "Applied for:" %} <strong class="text-white">{{ application.job.title }}</strong>
                            </p>
                        </div>
                        
                        {# Change Stage button #}
                        {% if user.is_staff and user == application.job.assigned_to or user.is_superuser %}
                            <button type="button" 
                                    class="btn-primary inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white font-medium px-4 py-2 rounded-xl text-sm transition"
                                    onclick="document.getElementById('stageUpdateModal').classList.remove('hidden')">
                                <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                                {% trans "Change Stage" %}
                            </button>
                        {% endif %}
                    </div>
                </div>

                {# TABS NAVIGATION #}
                <div class="border-b border-gray-200 bg-gray-50 overflow-x-auto">
                    <div class="flex min-w-max px-4 gap-1">
                        <button class="tab-btn px-4 py-3 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-100 transition"
                                onclick="showTab('contact-pane')"
                                data-tab="contact-pane">
                            <i data-lucide="id-card" class="w-4 h-4 mr-2 inline"></i>
                            {% trans "Contact & Job" %}
                        </button>
                        <button class="tab-btn px-4 py-3 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-100 transition"
                                onclick="showTab('timeline-pane')"
                                data-tab="timeline-pane">
                            <i data-lucide="route" class="w-4 h-4 mr-2 inline"></i>
                            {% trans "Journey Timeline" %}
                        </button>
                        <button class="tab-btn px-4 py-3 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-100 transition"
                                onclick="showTab('documents-pane')"
                                data-tab="documents-pane">
                            <i data-lucide="file-text" class="w-4 h-4 mr-2 inline"></i>
                            {% trans "Documents" %}
                        </button>
                        {% if application.parsed_summary %}
                        <button class="tab-btn px-4 py-3 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-100 transition"
                                onclick="showTab('summary-pane')"
                                data-tab="summary-pane">
                            <i data-lucide="sparkles" class="w-4 h-4 mr-2 inline"></i>
                            {% trans "AI Summary" %}
                        </button>
                        {% endif %}
                        {% if application.is_resume_parsed %}
                        <button class="tab-btn px-4 py-3 text-sm font-medium rounded-t-lg border-b-2 border-transparent hover:bg-gray-100 transition"
                                onclick="showTab('analysis-pane')"
                                data-tab="analysis-pane">
                            <i data-lucide="bar-chart-3" class="w-4 h-4 mr-2 inline"></i>
                            {% trans "AI Analysis" %}
                        </button>
                        {% endif %}
                    </div>
                </div>

                <div class="p-6">
                    
                    {# TAB 1: CONTACT & DATES #}
                    <div id="contact-pane" class="tab-content">
                        <h5 class="text-lg font-bold text-temple-red mb-4 flex items-center gap-2">
                            <i data-lucide="info" class="w-5 h-5"></i>
                            {% trans "Core Details" %}
                        </h5>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="info-card bg-gray-50 rounded-xl p-4 border border-gray-200">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-xl bg-temple-red/10 flex items-center justify-center">
                                        <i data-lucide="mail" class="w-6 h-6 text-temple-red"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">{% trans "Email" %}</p>
                                        <p class="font-semibold text-gray-900">{{ application.email }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="info-card bg-gray-50 rounded-xl p-4 border border-gray-200">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-xl bg-temple-red/10 flex items-center justify-center">
                                        <i data-lucide="briefcase" class="w-6 h-6 text-temple-red"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">{% trans "Position Applied" %}</p>
                                        <p class="font-semibold text-gray-900">{{ application.job.title }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="info-card bg-gray-50 rounded-xl p-4 border border-gray-200 md:col-span-2">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-xl bg-temple-red/10 flex items-center justify-center">
                                        <i data-lucide="calendar-check" class="w-6 h-6 text-temple-red"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">{% trans "Applied Date" %}</p>
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <p class="font-semibold text-gray-900">{{ application.created_at|date:"M d, Y H:i" }}</p>
                                            <span class="inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full bg-temple-red/10 text-temple-red">
                                                <i data-lucide="clock" class="w-3 h-3"></i>
                                                {{ application.created_at|naturaltime }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# TAB 2: JOURNEY TIMELINE #}
                    <div id="timeline-pane" class="tab-content hidden">
                        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                            <div class="p-4 border-b border-gray-200">
                                <h5 class="text-sm font-bold text-gray-600 flex items-center gap-2">
                                    <i data-lucide="route" class="w-5 h-5"></i>
                                    {% trans "Application Journey" %}
                                </h5>
                            </div>
                            <div class="p-6">
                                
                                <p class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-4">{% trans "Current Stage" %}</p>
                                <div class="bg-temple-red/5 border border-temple-red/30 rounded-xl p-4 mb-6">
                                    <p class="text-xl font-bold text-temple-red mb-1">{{ application.stage }}</p>
                                    <p class="text-xs text-gray-500">
                                        {% trans "Latest status update:" %} {{ application.updated_at|date:"M d, Y" }}
                                    </p>
                                </div>

                                <p class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-4 pt-4 border-t border-gray-200">{% trans "Historical Timeline" %}</p>
                                <div class="relative pl-8 border-l-2 border-gray-200 space-y-6">
                                    
                                    {# Application Submitted #}
                                    <div class="timeline-item relative">
                                        <div class="absolute -left-[2.5rem] top-0 w-8 h-8 rounded-full bg-temple-red flex items-center justify-center text-white border-4 border-white shadow-lg">
                                            <i data-lucide="file-signature" class="w-3 h-3"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-semibold text-gray-900 mb-1">{% trans "Application Submitted" %}</p>
                                            <p class="text-xs text-gray-500">
                                                <i data-lucide="calendar" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.created_at|date:"M d, Y" }}
                                                <span class="mx-2">|</span>
                                                <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.created_at|date:"h:i A" }}
                                            </p>
                                        </div>
                                    </div>

                                    {% if application.exam_date %}
                                    <div class="timeline-item relative">
                                        <div class="absolute -left-[2.5rem] top-0 w-8 h-8 rounded-full bg-temple-red flex items-center justify-center text-white border-4 border-white shadow-lg">
                                            <i data-lucide="clipboard-check" class="w-3 h-3"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-semibold text-gray-900 mb-1">{% trans "Exam" %}</p>
                                            <p class="text-xs text-gray-500">
                                                <i data-lucide="calendar" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.exam_date|date:"M d, Y" }}
                                                <span class="mx-2">|</span>
                                                <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.exam_date|date:"h:i A" }}
                                            </p>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if application.get_interview_date %}
                                    <div class="timeline-item relative">
                                        <div class="absolute -left-[2.5rem] top-0 w-8 h-8 rounded-full bg-amber-500 flex items-center justify-center text-white border-4 border-white shadow-lg">
                                            <i data-lucide="message-circle" class="w-3 h-3"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-semibold text-gray-900 mb-1">{% trans "Interview" %}</p>
                                            <p class="text-xs text-gray-500">
                                                <i data-lucide="calendar" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.get_interview_date }}
                                                <span class="mx-2">|</span>
                                                <i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.get_interview_time }}
                                            </p>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if application.offer_date %}
                                    <div class="timeline-item relative">
                                        <div class="absolute -left-[2.5rem] top-0 w-8 h-8 rounded-full bg-emerald-500 flex items-center justify-center text-white border-4 border-white shadow-lg">
                                            <i data-lucide="handshake" class="w-3 h-3"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-semibold text-gray-900 mb-1">{% trans "Offer" %}</p>
                                            <p class="text-xs text-gray-500">
                                                <i data-lucide="calendar" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.offer_date|date:"M d, Y" }}
                                            </p>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if application.hired_date %}
                                    <div class="timeline-item relative">
                                        <div class="absolute -left-[2.5rem] top-0 w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center text-white border-4 border-white shadow-lg">
                                            <i data-lucide="user-check" class="w-3 h-3"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-semibold text-gray-900 mb-1">{% trans "Hired" %}</p>
                                            <p class="text-xs text-gray-500">
                                                <i data-lucide="calendar" class="w-3 h-3 inline mr-1"></i>
                                                {{ application.hired_date|date:"M d, Y" }}
                                            </p>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    {# TAB 3: DOCUMENTS #}
                    <div id="documents-pane" class="tab-content hidden">
                        {% with documents=application.documents %}
                            {% include 'includes/document_list.html' %}
                        {% endwith %}
                    </div>

                    {# TAB 4: AI SUMMARY #}
                    {% if application.parsed_summary %}
                    <div id="summary-pane" class="tab-content hidden">
                        <h5 class="text-lg font-bold text-temple-red mb-4 flex items-center gap-2">
                            <i data-lucide="sparkles" class="w-5 h-5"></i>
                            {% trans "AI Generated Summary" %}
                        </h5>
                        <div class="bg-gray-50 rounded-xl p-4 border-l-4 border-temple-red">
                            {% include 'includes/application_modal_body.html' %}
                        </div>
                    </div>
                    {% endif %}

                    {# TAB 5: AI ANALYSIS #}
                    {% if application.is_resume_parsed %}
                    <div id="analysis-pane" class="tab-content hidden">
                        <h5 class="text-lg font-bold text-temple-red mb-4 flex items-center gap-2">
                            <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
                            {% trans "AI Analysis Report" %}
                        </h5>
                        <div class="bg-gray-50 rounded-xl p-4 border-l-4 border-temple-red">
                            {% with analysis=application.ai_analysis_data %}
                            
                            {# Match Score Card #}
                            <div class="bg-white rounded-xl p-4 mb-4 shadow-sm">
                                <div class="flex justify-between items-center mb-3">
                                    <h6 class="font-bold text-gray-900">{% trans "Match Score" %}</h6>
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold {% if analysis.match_score >= 70 %}bg-emerald-500 text-white{% elif analysis.match_score >= 40 %}bg-amber-500 text-white{% else %}bg-red-500 text-white{% endif %}">
                                        {{ analysis.match_score }}%
                                    </span>
                                </div>
                                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="progress-bar h-full {% if analysis.match_score >= 70 %}bg-emerald-500{% elif analysis.match_score >= 40 %}bg-amber-500{% else %}bg-red-500{% endif %}"
                                         style="width: {{ analysis.match_score }}%"></div>
                                </div>
                            </div>

                            {# Category & Job Fit #}
                            <div class="mb-4">
                                <h6 class="font-bold text-temple-red mb-2">{% trans "Category" %}</h6>
                                <p class="text-gray-700 mb-3">{{ analysis.category }}</p>
                                <h6 class="font-bold text-temple-red mb-2">{% trans "Job Fit Narrative" %}</h6>
                                <p class="text-gray-700">{{ analysis.job_fit_narrative }}</p>
                            </div>

                            {# Strengths and Weaknesses #}
                            <div class="mb-4">
                                <h6 class="font-bold text-temple-red mb-2">{% trans "Strengths" %}</h6>
                                <p class="text-emerald-600 mb-3">{{ analysis.strengths }}</p>
                                <h6 class="font-bold text-temple-red mb-2">{% trans "Weaknesses" %}</h6>
                                <p class="text-red-600">{{ analysis.weaknesses }}</p>
                            </div>

                            {# Recommendation #}
                            <div class="bg-temple-red/5 rounded-xl p-4 mb-4 border border-temple-red/20">
                                <h6 class="font-bold text-temple-red mb-2">{% trans "Recommendation" %}</h6>
                                <p class="text-gray-700">{{ analysis.recommendation }}</p>
                            </div>

                            {# Top Keywords #}
                            <div class="mb-4">
                                <h6 class="font-bold text-temple-red mb-2">{% trans "Top Keywords" %}</h6>
                                <div class="flex flex-wrap gap-2">
                                    {% for keyword in analysis.top_3_keywords %}
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-temple-red/10 text-temple-red">
                                        {{ keyword }}
                                    </span>
                                    {% endfor %}
                                </div>
                            </div>

                            {# Professional Details #}
                            <div class="bg-white rounded-xl p-4 shadow-sm mb-4">
                                <h6 class="font-bold text-temple-red mb-3">{% trans "Professional Details" %}</h6>
                                <div class="space-y-2">
                                    <p class="flex justify-between"><span class="text-gray-600">{% trans "Years of Experience:" %}</span> <strong>{{ analysis.years_of_experience }}</strong></p>
                                    <p class="flex justify-between"><span class="text-gray-600">{% trans "Most Recent Job Title:" %}</span> <strong>{{ analysis.most_recent_job_title }}</strong></p>
                                    <p class="flex justify-between">
                                        <span class="text-gray-600">{% trans "Experience Industry Match:" %}</span>
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold {% if analysis.experience_industry_match >= 70 %}bg-emerald-500 text-white{% elif analysis.experience_industry_match >= 40 %}bg-amber-500 text-white{% else %}bg-red-500 text-white{% endif %}">
                                            {{ analysis.experience_industry_match }}%
                                        </span>
                                    </p>
                                    <p class="flex justify-between"><span class="text-gray-600">{% trans "Soft Skills Score:" %}</span> <strong>{{ analysis.soft_skills_score }}%</strong></p>
                                </div>
                            </div>

                            {# Criteria Checklist #}
                            <div class="mb-4">
                                <h6 class="font-bold text-temple-red mb-2">{% trans "Criteria Assessment" %}</h6>
                                <div class="overflow-x-auto">
                                    <table class="w-full text-sm">
                                        <thead>
                                            <tr class="border-b border-gray-200">
                                                <th class="text-left py-2 px-3 font-semibold text-gray-700">{% trans "Criteria" %}</th>
                                                <th class="text-left py-2 px-3 font-semibold text-gray-700">{% trans "Status" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for criterion, status in analysis.criteria_checklist.items %}
                                            <tr class="border-b border-gray-100">
                                                <td class="py-2 px-3 text-gray-700">{{ criterion }}</td>
                                                <td class="py-2 px-3">
                                                    {% if status == "Met" %}
                                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">{% trans "Met" %}</span>
                                                    {% elif status == "Not Met" %}
                                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">{% trans "Not Met" %}</span>
                                                    {% else %}
                                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700">{{ status }}</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            {% endwith %}
                        </div>
                    </div>
                    {% endif %}

                </div>
            </div>
        </div>

        {# RIGHT COLUMN: ACTIONS #}
        <div class="lg:col-span-4 space-y-4">
            
            {# Management Actions #}
            <div class="detail-card bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <h5 class="text-sm font-bold text-gray-600 mb-4 flex items-center gap-2">
                    <i data-lucide="settings" class="w-5 h-5"></i>
                    {% trans "Management Actions" %}
                </h5>
                <div class="space-y-2">
                    <a href="{% url 'application_list' %}" 
                       class="btn-action inline-flex items-center gap-2 w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2.5 rounded-xl text-sm transition">
                        <i data-lucide="arrow-left" class="w-4 h-4"></i>
                        {% trans "Back to List" %}
                    </a>
                    {% if application.resume %}
                    <a href="{{ application.resume.url }}" download 
                       class="btn-primary inline-flex items-center gap-2 w-full bg-temple-red hover:bg-[#8a1e2f] text-white font-medium px-4 py-2.5 rounded-xl text-sm transition shadow-lg hover:shadow-xl">
                        <i data-lucide="download" class="w-4 h-4"></i>
                        {% trans "Download Resume" %}
                    </a>
                    {% endif %}
                </div>
            </div>

            {# Time to Hire #}
            <div class="detail-card bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <h5 class="text-sm font-bold text-gray-600 mb-3 flex items-center gap-2">
                    <i data-lucide="clock" class="w-5 h-5"></i>
                    {% trans "Time to Hire:" %}
                </h5>
                {% with days=application.time_to_hire_days %}
                    <p class="text-2xl font-bold text-temple-red">
                        {% if days > 0 %}{{ days }} day{{ days|pluralize }}{% else %}0{% endif %}
                    </p>
                {% endwith %}
            </div>

            {# Resume Parsing Section #}
            <div class="detail-card bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <h5 class="text-sm font-bold text-gray-600 mb-3 flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5"></i>
                    {% trans "Resume Analysis" %}
                </h5>
                <div class="resume-parsed-section">
                    {% if application.is_resume_parsed %}
                        {% include 'recruitment/application_resume_template.html' %}
                    {% else %}
                        {% if application.scoring_timeout %}
                        <div class="flex flex-col items-center justify-center py-6">
                            <div class="flex items-center gap-2 text-temple-red">
                                <i data-lucide="bot" class="w-6 h-6 animate-pulse"></i>
                                <span class="text-sm font-medium">{% trans "Resume Analysis In Progress..." %}</span>
                            </div>
                        </div>
                        {% else %}
                        <div class="flex flex-col items-center justify-center py-6">
                            <button type="submit" 
                                    class="btn-primary inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white font-medium px-4 py-2.5 rounded-xl text-sm transition shadow-lg hover:shadow-xl"
                                    hx-get="{% url 'application_retry_scoring' application.slug %}" 
                                    hx-select=".resume-parsed-section" 
                                    hx-target=".resume-parsed-section" 
                                    hx-swap="outerHTML" 
                                    hx-on:click="this.disabled=true;this.innerHTML=`Scoring Resume, Please Wait...`">
                                <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                                {% trans "Unable to Parse Resume, Click to Retry" %}
                            </button>
                        </div>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{# Stage Update Modal for Staff Users #}
{% if user.is_staff %}
    <div id="stageUpdateModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-xl max-w-lg w-full">
            {% include "recruitment/partials/stage_update_modal.html" with application=application form=stage_form %}
        </div>
    </div>
{% endif %}

<script>
    lucide.createIcons();
    
    // Tab switching functionality
    function showTab(tabId) {
        // Hide all tab contents
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });
        
        // Remove active state from all tabs
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active');
            btn.classList.remove('border-temple-red', 'text-temple-red', 'bg-white');
            btn.classList.add('border-transparent', 'text-gray-600');
        });
        
        // Show selected tab content
        document.getElementById(tabId).classList.remove('hidden');
        
        // Add active state to selected tab
        const activeBtn = document.querySelector(`[data-tab="${tabId}"]`);
        activeBtn.classList.add('active', 'border-temple-red', 'text-temple-red', 'bg-white');
        activeBtn.classList.remove('border-transparent', 'text-gray-600');
    }
    
    // Initialize first tab as active
    showTab('contact-pane');
    
    // Modal close functionality
    document.addEventListener('click', function(e) {
        const modal = document.getElementById('stageUpdateModal');
        if (e.target === modal) {
            modal.classList.add('hidden');
        }
    });
</script>

{% endblock %}