252 lines
14 KiB
HTML
252 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Job Bank - All Opportunities" %}{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-6">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'dashboard' %}" class="text-gray-500 hover:text-temple-red transition flex items-center gap-1">
|
|
<i data-lucide="home" class="w-4 h-4"></i> {% trans "Dashboard" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="text-temple-red font-semibold">{% trans "Job Bank" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header Section -->
|
|
<div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white rounded-2xl p-8 mb-6 text-center">
|
|
<h1 class="text-3xl font-bold mb-2 flex items-center justify-center gap-3">
|
|
<i data-lucide="briefcase" class="w-10 h-10"></i>
|
|
{% trans "Job Bank" %}
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<!-- Filters Section -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
|
|
<form method="GET">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-4">
|
|
<!-- Search -->
|
|
<div>
|
|
<label for="search" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Search Jobs" %}</label>
|
|
<div class="relative">
|
|
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
|
|
<input type="text" id="search" name="q" value="{{ search_query }}"
|
|
placeholder="{% trans "Search by title, department, or keywords..." %}"
|
|
class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Filter -->
|
|
<div>
|
|
<label for="department" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Department" %}</label>
|
|
<select id="department" name="department" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition">
|
|
<option value="">{% trans "All Departments" %}</option>
|
|
{% for dept in departments %}
|
|
<option value="{{ dept }}" {% if department_filter == dept %}selected{% endif %}>
|
|
{{ dept }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Job Type Filter -->
|
|
<div>
|
|
<label for="job_type" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Job Type" %}</label>
|
|
<select id="job_type" name="job_type" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition">
|
|
<option value="">{% trans "All Types" %}</option>
|
|
{% for key, value in job_types.items %}
|
|
<option value="{{ key }}" {% if job_type_filter == key %}selected{% endif %}>
|
|
{{ value }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Workplace Type Filter -->
|
|
<div>
|
|
<label for="workplace_type" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Workplace Type" %}</label>
|
|
<select id="workplace_type" name="workplace_type" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition">
|
|
<option value="">{% trans "All Types" %}</option>
|
|
{% for key, value in workplace_types.items %}
|
|
<option value="{{ key }}" {% if workplace_type_filter == key %}selected{% endif %}>
|
|
{{ value }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Status Filter -->
|
|
<div>
|
|
<label for="status" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Status" %}</label>
|
|
<select id="status" name="status" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition">
|
|
<option value="">{% trans "All Statuses" %}</option>
|
|
{% for key, value in status_choices.items %}
|
|
<option value="{{ key }}" {% if status_filter == key %}selected{% endif %}>
|
|
{{ value }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Date Filter -->
|
|
<div>
|
|
<label for="date_filter" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Posted Within" %}</label>
|
|
<select id="date_filter" name="date_filter" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition">
|
|
<option value="">{% trans "Any Time" %}</option>
|
|
<option value="week" {% if date_filter == 'week' %}selected{% endif %}>{% trans "Last Week" %}</option>
|
|
<option value="month" {% if date_filter == 'month' %}selected{% endif %}>{% trans "Last Month" %}</option>
|
|
<option value="quarter" {% if date_filter == 'quarter' %}selected{% endif %}>{% trans "Last 3 Months" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Sort By -->
|
|
<div>
|
|
<label for="sort" class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Sort By" %}</label>
|
|
<select id="sort" name="sort" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition">
|
|
<option value="-created_at" {% if sort_by == '-created_at' %}selected{% endif %}>{% trans "Newest First" %}</option>
|
|
<option value="created_at" {% if sort_by == 'created_at' %}selected{% endif %}>{% trans "Oldest First" %}</option>
|
|
<option value="title" {% if sort_by == 'title' %}selected{% endif %}>{% trans "Title (A-Z)" %}</option>
|
|
<option value="-title" {% if sort_by == '-title' %}selected{% endif %}>{% trans "Title (Z-A)" %}</option>
|
|
<option value="department" {% if sort_by == 'department' %}selected{% endif %}>{% trans "Department (A-Z)" %}</option>
|
|
<option value="-department" {% if sort_by == '-department' %}selected{% endif %}>{% trans "Department (Z-A)" %}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Actions -->
|
|
<div class="flex gap-3">
|
|
<button type="submit" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-6 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="filter" class="w-4 h-4"></i>
|
|
{% trans "Apply Filters" %}
|
|
</button>
|
|
<a href="{% url 'job_bank' %}" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-6 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="rotate-ccw" class="w-4 h-4"></i>
|
|
{% trans "Clear All" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Results Header -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="bar-chart-2" class="w-5 h-5 text-temple-red"></i>
|
|
<span class="text-gray-900 font-semibold">
|
|
{% trans "Found" %} <strong>{{ total_jobs }}</strong> {% trans "job" %}{{ total_jobs|pluralize }}
|
|
{% if search_query or department_filter or job_type_filter or workplace_type_filter or status_filter or date_filter %}
|
|
<span class="text-gray-500">{% trans "with filters applied" %}</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jobs Grid -->
|
|
{% if page_obj.object_list %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-6">
|
|
{% for job in page_obj.object_list %}
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition-shadow relative overflow-hidden">
|
|
<!-- Status Badge -->
|
|
<div class="absolute top-4 right-4">
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide
|
|
{% if job.status == 'ACTIVE' %}bg-emerald-500 text-white
|
|
{% elif job.status == 'DRAFT' %}bg-gray-500 text-white
|
|
{% elif job.status == 'CLOSED' %}bg-amber-500 text-white
|
|
{% else %}bg-red-500 text-white{% endif %}">
|
|
{{ job.get_status_display }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Job Title -->
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2 pr-20">{{ job.title }}</h3>
|
|
|
|
<!-- Department -->
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 mb-3">
|
|
<i data-lucide="building-2" class="w-4 h-4 text-temple-red"></i>
|
|
<span>{{ job.department|default:"General" }}</span>
|
|
</div>
|
|
|
|
<!-- Job Meta -->
|
|
<div class="flex flex-wrap gap-3 text-sm text-gray-500 mb-4">
|
|
<div class="flex items-center gap-1.5">
|
|
<i data-lucide="briefcase" class="w-4 h-4"></i>
|
|
<span>{{ job.get_job_type_display }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<i data-lucide="globe" class="w-4 h-4"></i>
|
|
<span>{{ job.get_workplace_type_display }}</span>
|
|
</div>
|
|
{% if job.max_applications %}
|
|
<div class="flex items-center gap-1.5">
|
|
<i data-lucide="users" class="w-4 h-4"></i>
|
|
<span>{{ job.max_applications }} {% trans "positions" %}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Description Preview -->
|
|
<div class="text-sm text-gray-600 mb-4 line-clamp-3">
|
|
{{ job.description|striptags|truncatewords:30 }}
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex gap-2">
|
|
{% if job.status == 'ACTIVE' %}
|
|
<a href="{% url 'job_applicants' job.slug %}" class="inline-flex items-center gap-2 flex-1 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-4 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md justify-center">
|
|
<i data-lucide="users" class="w-4 h-4"></i>
|
|
{% trans "View Applicants" %}
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'job_detail' job.slug %}" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2.5 rounded-xl text-sm transition justify-center">
|
|
<i data-lucide="eye" class="w-4 h-4"></i>
|
|
{% trans "View Details" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if page_obj.has_other_pages %}
|
|
{% include "includes/paginator.html" %}
|
|
{% endif %}
|
|
{% else %}
|
|
<!-- No Results -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center">
|
|
<div class="bg-gray-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="briefcase" class="w-8 h-8 text-gray-400"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 mb-2">{% trans "No Jobs Found" %}</h3>
|
|
<p class="text-gray-500 mb-6">
|
|
{% if search_query or department_filter or job_type_filter or workplace_type_filter or status_filter or date_filter %}
|
|
{% trans "We couldn't find any jobs matching your current filters. Try adjusting your search criteria or clearing some filters." %}
|
|
{% else %}
|
|
{% trans "There are currently no job postings in the system. Check back later for new opportunities!" %}
|
|
{% endif %}
|
|
</p>
|
|
<a href="{% url 'job_bank' %}" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-6 py-3 rounded-xl text-sm transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="refresh-cw" class="w-5 h-5"></i>
|
|
{% trans "Clear Filters" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %} |