352 lines
22 KiB
HTML
352 lines
22 KiB
HTML
{% load i18n static %}
|
|
{% load partials %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Applicant Tracking System' %}">
|
|
<title>{% block title %}{% trans 'University ATS' %}{% endblock %}</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
{% comment %} <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
|
|
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> {% endcomment %}
|
|
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
|
|
|
{% block customCSS %}{% endblock %}
|
|
</head>
|
|
<body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
|
|
|
<div class="top-bar d-none d-md-block">
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center gap-2 max-width-1600">
|
|
<div class="d-flex align-items-center gap-3 social-icons">
|
|
</div>
|
|
<div class="contact-info d-flex gap-3">
|
|
</div>
|
|
<div class="logo-container d-flex gap-2">
|
|
<img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy">
|
|
<div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 ms-4">
|
|
<div class="hospital-text text-center text-md-start me-3">
|
|
<div class="ar small">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
|
|
<div class="ar small">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
|
|
<div class="en small">Princess Nourah bint Abdulrahman University</div>
|
|
<div class="en small">King Abdullah bin Abdulaziz University Hospital</div>
|
|
</div>
|
|
|
|
</div>
|
|
<img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 100px;max-width:100px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-content-wrapper max-width-1600 d-flex justify-content-between align-items-center" style="width: 100%;">
|
|
<a class="navbar-brand text-white d-none d-md-block" href="{% url 'dashboard' %}">
|
|
<img src="{% static 'image/kaauh_green1.png' %}" alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item me-4">
|
|
<a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
|
|
<span class="d-flex align-items-center gap-2">
|
|
{% include "icons/jobs.html" %}
|
|
{% trans "Jobs" %}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item me-4">
|
|
<a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
|
|
<span class="d-flex align-items-center gap-2">
|
|
{% include "icons/users.html" %}
|
|
{% trans "Applicants" %}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item me-4">
|
|
<a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
|
|
<span class="d-flex align-items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
{% trans "Meetings" %}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item me-4">
|
|
<a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
|
|
<span class="d-flex align-items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
|
|
</svg>
|
|
|
|
{% trans "Training" %}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item dropdown ms-2">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
|
data-bs-offset="0, 8" data-bs-auto-close="outside">
|
|
{% trans "More" %}
|
|
</a>
|
|
<ul class="dropdown-menu" data-bs-popper="static">
|
|
<li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
|
|
<li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
|
|
<li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
|
|
<li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav me-2">
|
|
<li class="nav-item dropdown">
|
|
<a class="language-toggle-btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
|
data-bs-offset="0, 8" aria-expanded="false" aria-label="{% trans 'Toggle language menu' %}">
|
|
<i class="fas fa-globe"></i>
|
|
<span class="d-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
|
|
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
|
|
<li>
|
|
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
|
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
|
<button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
|
|
<span class="me-2">🇺🇸</span> English
|
|
</button>
|
|
</form>
|
|
</li>
|
|
|
|
<li>
|
|
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
|
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
|
<button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
|
|
<span class="me-2">🇸🇦</span> العربية (Arabic)
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav ms-4">
|
|
<li class="nav-item dropdown">
|
|
<button
|
|
class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
aria-label="{% trans 'Toggle user menu' %}"
|
|
data-bs-auto-close="outside"
|
|
data-bs-offset="0, 8"
|
|
>
|
|
{% if user.profile.profile_image %}
|
|
<img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
|
style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
|
|
title="{% trans 'Your account' %}">
|
|
{% else %}
|
|
<div class="profile-avatar" title="{% trans 'Your account' %}">
|
|
{{ user.username|first|upper }}
|
|
</div>
|
|
{% endif %}
|
|
</button>
|
|
<ul
|
|
class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
|
|
data-bs-popper="static"
|
|
style="min-width: 240px;"
|
|
>
|
|
<li class="px-4 py-3 ">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
|
|
{% if user.profile.profile_image %}
|
|
<img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
|
|
style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
|
|
title="{% trans 'Your account' %}">
|
|
{% else %}
|
|
<div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
|
|
style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
|
|
{{ user.username|first|upper }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
|
|
<div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li><hr class="dropdown-divider my-1"></li>
|
|
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
|
|
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
|
|
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
|
|
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
|
|
<li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#">
|
|
{% if not request.session.linkedin_authenticated %}
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{% url 'linkedin_login' %}">
|
|
<i class="fab fa-linkedin me-1"></i> {% trans "Connect LinkedIn" %}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
{% else %}
|
|
<i class="fab fa-linkedin text-primary me-1"></i>
|
|
<span class="text-primary d-none d-lg-inline ms-auto me-3">
|
|
{% trans "LinkedIn Connected" %}
|
|
</span>
|
|
{% endif %}
|
|
</a></li>
|
|
|
|
<li><hr class="dropdown-divider my-1"></li>
|
|
<li>
|
|
<form method="post" action="{% url 'account_logout'%}" class="d-inline">
|
|
{% csrf_token %}
|
|
<button
|
|
type="submit"
|
|
class="dropdown-item py-2 px-4 text-danger d-flex align-items-center border-0 bg-transparent text-start"
|
|
aria-label="{% trans 'Sign out' %}"
|
|
>
|
|
<i class="fas fa-sign-out-alt me-3 fs-5"></i>
|
|
<span>{% trans "Sign Out" %}</span>
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<main class="container-fluid flex-grow-1" style="max-width: 1600px; margin: 0 auto;">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% trans 'Close' %}"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% block content %}
|
|
{% endblock %}
|
|
</main>
|
|
|
|
<footer class="mt-auto">
|
|
<div class="footer-bottom py-3 small text-muted" style="background-color: #00363a;">
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap max-width-1600">
|
|
<p class="mb-0 text-white-50">
|
|
© {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %}
|
|
{% trans "All rights reserved." %}
|
|
</p>
|
|
<a class="text-decoration-none" href="https://tenhal.sa/" target='_blank'>
|
|
<p class="mb-0 text-white-50">
|
|
{% trans "Powered by" %} <strong class="text-white">Tenhal</strong>
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
{% include 'includes/delete_modal.html' %}
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const forms = document.querySelectorAll('form');
|
|
|
|
forms.forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
// Find the submit button within this form
|
|
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
|
|
|
if (submitButton) {
|
|
// Disable the button
|
|
submitButton.disabled = true;
|
|
|
|
// Optional: Add a loading class for styling
|
|
submitButton.classList.add('loading');
|
|
|
|
// Re-enable the button if the form submission fails
|
|
// This ensures the button doesn't stay disabled if there's an error
|
|
window.addEventListener('unload', function() {
|
|
submitButton.disabled = false;
|
|
submitButton.classList.remove('loading');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Navbar collapse auto-close on link click (Standard Mobile UX)
|
|
const navbarCollapse = document.getElementById('navbarNav');
|
|
if (navbarCollapse) {
|
|
const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle)');
|
|
const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse, { toggle: false });
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
// Only collapse if the nav is actually shown (i.e., on mobile)
|
|
if (navbarCollapse.classList.contains('show')) {
|
|
bsCollapse.hide();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Mobile logout confirmation (Good UX for small screens)
|
|
const logoutButton = document.querySelector('form[action$="/logout/"] button');
|
|
if (logoutButton) {
|
|
logoutButton.addEventListener('click', (e) => {
|
|
// Check if screen is small (e.g., Bootstrap large breakpoint is 992px)
|
|
if (window.innerWidth <= 992) {
|
|
const confirmed = confirm('{% trans "Are you sure you want to sign out?" %}');
|
|
if (!confirmed) e.preventDefault();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle language form submission: Manually trigger click on button inside form
|
|
document.querySelectorAll('.language-toggle-btn').forEach(toggle => {
|
|
const menu = toggle.nextElementSibling;
|
|
if (menu) {
|
|
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
// Find the containing form and submit it
|
|
const form = item.closest('form');
|
|
if (form) {
|
|
form.submit();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
|
|
{% comment %} <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.5/bundles/datastar.js"></script> {% endcomment %}
|
|
|
|
{% block customJS %}{% endblock %}
|
|
|
|
</body>
|
|
</html> |