{% extends 'portal_base.html' %}
{% load static i18n mytags crispy_forms_tags %}

{% block title %}{% trans "My Dashboard" %} - ATS{% endblock %}

{% block customCSS %}
<style>
/* Application Progress Timeline - Using Kaauh Theme Colors */
.application-progress {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
}

.progress-step {
    flex: 1;
    text-align: center;
    position: relative;
}

.progress-step::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--kaauh-border);
    z-index: -1;
}

.progress-step:first-child::before {
    display: none;
}

.progress-step.completed::before {
    background: var(--kaauh-success);
}

.progress-step.active::before {
    background: var(--kaauh-teal);
}

.progress-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kaauh-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: bold;
    color: #6c757d;
    position: relative;
    z-index: 1;
}

.progress-step.completed .progress-icon {
    background: var(--kaauh-success);
    color: white;
}

.progress-step.active .progress-icon {
    background: var(--kaauh-teal);
    color: white;
}

.progress-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.progress-step.completed .progress-label,
.progress-step.active .progress-label {
    color: var(--kaauh-primary-text);
    font-weight: 600;
}

/* Status Badges - Using Kaauh Theme */
.status-badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

.status-applied { background: #e3f2fd; color: #1976d2; }
.status-screening { background: #fff3e0; color: #f57c00; }
.status-exam { background: #f3e5f5; color: #7b1fa2; }
.status-interview { background: #e8f5e8; color: #388e3c; }
.status-offer { background: #fff8e1; color: #f9a825; }
.status-hired { background: #e8f5e8; color: #2e7d32; }
.status-rejected { background: #ffebee; color: #c62828; }

/* Alert Purple - Using Theme Colors */
.alert-purple {
    color: #4a148c;
    background-color: #f3e5f5;
    border-color: #ce93d8;
}

/* Profile specific styles */
.profile-data-list li {
    padding: 1rem 0;
    border-bottom: 1px dashed var(--kaauh-border);
    font-size: 0.95rem;
    font-weight: 500;
}
.profile-data-list li strong {
    font-weight: 700;
    color: var(--kaauh-teal-dark);
    min-width: 120px;
    display: inline-block;
}

/* Tabs styling */
{% comment %} .nav-tabs {
    border-bottom: 1px solid var(--kaauh-border);
}
.nav-tabs .nav-link.active {
    color: var(--kaauh-primary-text);
}
.nav-tabs .nav-link {
    color: var(--kaauh-teal);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 1rem 1.75rem;
    font-weight: 600;
}
.nav-tabs .nav-link:hover {
    color: var(--kaauh-teal-dark);
    border-color: var(--kaauh-teal-light);
}
.nav-tabs .nav-link.active {
    color: #000000;
    border-color: var(--kaauh-teal);
    background-color: transparent;
    font-weight: 700;
}
.nav-tabs .nav-link i {
    color: var(--kaauh-teal) !important;
} {% endcomment %}

 /* Tabs Theming - Applies to the right column */
    .nav-tabs {
        border-bottom: 1px solid var(--kaauh-border);
        background-color: #f8f9fa;
        padding: 0;
    }

    .nav-tabs .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        color: var(--kaauh-primary-text);
        font-weight: 500;
        padding: 0.75rem 1rem;
        margin-right: 0.5rem;
        transition: all 0.2s;
    }
    /* Active Link */
    .nav-tabs .nav-link.active {
        color: var(--kaauh-teal-dark) !important;
        background-color: white !important;
        border-bottom: 3px solid var(--kaauh-teal) !important;
        font-weight: 600;
        z-index: 2;
        border-right-color: transparent !important;
        margin-bottom: -1px;
    }

.nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.nav-scroll .nav-tabs { flex-wrap: nowrap; border-bottom: none; }
.nav-scroll .nav-tabs .nav-item { flex-shrink: 0; }

/* Application table styling */
.application-table thead th {
    background-color: var(--kaauh-teal-light);
    color: var(--kaauh-teal-dark);
    font-weight: 700;
    border-bottom: 1px solid var(--kaauh-border);
    padding: 1rem 1.5rem;
}
.application-table tbody tr {
    transition: background-color 0.2s ease;
}
.application-table tbody tr:hover {
    background-color: var(--kaauh-teal-light);
}
.badge-stage {
    font-weight: 600;
    padding: 0.4em 0.8em;
    border-radius: 50rem;
}

/* Responsive table for mobile */
@media (max-width: 767.98px) {
    .application-table thead { display: none; }
    .application-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--kaauh-border);
        border-radius: 8px;
        box-shadow: var(--kaauh-shadow-sm);
    }
    .application-table td {
        text-align: right !important;
        padding: 0.75rem 1rem;
        padding-left: 50%;
        position: relative;
    }
    .application-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        font-weight: 700;
        color: var(--gray-text);
    }
}

/* Document management list */
.list-group-item {
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--kaauh-border);
    transition: all 0.2s ease;
}
.list-group-item:hover {
    background-color: var(--kaauh-teal-light);
    border-color: var(--kaauh-teal-accent);
}

/* Action tiles */
.btn-action-tile {
    background-color: white;
    border: 1px solid var(--kaauh-border);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    transition: all 0.3s ease;
    box-shadow: var(--kaauh-shadow-sm);
}
.btn-action-tile:hover {
    background-color: var(--kaauh-teal-light);
    border-color: var(--kaauh-teal-accent);
    transform: translateY(-2px);
    box-shadow: var(--kaauh-shadow-lg);
}
.action-tile-icon {
    font-size: 2rem;
    color: var(--kaauh-teal-accent);
    display: block;
}

/* Application Cards Styling */
.hover-lift {
    transition: all 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--kaauh-shadow-lg);
    border-color: var(--kaauh-teal-accent);
}

.application-card .card-title a {
    transition: color 0.2s ease;
}
.application-card .card-title a:hover {
    color: var(--kaauh-teal-dark) !important;
}

/* Responsive adjustments for application cards */
@media (max-width: 768px) {
    .application-card .card-body {
        padding: 1.25rem;
    }
    .application-card .card-title {
        font-size: 1.1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    {# Header: Larger, more dynamic on large screens. Stacks cleanly on mobile. #}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5">
        <h1 class="display-6 display-md-5 fw-extrabold mb-3 mb-md-0" style="color: var(--kaauh-teal-dark);">
            {% trans "Your Applicant Dashboard" %}
        </h1>
        {% comment %} <a href="#profile-details" data-bs-toggle="tab" class="btn btn-main-action btn-sm btn-md-lg px-4 py-2 rounded-pill shadow-sm shadow-md-lg">
            <i class="fas fa-edit me-2"></i> {% trans "Update Profile" %}
        </a> {% endcomment %}
    </div>

    {# Applicant Quick Overview Card: Use a softer background color #}
    <div class="card kaauh-card mb-5 p-4 bg-white">
        <div class="d-flex align-items-center flex-column flex-sm-row text-center text-sm-start">
            <img src="{% if applicant.user.profile_image %}{{ applicant.user.profile_image.url }}{% else %}{% static 'image/default_avatar.png' %}{% endif %}"
                 alt="{% trans 'Profile Picture' %}"
                 class="rounded-circle me-sm-4 mb-3 mb-sm-0 shadow-lg"
                 style="width: 80px; height: 80px; object-fit: cover; border: 4px solid var(--kaauh-teal-accent);">
            <div>
                <h3 class="card-title mb-1 fw-bold text-dark">{{ applicant.full_name|default:"Applicant Name" }}</h3>
                <p class="text-gray-subtle mb-0">{{ applicant.email }}</p>
            </div>
        </div>
    </div>

    {# ================================================= #}
    {# MAIN TABBED INTERFACE #}
    {# ================================================= #}
    <div class="card kaauh-card p-0 bg-white">

        {# Tab Navigation: Used nav-scroll for responsiveness #}
        <div class="nav-scroll px-4 pt-3">
            <ul class="nav nav-tabs" id="candidateTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-details" type="button" role="tab" aria-controls="profile-details" aria-selected="true">
                        <i class="fas fa-user-circle me-2"></i> {% trans "Profile Details" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="applications-tab" data-bs-toggle="tab" data-bs-target="#applications-history" type="button" role="tab" aria-controls="applications-history" aria-selected="false">
                        <i class="fas fa-list-alt me-2"></i> {% trans "My Applications" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#document-management" type="button" role="tab" aria-controls="document-management" aria-selected="false">
                        <i class="fas fa-file-upload me-2"></i> {% trans "Documents" %}
                    </button>
                </li>
                {% comment %} <li class="nav-item" role="presentation">
                    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#account-settings" type="button" role="tab" aria-controls="account-settings" aria-selected="false">
                        <i class="fas fa-cogs me-2"></i> {% trans "Settings" %}
                    </button>
                </li> {% endcomment %}
            </ul>
        </div>

        {# Tab Content #}
        <div class="tab-content p-4 p-md-5" id="candidateTabsContent">

            <div class="tab-pane fade show active" id="profile-details" role="tabpanel" aria-labelledby="profile-tab">
                <!-- Basic Information Section -->
                <div class="mb-5">
                    <h4 class="mb-4 fw-bold text-gray-subtle">
                        <i class="fas fa-user me-2 text-primary-theme"></i>{% trans "Basic Information" %}
                    </h4>
                    <ul class="list-unstyled profile-data-list p-0">
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-id-card me-2 text-primary-theme"></i> <strong>{% trans "First Name" %}</strong></div>
                            <span class="text-end">{{ applicant.first_name|default:"" }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-id-card me-2 text-primary-theme"></i> <strong>{% trans "Last Name" %}</strong></div>
                            <span class="text-end">{{ applicant.last_name|default:"" }}</span>
                        </li>
                        {% if applicant.middle_name %}
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-id-card me-2 text-primary-theme"></i> <strong>{% trans "Middle Name" %}</strong></div>
                            <span class="text-end">{{ applicant.middle_name }}</span>
                        </li>
                        {% endif %}
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-envelope me-2 text-primary-theme"></i> <strong>{% trans "Email" %}</strong></div>
                            <span class="text-end">{{ applicant.email|default:"" }}</span>
                        </li>
                    </ul>
                </div>

                <!-- Contact Information Section -->
                <div class="mb-5">
                    <h4 class="mb-4 fw-bold text-gray-subtle">
                        <i class="fas fa-address-book me-2 text-primary-theme"></i>{% trans "Contact Information" %}
                    </h4>
                    <ul class="list-unstyled profile-data-list p-0">
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-phone-alt me-2 text-primary-theme"></i> <strong>{% trans "Phone" %}</strong></div>
                            <span class="text-end">{{ applicant.phone|default:"" }}</span>
                        </li>
                        {% if applicant.address %}
                        <li class="d-flex align-items-start">
                            <div class="mb-1"><i class="fas fa-map-marker-alt me-2 text-primary-theme"></i> <strong>{% trans "Address" %}</strong></div>
                            <span class="text-end text-break">{{ applicant.address|linebreaksbr }}</span>
                        </li>
                        {% endif %}
                        {% if applicant.linkedin_profile %}
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fab fa-linkedin me-2 text-primary-theme"></i> <strong>{% trans "LinkedIn Profile" %}</strong></div>
                            <span class="text-end">
                                <a href="{{ applicant.linkedin_profile }}" target="_blank" class="text-primary-theme text-decoration-none">
                                    {% trans "View Profile" %} <i class="fas fa-external-link-alt ms-1"></i>
                                </a>
                            </span>
                        </li>
                        {% endif %}
                    </ul>
                </div>

                <!-- Personal Details Section -->
                <div class="mb-5">
                    <h4 class="mb-4 fw-bold text-gray-subtle">
                        <i class="fas fa-user-circle me-2 text-primary-theme"></i>{% trans "Personal Details" %}
                    </h4>
                    <ul class="list-unstyled profile-data-list p-0">
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-calendar-alt me-2 text-primary-theme"></i> <strong>{% trans "Date of Birth" %}</strong></div>
                            <span class="text-end">{{ applicant.date_of_birth|date:"M d, Y"|default:"" }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-venus-mars me-2 text-primary-theme"></i> <strong>{% trans "Gender" %}</strong></div>
                            <span class="text-end">{{ applicant.get_gender_display|default:"" }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-globe me-2 text-primary-theme"></i> <strong>{% trans "Nationality" %}</strong></div>
                            <span class="text-end">{{ applicant.get_nationality_display|default:"" }}</span>
                        </li>
                    </ul>
                </div>

                <!-- Professional Information Section -->
                <div class="mb-5">
                    <h4 class="mb-4 fw-bold text-gray-subtle">
                        <i class="fas fa-briefcase me-2 text-primary-theme"></i>{% trans "Professional Information" %}
                    </h4>
                    <ul class="list-unstyled profile-data-list p-0">
                        {% if applicant.user.designation %}
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-user-tie me-2 text-primary-theme"></i> <strong>{% trans "Designation" %}</strong></div>
                            <span class="text-end">{{ applicant.user.designation }}</span>
                        </li>
                        {% endif %}
                        {% if applicant.gpa %}
                        <li class="d-flex justify-content-between align-items-center">
                            <div><i class="fas fa-graduation-cap me-2 text-primary-theme"></i> <strong>{% trans "GPA" %}</strong></div>
                            <span class="text-end">{{ applicant.gpa }}</span>
                        </li>
                        {% endif %}
                    </ul>
                </div>

                {% comment %} <div class="alert alert-info mt-4">
                    <i class="fas fa-info-circle me-2"></i>
                    <small>{% trans "Use the 'Update Profile' button above to edit these details." %}</small>
                </div> {% endcomment %}

                {% comment %} <hr class="my-5"> {% endcomment %}

                {% comment %} <h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Quick Actions" %}</h4>
                <div class="row g-3 g-md-4">
                    <div class="col-6 col-sm-4 col-md-4">
                         <a href="#applications-history" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
                            <span class="action-tile-icon mb-2"><i class="fas fa-list-check"></i></span>
                            <span class="fw-bold">{% trans "Track Jobs" %}</span>
                            <span class="small text-muted d-none d-sm-block">{% trans "View stages" %}</span>
                        </a>
                    </div>
                    <div class="col-6 col-sm-4 col-md-4">
                        <a href="#document-management" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
                            <span class="action-tile-icon mb-2"><i class="fas fa-cloud-upload-alt"></i></span>
                            <span class="fw-bold">{% trans "Manage Documents" %}</span>
                            <span class="small text-muted d-none d-sm-block">{% trans "Upload/View files" %}</span>
                        </a>
                    </div>
                    <div class="col-12 col-sm-4 col-md-4">
                        <a href="{% url 'kaauh_career' %}" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
                            <span class="action-tile-icon mb-2"><i class="fas fa-search"></i></span>
                            <span class="fw-bold">{% trans "Find New Careers" %}</span>
                            <span class="small text-muted d-none d-sm-block">{% trans "Explore open roles" %}</span>
                        </a>
                    </div>
                </div> {% endcomment %}
            </div>

            <div class="tab-pane fade" id="applications-history" role="tabpanel" aria-labelledby="applications-tab">
                <h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Application Tracking" %}</h4>

                {% if applications %}
                    <div class="row g-4">
                        {% for application in applications %}
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="card kaauh-card h-100 shadow-sm hover-lift">
                                <div class="card-body d-flex flex-column">
                                    <!-- Job Title as Card Header -->
                                    <div class="d-flex align-items-start mb-3">
                                        <div class="flex-grow-1">
                                            <h5 class="card-title fw-bold mb-1">
                                                <a href="{% url 'applicant_application_detail' application.slug %}"
                                                   class="text-decoration-none text-primary-theme hover:text-primary-theme-dark">
                                                    {{ application.job.title }}
                                                </a>
                                            </h5>
                                            <p class="text-muted small mb-0">
                                                <i class="fas fa-calendar-alt me-1"></i>
                                                {% trans "Applied" %}: {{ application.created_at|date:"d M Y" }}
                                            </p>
                                        </div>
                                    </div>

                                    <!-- Application Details -->
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="text-muted small fw-medium">{% trans "Current Stage" %}</span>
                                            <span class="badge badge-stage bg-primary-theme text-white">
                                                {{ application.stage }}
                                            </span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-muted small fw-medium">{% trans "Status" %}</span>
                                            {% if application.is_active %}
                                                <span class="badge badge-stage bg-primary-theme">{% trans "Active" %}</span>
                                            {% else %}
                                                <span class="badge badge-stage bg-danger text-dark">{% trans "Closed" %}</span>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <!-- Action Button -->
                                    <div class="mt-auto">
                                        <a href="{% url 'applicant_application_detail' application.slug %}"
                                           class="btn btn-main-action w-100 rounded-pill">
                                            <i class="fas fa-eye me-2"></i> {% trans "View Details" %}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                {% else %}
                    <div class="alert alert-info text-center p-5 rounded-3" style="border: 1px dashed var(--kaauh-border); background-color: var(--kaauh-teal-light);">
                        <i class="fas fa-info-circle fa-2x mb-3 text-primary-theme"></i>
                        <h5 class="mb-3 fw-bold text-primary-theme">{% trans "You haven't submitted any applications yet." %}</h5>
                        <a href="{% url 'kaauh_career' %}" class="ms-3 btn btn-main-action mt-2 rounded-pill px-4">
                            {% trans "View Available Jobs" %} <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                {% endif %}
            </div>

            <div class="tab-pane fade" id="document-management" role="tabpanel" aria-labelledby="documents-tab">
                <h4 class="mb-4 fw-bold text-gray-subtle">{% trans "My Uploaded Documents" %}</h4>

                <p class="text-gray-subtle">{% trans "You can upload and manage your resume, certificates, and professional documents here. These documents will be attached to your applications." %}</p>

                <button type="button" class="btn btn-main-action rounded-pill px-4 me-3 d-block d-sm-inline-block w-100 w-sm-auto mb-4" data-bs-toggle="modal" data-bs-target="#documentUploadModal">
                    <i class="fas fa-cloud-upload-alt me-2"></i> {% trans "Upload New Document" %}
                </button>

                <hr class="my-5">

                {# Document List #}
                <ul class="list-group list-group-flush">
                    {% for document in documents %}
                    {# HTMX FIX: Added id to list item for hx-target #}
                    <li class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center bg-white p-3"
                        id="document-{{ document.id }}">
                        <div class="mb-2 mb-sm-0 fw-medium">
                            <i class="fas fa-file-pdf me-2 text-primary-theme"></i> <strong>{{ document.document_type|title }}</strong>
                            <span class="text-muted small">({{ document.file.name|split:"/"|last }})</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="text-muted small me-3">{% trans "Uploaded:" %} {{ document.uploaded_at|date:"d M Y" }}</span>
                            <a href="{{ document.file.url }}" target="_blank" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>

                            {# HTMX DELETE BUTTON #}
                            <button hx-post="{% url 'application_document_delete' document.id %}"
                                    hx-target="#document-{{ document.id }}"
                                    hx-swap="outerHTML"
                                    hx-confirm="{% trans 'Are you sure you want to delete this file?' %}"
                                    class="btn btn-sm btn-danger">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </li>
                    {% empty %}
                    <li class="list-group-item text-center text-muted p-4">
                        <i class="fas fa-folder-open fa-2x mb-3"></i>
                        <p>{% trans "No documents uploaded yet." %}</p>
                    </li>
                    {% endfor %}
                </ul>

            </div>

            {% comment %} <div class="tab-pane fade" id="account-settings" role="tabpanel" aria-labelledby="settings-tab">
                <h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Security & Preferences" %}</h4>

                <div class="row g-4">
                    <div class="col-12 col-md-6">
                        <div class="card kaauh-card p-4 h-100 bg-white">
                            <h5 class="fw-bold"><i class="fas fa-key me-2 text-primary-theme"></i> {% trans "Password Security" %}</h5>
                            <p class="text-muted small">{% trans "Update your password regularly to keep your account secure." %}</p>
                            <button type="button" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium" data-bs-toggle="modal" data-bs-target="#passwordModal">
                                {% trans "Change Password" %}
                            </button>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="card kaauh-card p-4 h-100 bg-white">
                            <h5 class="fw-bold"><i class="fas fa-image me-2 text-primary-theme"></i> {% trans "Profile Image" %}</h5>
                            <p class="text-muted small">{% trans "Update your profile picture to personalize your account." %}</p>
                            <button type="button" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium" data-bs-toggle="modal" data-bs-target="#profileImageModal">
                                {% trans "Change Image" %}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="alert mt-5 py-3" style="background-color: var(--danger-subtle); color: #842029; border: 1px solid #f5c2c7; border-radius: 8px;">
                    <i class="fas fa-exclamation-triangle me-2"></i> {% trans "To delete your profile, please contact HR support." %}
                </div>
            </div> {% endcomment %}

        </div>
    </div>
    {# ================================================= #}


</div>

<!-- Password Change Modal (Reused from portal_profile.html) -->
<div class="modal fade mt-4" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="passwordModalLabel">{% trans "Change Password" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="passwordModalBody">
        <form action="{% url 'portal_password_reset' applicant.pk %}" method="post">
            {% csrf_token %}
            {{ password_reset_form|crispy }}
            <button type="submit" class="btn btn-main-action">{% trans "Change Password" %}</button>
        </form>
      </div>
    </div>
    </div>
</div>

<!-- Profile Image Modal (Reused from portal_profile.html) -->
<div class="modal fade mt-4" id="profileImageModal" tabindex="-1" aria-labelledby="profileImageModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="profileImageModalLabel">{% trans "Upload Profile Image" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="post" action="{% url 'user_profile_image_update' applicant.pk %}" enctype="multipart/form-data" >
          {% csrf_token %}

          <div class="mb-3">
            <label for="{{ profile_form.profile_image.id_for_label }}" class="form-label">{% trans "Profile Image" %}</label>

            {# 1. Check if an image currently exists on the bound instance #}
            {% if profile_form.instance.profile_image %}

                <div class="mb-2">
                    <small class="text-muted d-block">{% trans "Current Image:" %}</small>

                    {# Display Link to View Current Image #}
                    <a href="{{ profile_form.instance.profile_image.url }}" target="_blank" class="d-inline-block me-3 text-info fw-bold">
                        {% trans "View/Download" %} ({{ profile_form.instance.profile_image.name }})
                    </a>

                    {# Image Preview #}
                    <div class="mt-2">
                         <img src="{{ profile_form.instance.profile_image.url }}"
                              alt="{% trans 'Profile Image' %}"
                              style="max-width: 150px; height: auto; border: 1px solid #ccc; border-radius: 4px;">
                    </div>
                </div>

                {# 2. Explicitly render the 'Clear' checkbox and the Change input #}
                <div class="form-check mt-3">
                    {# The ClearableFileInput widget renders itself here. It provides the "Clear" checkbox and the "Change" input field. #}
                    {{ profile_form.profile_image }}
                </div>

            {% else %}
                {# If no image exists, just render the file input for upload #}
                <div class="form-control p-0 border-0">
                    {{ profile_form.profile_image }}
                </div>
            {% endif %}

            {# Display any validation errors #}
            {% for error in profile_form.profile_image.errors %}
                <div class="text-danger small mt-1">{{ error }}</div>
            {% endfor %}

          </div>

          <div class="modal-footer mt-4">
            <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
            <button type="submit" class="btn btn-main-action">{% trans "Save changes" %}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Document Upload Modal -->
<div class="modal fade mt-4" id="documentUploadModal" tabindex="-1" aria-labelledby="documentUploadModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="documentUploadModalLabel">{% trans "Upload Document" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% include "forms/document_form.html" with slug=applicant.slug %}
        {% comment %} <form method="post" action="{% url 'document_upload' applicant.slug %}" enctype="multipart/form-data" id="documentUploadForm">
          <input type="hidden" name="upload_target" value="person">
          {% csrf_token %}
          <div class="mb-3">
            <label for="{{ document_form.document_type.id_for_label }}" class="form-label">{% trans "Document Type" %}</label>
            {{ document_form.document_type }}
          </div>
          <div class="mb-3">
            <label for="{{ document_form.file.id_for_label }}" class="form-label">{% trans "File" %}</label>
            {{ document_form.file }}
          </div>
          <div class="modal-footer mt-4">
            <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
            <button type="submit" class="btn btn-main-action">{% trans "Upload" %}</button>
          </div>
        </form> {% endcomment %}
      </div>
    </div>
  </div>
</div>
{% endblock %}