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


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

{% block customCSS %}
{% endblock %}

{% block content %}
<div class="container-fluid py-5">
    
    {# Profile Header #}
    <div class="d-flex justify-content-between align-items-center mb-5 border-bottom pb-4">
        <h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
            <i class="fas fa-user-circle me-3 text-primary-theme"></i> {% trans "My Candidate Profile" %}
        </h1>
        <a href="#" class="btn btn-main-action btn-lg">
            <i class="fas fa-edit me-2"></i> {% trans "Edit Profile" %}
        </a>
    </div>

    {# Profile and Account Management Row #}
    <div class="row g-5 mb-5">
        
        {# Candidate Details Card #}
        <div class="col-lg-5">
            <div class="card kaauh-card h-100 p-4">
                <div class="card-body p-0">
                    <div class="d-flex align-items-center mb-4 pb-4 border-bottom">
                        <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-4 shadow-sm" 
                             style="width: 100px; height: 100px; object-fit: cover; border: 4px solid var(--kaauh-teal-light);">
                        <div>
                            <h3 class="card-title mb-1" style="color: var(--kaauh-teal-dark); font-weight: 600;">{{ candidate.name|default:"N/A" }}</h3>
                            <p class="text-muted mb-0">{{ candidate.email }}</p>
                        </div>
                    </div>
                    
                    <ul class="list-unstyled profile-data-list pt-2">
                        <li>
                            <i class="fas fa-phone-alt me-2 text-primary-theme"></i> 
                            <strong>{% trans "Phone" %}</strong> {{ candidate.phone|default:"N/A" }}
                        </li>
                        <li>
                            <i class="fas fa-globe me-2 text-primary-theme"></i> 
                            <strong>{% trans "Nationality" %}</strong> {{ candidate.get_nationality_display|default:"N/A" }}
                        </li>
                        <li>
                            <i class="fas fa-calendar-alt me-2 text-primary-theme"></i> 
                            <strong>{% trans "Date of Birth" %}</strong> {{ candidate.date_of_birth|date:"M d, Y"|default:"N/A" }}
                        </li>
                        <li>
                            <i class="fas fa-file-alt me-2 text-primary-theme"></i> 
                            <strong>{% trans "Resume" %}</strong> 
                            {% if candidate.resume %}
                                <a href="#" target="_blank" class="text-primary-theme text-decoration-none fw-medium">
                                    {% trans "View/Download" %} <i class="fas fa-external-link-alt small ms-1"></i>
                                </a>
                            {% else %}
                                <span class="text-muted">{% trans "Not uploaded" %}</span>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        {# Account Management / Quick Actions Card #}
        <div class="col-lg-7">
            <div class="card kaauh-card h-100 p-4">
                <div class="card-header bg-white border-0 p-0 mb-4 profile-header">
                    <h4 class="mb-0 py-2" style="color: var(--kaauh-teal-dark); font-weight: 600;"><i class="fas fa-cogs me-2"></i> {% trans "Account Settings" %}</h4>
                </div>
                <div class="card-body p-0">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <a href="#" class="btn btn-outline-secondary w-100 py-3 d-flex align-items-center justify-content-center">
                                <i class="fas fa-key me-2"></i> {% trans "Change Password" %}
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" class="btn btn-outline-secondary w-100 py-3 d-flex align-items-center justify-content-center">
                                <i class="fas fa-id-card me-2"></i> {% trans "Update Contact Info" %}
                            </a>
                        </div>
                        <div class="col-12">
                            <blockquote class="blockquote small text-muted mt-3 p-3" style="border-left: 3px solid var(--kaauh-teal-light); background-color: var(--kaauh-bg-subtle); border-radius: 0.5rem;">
                                <p class="mb-0">{% trans "Your profile is essential for the application process. Keep your resume and contact information up-to-date for timely communication." %}</p>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Application Tracking Section #}
    <h2 class="h4 mb-4" style="color: var(--kaauh-teal-dark); border-bottom: 1px solid var(--kaauh-border); padding-bottom: 0.5rem;">
        <i class="fas fa-list-alt me-2 text-primary-theme"></i> {% trans "My Applications History" %}
    </h2>
    
    {% if applications %}
        <div class="table-responsive kaauh-card shadow-sm">
            <table class="table table-hover 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: 120px;">{% trans "Action" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for application in applications %}
                    <tr>
                        <td class="fw-medium">
                            <a href="{% url 'job_detail' application.job.slug %}" class="text-decoration-none text-primary-theme">
                                {{ application.job.title }}
                            </a>
                        </td>
                        <td>{{ application.applied_date|date:"d M Y" }}</td>
                        <td>
                            <span class="badge badge-stage">
                                {{ application.stage }}
                            </span>
                        </td>
                        <td>
                            {% if application.is_active %}
                                <span class="badge badge-success">{% trans "Active" %}</span>
                            {% else %}
                                <span class="badge badge-warning">{% trans "Closed" %}</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <a href="#" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-eye"></i> {% trans "Details" %}
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        {# Placeholder for Pagination #}
        {% comment %} {% include "includes/paginator.html" with page_obj=applications_page %} {% endcomment %}

    {% else %}
        <div class="alert alert-info text-center kaauh-card p-5" style="border: 1px dashed var(--kaauh-border);">
            <i class="fas fa-info-circle fa-2x mb-3 text-primary-theme"></i> 
            <h5 class="mb-3">{% trans "You have no active applications." %}</h5>
            <a href="{% url 'job_list' %}" class="ms-3 btn btn-main-action mt-2">
                {% trans "View Available Jobs" %} <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    {% endif %}

</div>
{% endblock %}