{% extends "base.html" %}

{% block title %}Candidate Profile – {{ user.full_name }}{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="card shadow-lg border-0">
        <!-- Header with name and contact -->
        <div class="card-header bg-primary text-white">
            <div class="d-flex flex-wrap justify-content-between align-items-center">
                <div>
                    <h2 class="mb-0 fw-bold">{{ user.full_name }}</h2>
                    <p class="mb-0"><i class="fas fa-envelope me-2"></i>{{ user.email }} | <i class="fas fa-phone-alt ms-2 me-2"></i>{{ profile.phone or 'Not provided' }}</p>
                </div>
                <div class="mt-2 mt-md-0">
                    <span class="badge bg-light text-dark fs-6">Profile <strong>{{ completeness }}%</strong></span>
                </div>
            </div>
        </div>

        <div class="card-body">
            <!-- Profile completion bar -->
            <div class="mb-4">
                <div class="progress" style="height: 12px;">
                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ completeness }}%" aria-valuenow="{{ completeness }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>

            <div class="row g-4">
                <!-- Left column: Categories & Address -->
                <div class="col-md-5 col-lg-4">
                    <!-- Categories Card -->
                    <div class="card h-100 shadow-sm">
                        <div class="card-header bg-light fw-bold">
                            <i class="fas fa-tags text-primary me-2"></i> Categories
                        </div>
                        <div class="card-body">
                            {% if categories %}
                                <div class="d-flex flex-wrap gap-2">
                                    {% for cat in categories %}
                                        <span class="badge bg-secondary">{{ cat.category.name }}</span>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p class="text-muted mb-0"><i class="fas fa-exclamation-triangle text-warning"></i> No categories selected.</p>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Address Card -->
                    <div class="card mt-3 shadow-sm">
                        <div class="card-header bg-light fw-bold">
                            <i class="fas fa-map-marker-alt text-primary me-2"></i> Address
                        </div>
                        <div class="card-body">
                            <p class="mb-0">{{ profile.address or '<span class="text-muted">Not provided</span>' | safe }}</p>
                        </div>
                    </div>
                </div>

                <!-- Right column: Documents -->
                <div class="col-md-7 col-lg-8">
                    <div class="card shadow-sm">
                        <div class="card-header bg-light fw-bold">
                            <i class="fas fa-file-alt text-primary me-2"></i> Documents
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <!-- CV -->
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center p-2 border rounded bg-light">
                                        <span><i class="fas fa-file-pdf text-danger me-2"></i> Curriculum Vitae</span>
                                        {% if profile.cv_path %}
                                            <a href="{{ url_for('download_document', doc_type='cv', profile_id=profile.id) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-download"></i> Download
                                            </a>
                                        {% else %}
                                            <span class="badge bg-warning text-dark"><i class="fas fa-exclamation-triangle me-1"></i> Not provided</span>
                                        {% endif %}
                                    </div>
                                </div>
                                <!-- Cover Letter -->
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center p-2 border rounded bg-light">
                                        <span><i class="fas fa-file-word text-primary me-2"></i> Cover Letter</span>
                                        {% if profile.cover_letter_path %}
                                            <a href="{{ url_for('download_document', doc_type='cover_letter', profile_id=profile.id) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-download"></i> Download
                                            </a>
                                        {% else %}
                                            <span class="badge bg-warning text-dark"><i class="fas fa-exclamation-triangle me-1"></i> Not provided</span>
                                        {% endif %}
                                    </div>
                                </div>
                                <!-- Certificates -->
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center p-2 border rounded bg-light">
                                        <span><i class="fas fa-certificate text-info me-2"></i> Certificates</span>
                                        {% if profile.certificates_path %}
                                            <a href="{{ url_for('download_document', doc_type='certificates', profile_id=profile.id) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-download"></i> Download
                                            </a>
                                        {% else %}
                                            <span class="badge bg-warning text-dark"><i class="fas fa-exclamation-triangle me-1"></i> Not provided</span>
                                        {% endif %}
                                    </div>
                                </div>
                                <!-- Police Clearance -->
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center p-2 border rounded bg-light">
                                        <span><i class="fas fa-shield-alt text-success me-2"></i> Police Clearance</span>
                                        {% if profile.police_clearance_path %}
                                            <a href="{{ url_for('download_document', doc_type='police_clearance', profile_id=profile.id) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-download"></i> Download
                                            </a>
                                        {% else %}
                                            <span class="badge bg-warning text-dark"><i class="fas fa-exclamation-triangle me-1"></i> Not provided</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Education Section -->
            <div class="card mt-4 shadow-sm">
                <div class="card-header bg-light fw-bold">
                    <i class="fas fa-graduation-cap text-primary me-2"></i> Education
                </div>
                <div class="card-body">
                    {% if education %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr><th>Degree</th><th>Field of Study</th><th>Institution</th><th>Period</th></tr>
                                </thead>
                                <tbody>
                                    {% for edu in education %}
                                    <tr>
                                        <td>{{ edu.degree or '—' }}</td>
                                        <td>{{ edu.field_of_study or '—' }}</td>
                                        <td>{{ edu.institution or '—' }}</td>
                                        <td>{{ edu.start_date.strftime('%Y-%m') if edu.start_date else '' }} – {{ edu.end_date.strftime('%Y-%m') if edu.end_date else 'Present' }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted"><i class="fas fa-info-circle"></i> No education records added.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Work Experience Section -->
            <div class="card mt-4 shadow-sm">
                <div class="card-header bg-light fw-bold">
                    <i class="fas fa-briefcase text-primary me-2"></i> Work Experience
                </div>
                <div class="card-body">
                    {% if work_experience %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr><th>Position</th><th>Company</th><th>Period</th><th>Description</th></tr>
                                </thead>
                                <tbody>
                                    {% for work in work_experience %}
                                    <tr>
                                        <td>{{ work.position or '—' }}</td>
                                        <td>{{ work.company_name or '—' }}</td>
                                        <td>{{ work.start_date.strftime('%Y-%m') if work.start_date else '' }} – {{ work.end_date.strftime('%Y-%m') if work.end_date else 'Present' }}</td>
                                        <td>{{ work.description or '' | truncate(100) }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted"><i class="fas fa-info-circle"></i> No work experience listed.</p>
                    {% endif %}
                </div>
            </div>

            <!-- References Section -->
            <div class="card mt-4 shadow-sm">
                <div class="card-header bg-light fw-bold">
                    <i class="fas fa-address-card text-primary me-2"></i> References
                </div>
                <div class="card-body">
                    {% if references %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr><th>Name</th><th>Position</th><th>Company</th><th>Email</th><th>Phone</th></tr>
                                </thead>
                                <tbody>
                                    {% for ref in references %}
                                    <tr>
                                        <td>{{ ref.name or '—' }}</td>
                                        <td>{{ ref.position or '—' }}</td>
                                        <td>{{ ref.company or '—' }}</td>
                                        <td>{{ ref.email or '—' }}</td>
                                        <td>{{ ref.phone or '—' }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted"><i class="fas fa-info-circle"></i> No references provided.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="card-footer text-end bg-white">
            <a href="javascript:history.back()" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Applicants
            </a>
        </div>
    </div>
</div>
{% endblock %}