743 lines
34 KiB
HTML
743 lines
34 KiB
HTML
{% 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">
|
|
<form method="post" action="{% url 'document_upload' applicant.id %}" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|