262 lines
16 KiB
HTML
262 lines
16 KiB
HTML
{% load i18n %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
|
|
{% if LANGUAGE_CODE == 'en' %}
|
|
<h5 class="text-lg font-bold text-gray-900 mb-4">{% trans "AI Score" %}:
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium"><i data-lucide="bot" class="w-3.5 h-3.5"></i> {{ application.match_score }}%</span>
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium"><i data-lucide="graduation-cap" class="w-3.5 h-3.5"></i> {{ application.professional_category }}</span>
|
|
</h5>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="briefcase" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Job Fit" %}</small>
|
|
</div>
|
|
<p class="text-gray-700 text-sm">{{ application.job_fit_narrative }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="star" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Top Keywords" %}</small>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for keyword in application.top_3_keywords %}
|
|
<span class="inline-block px-2.5 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="clock" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Experience" %}</small>
|
|
</div>
|
|
<p class="text-sm mb-1"><strong class="text-gray-900">{{ application.years_of_experience }}</strong> {% trans "years" %}</p>
|
|
<p class="text-sm text-gray-700"><strong class="text-gray-900">{% trans "Recent Role:" %}</strong> {{ application.most_recent_job_title }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="trending-up" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Skills" %}</small>
|
|
</div>
|
|
<p class="text-sm mb-1"><strong class="text-gray-900">{% trans "Soft Skills:" %}</strong> {{ application.soft_skills_score }}%</p>
|
|
<p class="text-sm"><strong class="text-gray-900">{% trans "Industry Match:" %}</strong>
|
|
<span class="inline-block px-2.5 py-1 rounded-full text-xs font-medium {% if application.industry_match_score >= 70 %}bg-green-100 text-green-800{% elif application.industry_match_score >= 40 %}bg-yellow-100 text-yellow-800{% else %}bg-red-100 text-red-800{% endif %}">
|
|
{{ application.industry_match_score }}%
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="message-square" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Recommendation" %}</label>
|
|
<textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-700 text-sm" rows="6" readonly>{{ application.recommendation }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="thumbs-up" class="w-4 h-4 inline mr-1 text-green-600"></i> {% trans "Strengths" %}</label>
|
|
<textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-700 text-sm" rows="4" readonly>{{ application.strengths }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="thumbs-down" class="w-4 h-4 inline mr-1 text-red-600"></i> {% trans "Weaknesses" %}</label>
|
|
<textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-700 text-sm" rows="4" readonly>{{ application.weaknesses }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="check-square" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Criteria Assessment" %}</label>
|
|
<div class="overflow-hidden rounded-lg border border-gray-200">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-temple-red text-white">
|
|
<th class="px-4 py-3 text-left font-semibold">{% trans "Criteria" %}</th>
|
|
<th class="px-4 py-3 text-left font-semibold">{% trans "Status" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for criterion, status in application.criteria_checklist.items %}
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 text-gray-900">{{ criterion }}</td>
|
|
<td class="px-4 py-3">
|
|
{% if status == "Met" %}
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium"><i data-lucide="check" class="w-3 h-3"></i> {% trans "Met" %}</span>
|
|
{% elif status == "Not Met" %}
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium"><i data-lucide="x" class="w-3 h-3"></i> {% trans "Not Met" %}</span>
|
|
{% else %}
|
|
<span class="inline-block px-2.5 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">{{ status }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Minimum Requirements" %}</small>
|
|
</div>
|
|
{% if application.min_requirements_met %}
|
|
<span class="inline-block px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">{% trans "Met" %}</span>
|
|
{% else %}
|
|
<span class="inline-block px-2.5 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">{% trans "Not Met" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="star" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Screening Rating" %}</small>
|
|
</div>
|
|
<span class="inline-block px-2.5 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">{{ application.screening_stage_rating }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if application.language_fluency %}
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="globe" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Language Fluency" %}</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for language in application.language_fluency %}
|
|
<span class="inline-block px-2.5 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">{{ language }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<h5 class="text-lg font-bold text-gray-900 mb-4">{% trans "AI Score" %}:
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium"><i data-lucide="bot" class="w-3.5 h-3.5"></i> {{ application.match_score }}%</span>
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium"><i data-lucide="graduation-cap" class="w-3.5 h-3.5"></i> {{ application.professional_category_ar }}</span>
|
|
</h5>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="briefcase" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Job Fit" %}</small>
|
|
</div>
|
|
<p class="text-gray-700 text-sm">{{ application.job_fit_narrative_ar }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="star" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Top Keywords" %}</small>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for keyword in application.top_3_keywords_ar %}
|
|
<span class="inline-block px-2.5 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="clock" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Experience" %}</small>
|
|
</div>
|
|
<p class="text-sm mb-1"><strong class="text-gray-900">{{ application.years_of_experience }}</strong> {% trans "years" %}</p>
|
|
<p class="text-sm text-gray-700"><strong class="text-gray-900">{% trans "Recent Role:" %}</strong> {{ application.most_recent_job_title_ar }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="trending-up" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Skills" %}</small>
|
|
</div>
|
|
<p class="text-sm mb-1"><strong class="text-gray-900">{% trans "Soft Skills:" %}</strong> {{ application.soft_skills_score }}%</p>
|
|
<p class="text-sm"><strong class="text-gray-900">{% trans "Industry Match:" %}</strong>
|
|
<span class="inline-block px-2.5 py-1 rounded-full text-xs font-medium {% if application.industry_match_score >= 70 %}bg-green-100 text-green-800{% elif application.industry_match_score >= 40 %}bg-yellow-100 text-yellow-800{% else %}bg-red-100 text-red-800{% endif %}">
|
|
{{ application.industry_match_score }}%
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="message-square" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Recommendation" %}</label>
|
|
<textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-700 text-sm" rows="6" readonly>{{ application.recommendation_ar }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="thumbs-up" class="w-4 h-4 inline mr-1 text-green-600"></i> {% trans "Strengths" %}</label>
|
|
<textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-700 text-sm" rows="4" readonly>{{ application.strengths_ar }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="thumbs-down" class="w-4 h-4 inline mr-1 text-red-600"></i> {% trans "Weaknesses" %}</label>
|
|
<textarea class="w-full px-4 py-2.5 border border-gray-300 rounded-lg bg-gray-50 text-gray-700 text-sm" rows="4" readonly>{{ application.weaknesses_ar }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="check-square" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Criteria Assessment" %}</label>
|
|
<div class="overflow-hidden rounded-lg border border-gray-200">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-temple-red text-white">
|
|
<th class="px-4 py-3 text-left font-semibold">{% trans "Criteria" %}</th>
|
|
<th class="px-4 py-3 text-left font-semibold">{% trans "Status" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for criterion, status in application.criteria_checklist_ar.items %}
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 text-gray-900">{{ criterion }}</td>
|
|
<td class="px-4 py-3">
|
|
{% if status == "Met" %}
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium"><i data-lucide="check" class="w-3 h-3"></i> {% trans "Met" %}</span>
|
|
{% elif status == "Not Met" %}
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium"><i data-lucide="x" class="w-3 h-3"></i> {% trans "Not Met" %}</span>
|
|
{% else %}
|
|
<span class="inline-block px-2.5 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">{{ status }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Minimum Requirements" %}</small>
|
|
</div>
|
|
{% if application.min_requirements_met_ar %}
|
|
<span class="inline-block px-2.5 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">{% trans "Met" %}</span>
|
|
{% else %}
|
|
<span class="inline-block px-2.5 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">{% trans "Not Met" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="star" class="w-4 h-4 text-temple-red"></i>
|
|
<small class="text-gray-600 font-medium">{% trans "Screening Rating" %}</small>
|
|
</div>
|
|
<span class="inline-block px-2.5 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">{{ application.screening_stage_rating_ar }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if application.language_fluency_ar %}
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"><i data-lucide="globe" class="w-4 h-4 inline mr-1 text-temple-red"></i> {% trans "Language Fluency" %}</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for language in application.language_fluency_ar %}
|
|
<span class="inline-block px-2.5 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">{{ language }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script> |