142 lines
8.2 KiB
HTML
142 lines
8.2 KiB
HTML
{% load static i18n %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
|
|
<!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">
|
|
<title>{% trans "Careers" %} - {% block title %}{% trans "Application Form" %}{% endblock %}</title>
|
|
|
|
<link rel="icon" type="image/png" href="{% static 'image/favicon/favicon-32x32.png'%}">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'temple-red': '#9d2235',
|
|
'temple-red-dark': '#7a1a29',
|
|
'temple-cream': '#f8f7f2',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="font-sans bg-gray-50 text-gray-900">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="h-[70px] bg-white border-b border-gray-200 flex items-center px-4 md:px-8 sticky top-0 z-50 justify-between">
|
|
<a href="{% url 'kaauh_career' %}" class="flex items-center gap-3 font-bold text-temple-red text-xl no-underline">
|
|
<div class="w-11 h-11 bg-temple-red text-white rounded-lg flex items-center justify-center text-2xl font-extrabold">
|
|
<svg style="width:24px; height:24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="hidden md:inline">{% trans "Careers" %}</span>
|
|
</a>
|
|
|
|
<div class="flex items-center gap-4">
|
|
{% if request.resolver_match.url_name != "kaauh_career" %}
|
|
<a href="{% url 'kaauh_career' %}" class="text-gray-500 font-medium transition hover:text-temple-red no-underline hidden md:block">
|
|
{% trans "Careers" %}
|
|
</a>
|
|
{% endif %}
|
|
|
|
<form action="{% url 'set_language' %}" method="post">
|
|
{% csrf_token %}
|
|
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
|
{% if LANGUAGE_CODE == 'en' %}
|
|
<button name="language" value="ar" class="bg-transparent border border-gray-300 px-4 py-2 rounded-lg cursor-pointer flex items-center gap-2 font-medium text-temple-red transition hover:bg-temple-cream" type="submit">
|
|
🇸🇦 <span class="hidden md:inline">العربية</span>
|
|
</button>
|
|
{% else %}
|
|
<button name="language" value="en" class="bg-transparent border border-gray-300 px-4 py-2 rounded-lg cursor-pointer flex items-center gap-2 font-medium text-temple-red transition hover:bg-temple-cream" type="submit">
|
|
🇺🇸 <span class="hidden md:inline">English</span>
|
|
</button>
|
|
{% endif %}
|
|
</form>
|
|
|
|
{% if request.user.is_authenticated %}
|
|
<div class="dropdown relative" id="userDropdown">
|
|
<button class="bg-none border-none cursor-pointer flex items-center" onclick="toggleDropdown()">
|
|
{% if user.profile_image %}
|
|
<img src="{{ user.profile_image.url }}" class="w-10 h-10 rounded-full object-cover border-2 border-temple-cream">
|
|
{% else %}
|
|
<div class="w-10 h-10 rounded-full bg-temple-red text-white flex items-center justify-center font-bold">
|
|
{{ user.username|first|upper }}
|
|
</div>
|
|
{% endif %}
|
|
</button>
|
|
|
|
<div class="dropdown-menu absolute top-[50px] end-0 bg-white min-w-[260px] rounded-xl shadow-lg border border-gray-200 overflow-hidden z-[60] hidden">
|
|
<div class="p-4 border-b border-gray-200 flex items-center gap-3">
|
|
<div>
|
|
<div class="font-semibold text-gray-900">{{ user.get_full_name|default:user.username }}</div>
|
|
<div class="text-sm text-gray-500">{{ user.email|truncatechars:22 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="{% url 'applicant_portal_dashboard' %}" class="flex items-center p-3 text-gray-700 gap-3 transition hover:bg-temple-cream border-none bg-none w-full text-left cursor-pointer text-base no-underline">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
|
{% trans "Dashboard" %}
|
|
</a>
|
|
|
|
<a href="{% url 'user_detail' request.user.pk %}" class="flex items-center p-3 text-gray-700 gap-3 transition hover:bg-temple-cream border-none bg-none w-full text-left cursor-pointer text-base no-underline">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
{% trans "My Profile" %}
|
|
</a>
|
|
|
|
<form method="post" action="{% url 'account_logout'%}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="flex items-center p-3 text-red-500 gap-3 transition hover:bg-temple-cream border-none bg-none w-full text-left cursor-pointer text-base">
|
|
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
|
{% trans "Sign Out" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Alert Messages -->
|
|
{% if messages %}
|
|
<div class="max-w-5xl mx-auto my-4 px-4">
|
|
{% for message in messages %}
|
|
<div class="p-4 rounded-lg bg-red-50 text-temple-red-dark border-l-4 border-temple-red mb-3 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
{{ message }}
|
|
</div>
|
|
<button onclick="this.parentElement.remove()" class="bg-none border-none cursor-pointer text-xl">×</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<style>
|
|
.dropdown.active .dropdown-menu { display: block; }
|
|
</style>
|
|
|
|
<script>
|
|
function toggleDropdown() {
|
|
document.getElementById('userDropdown').classList.toggle('active');
|
|
}
|
|
|
|
// Close dropdown when clicking outside
|
|
window.addEventListener('click', function(e) {
|
|
if (!document.getElementById('userDropdown')?.contains(e.target)) {
|
|
document.getElementById('userDropdown')?.classList.remove('active');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% block customJS %}{% endblock %}
|
|
</body>
|
|
</html> |