{% extends 'applicant/partials/candidate_facing_base.html'%}
{% load static i18n %}


{% block title %}{% trans "My Dashboard" %} - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
    /* ---------------------------------------------------------------------- */
    /* THEME VARIABLES (Refined for Premium Look) */
    /* ---------------------------------------------------------------------- */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-teal-accent: #008c9c; /* A slightly brighter, more vibrant teal for key links */
        --kaauh-teal-light: #e6f7f8;
        --kaauh-bg-subtle: #f9fbfb; /* Lighter, cleaner background */
        --kaauh-border: #e0e5eb;    /* Very subtle border color */
        --kaauh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); /* Lightest shadow */
        --kaauh-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08); /* Modern, lifted shadow */
        --gray-text: #5e6c84;       /* Deeper, more readable gray */
        --success-subtle: #d4edda;
        --danger-subtle: #f8d7da;
    }

    body {
        background-color: var(--kaauh-bg-subtle);
    }

    .text-primary-theme { color: var(--kaauh-teal-accent) !important; }
    .text-gray-subtle { color: var(--gray-text) !important; }


    /* ---------------------------------------------------------------------- */
    /* 1. PRIMARY BUTTONS & ACTIONS */
    /* ---------------------------------------------------------------------- */
    .btn-main-action {
        background-color: var(--kaauh-teal);
        color: white;
        border: none;
        transition: all 0.2s ease;
        box-shadow: 0 4px 15px rgba(0, 99, 110, 0.4);
        font-weight: 600;
    }
    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0, 99, 110, 0.5);
    }
    .btn-outline-secondary {
        border-color: var(--kaauh-border);
        color: var(--kaauh-teal-dark);
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .btn-outline-secondary:hover {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
    }

    /* ---------------------------------------------------------------------- */
    /* 2. CARDS & CONTAINERS (Increased Padding & Smoother Shadow) */
    /* ---------------------------------------------------------------------- */
    .kaauh-card {
        border: 1px solid var(--kaauh-border);
        border-radius: 12px; /* Smoother corner radius */
        box-shadow: var(--kaauh-shadow-sm);
        transition: box-shadow 0.3s ease;
    }
    .kaauh-card:hover {
        box-shadow: var(--kaauh-shadow-lg); /* Subtle lift on hover */
    }

    .profile-data-list li {
        padding: 1rem 0; /* More vertical space */
        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;
    }

    /* ---------------------------------------------------------------------- */
    /* 3. TABS (Minimalist & Clean) */
    /* ---------------------------------------------------------------------- */
    .nav-tabs {
        border-bottom: 1px solid var(--kaauh-border); /* Thinner border */
    }
    .nav-tabs .nav-link {
        color: var(--gray-text); /* Use subdued text color for inactive tabs */
        border: none;
        border-bottom: 3px solid transparent; /* Thinner accent line */
        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: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        background-color: transparent;
    }
    .nav-tabs .nav-link i {
        color: var(--kaauh-teal-accent) !important;
    }
    .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; }


    /* ---------------------------------------------------------------------- */
    /* 4. APPLICATION TABLE (Refined Aesthetics) */
    /* ---------------------------------------------------------------------- */
    .application-table thead th {
        background-color: var(--kaauh-teal-light); /* Light, subtle header */
        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;
    }
    .bg-success { background-color: #38a169 !important; }
    .bg-warning { background-color: #f6ad55 !important; }

    /* Responsive Table for Mobile (High contrast labels) */
    @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); /* Use muted gray for labels */
        }
    }

    /* 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);
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4 py-md-5">

    {# 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 Candidate Dashboard" %}
        </h1>
        <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>
    </div>

    {# Candidate 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 candidate.profile_picture %}{{ candidate.profile_picture.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">{{ candidate.name|default:"Candidate Name" }}</h3>
                <p class="text-gray-subtle mb-0">{{ candidate.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>
                <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>
            </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">
                <h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Personal 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">{{ candidate.phone|default:"N/A" }}</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">{{ candidate.get_nationality_display|default:"N/A" }}</span>
                    </li>
                    <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">{{ candidate.date_of_birth|date:"M d, Y"|default:"N/A" }}</span>
                    </li>
                    <li class="small pt-3 text-muted border-bottom-0">{% trans "Use the 'Update Profile' button above to edit these details." %}</li>
                </ul>

                <hr class="my-5">

                <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>
            </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="kaauh-card shadow-lg p-0">
                        <table class="table table-borderless align-middle mb-0 application-table">
                            <thead>
                                <tr>
                                    <th scope="col" style="min-width: 250px;">{% trans "Job Title" %}</th>
                                    <th scope="col">{% trans "Applied On" %}</th>
                                    <th scope="col">{% trans "Current Stage" %}</th>
                                    <th scope="col">{% trans "Status" %}</th>
                                    <th scope="col" class="text-end" style="min-width: 140px;">{% trans "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for application in applications %}
                                <tr>
                                    <td class="fw-medium" data-label="{% trans 'Job Title' %}">
                                        <a href="{% url 'job_detail' application.job.slug %}" class="text-decoration-none text-primary-theme">
                                            {{ application.job.title }}
                                        </a>
                                    </td>
                                    <td data-label="{% trans 'Applied On' %}" class="text-gray-subtle">{{ application.applied_date|date:"d M Y" }}</td>
                                    <td data-label="{% trans 'Current Stage' %}">
                                        <span class="badge badge-stage bg-info text-white">
                                            {{ application.stage }}
                                        </span>
                                    </td>
                                    <td data-label="{% trans 'Status' %}">
                                        {% if application.is_active %}
                                            <span class="badge badge-stage bg-success">{% trans "Active" %}</span>
                                        {% else %}
                                            <span class="badge badge-stage bg-warning text-dark">{% trans "Closed" %}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end" data-label="{% trans 'Action' %}">
                                        <a href="#" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
                                            <i class="fas fa-eye me-1"></i> {% trans "Details" %}
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </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>

                <a href="#" class="btn btn-main-action rounded-pill px-4 me-3 d-block d-sm-inline-block w-100 w-sm-auto mb-4">
                    <i class="fas fa-cloud-upload-alt me-2"></i> {% trans "Upload New Document" %}
                </a>

                <hr class="my-5">

                {# Example Document List (Refined structure) #}
                <ul class="list-group list-group-flush">
                    <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">
                        <div class="mb-2 mb-sm-0 fw-medium">
                            <i class="fas fa-file-pdf me-2 text-primary-theme"></i> **{% trans "Resume" %}** <span class="text-muted small">(CV\_John\_Doe\_2024.pdf)</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="text-muted small me-3">{% trans "Uploaded: 10 Jan 2024" %}</span>
                            <a href="#" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash-alt"></i></a>
                        </div>
                    </li>
                    <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">
                        <div class="mb-2 mb-sm-0 fw-medium">
                            <i class="fas fa-file-alt me-2 text-primary-theme"></i> **{% trans "Medical Certificate" %}** <span class="text-muted small">(Cert\_KSA\_MED.jpg)</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="text-muted small me-3">{% trans "Uploaded: 22 Feb 2023" %}</span>
                            <a href="#" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash-alt"></i></a>
                        </div>
                    </li>
                </ul>

            </div>

            <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>
                            <a href="#" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium">
                                {% trans "Change Password" %}
                            </a>
                        </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-envelope me-2 text-primary-theme"></i> {% trans "Email Preferences" %}</h5>
                            <p class="text-muted small">{% trans "Manage subscriptions and job alert settings." %}</p>
                            <a href="#" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium">
                                {% trans "Manage Alerts" %}
                            </a>
                        </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>

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


</div>
{% endblock %}