{% extends 'applicant/partials/candidate_facing_base.html' %}
{% load static i18n %}
{% block title %}{% trans "Career Application Success" %} | KAAUH{% endblock %}
{% block content %}

<div class="min-h-[calc(100vh-56px)] flex items-center justify-center p-6">
    
    <div class="w-full max-w-2xl">
        
        <!-- Success Card -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 md:p-12 text-center">
            
            <!-- Success Icon -->
            <div class="inline-flex items-center justify-center w-24 h-24 rounded-full bg-emerald-100 mb-6">
                <i data-lucide="check-circle-2" class="w-12 h-12 text-emerald-500"></i>
            </div>
            
            <!-- Header -->
            <h1 class="text-3xl font-bold text-emerald-600 mb-3">
                {% trans "Thank You!" %}
            </h1>
            
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                {% trans "Your application has been received." %}
            </h2>
            
            <!-- Message -->
            <p class="text-gray-600 text-base leading-relaxed mb-8 max-w-xl mx-auto">
                {% trans "We appreciate your interest in KAAUH. Our recruitment team will review your qualifications and contact you if you are shortlisted for an interview." %}
            </p>
            
            <!-- Info Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                <div class="bg-gray-50 rounded-xl p-4">
                    <div class="flex items-center justify-center gap-2 mb-2">
                        <i data-lucide="file-check" class="w-5 h-5 text-kaauh-blue"></i>
                        <span class="text-xs font-bold text-gray-600 uppercase">{% trans "Application" %}</span>
                    </div>
                    <p class="text-sm font-semibold text-gray-900">{% trans "Submitted" %}</p>
                </div>
                
                <div class="bg-gray-50 rounded-xl p-4">
                    <div class="flex items-center justify-center gap-2 mb-2">
                        <i data-lucide="eye" class="w-5 h-5 text-kaauh-blue"></i>
                        <span class="text-xs font-bold text-gray-600 uppercase">{% trans "Status" %}</span>
                    </div>
                    <p class="text-sm font-semibold text-gray-900">{% trans "Under Review" %}</p>
                </div>
                
                <div class="bg-gray-50 rounded-xl p-4">
                    <div class="flex items-center justify-center gap-2 mb-2">
                        <i data-lucide="clock" class="w-5 h-5 text-kaauh-blue"></i>
                        <span class="text-xs font-bold text-gray-600 uppercase">{% trans "Response" %}</span>
                    </div>
                    <p class="text-sm font-semibold text-gray-900">{% trans "Within 2 Weeks" %}</p>
                </div>
            </div>
            
            <!-- Action Button -->
            <a href="{% url 'kaauh_career' %}" 
               class="inline-flex items-center justify-center gap-2 bg-kaauh-blue hover:bg-[#004f57] text-white font-semibold px-8 py-3 rounded-xl text-sm transition shadow-sm hover:shadow-md">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                {% trans "Return to Careers" %}
            </a>
            
        </div>
        
        <!-- Additional Info -->
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-500">
                {% trans "Have questions?" %} 
                <a href="mailto:recruitment@kaauh.edu.sa" class="text-kaauh-blue hover:text-kaauh-blue/80 font-medium">
                    {% trans "Contact our recruitment team" %}
                </a>
            </p>
        </div>
        
    </div>
    
</div>

<script>
    lucide.createIcons();
</script>

{% endblock content %}