{% extends 'applicant/partials/candidate_facing_base.html' %}
{% load static i18n %}
{% block title %}{% trans "Career Application Success" %} | KAAUH{% endblock %}
{% block content %}
<style>
    /* THEME VARIABLES */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --success: #198754;
        --navbar-height: 56px; 
    }

    /* 1. WRAPPER FOR VERTICAL AND HORIZONTAL CENTERING */
    .main-content-area {
        /* This calculates height minus the top navbar to prevent scrolling */
        min-height: calc(100vh - var(--navbar-height) - 60px); 
        display: flex;
        align-items: center;      /* Vertical center */
        justify-content: center;   /* Horizontal center */
        padding: 20px;
    }

    /* 2. CARD STYLING */
    .thank-you-card {
        width: 100%;
        max-width: 600px;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        padding: 60px 40px;
        text-align: center;
        border: none;
        animation: fadeInUp 0.6s ease-out;
    }

    /* ANIMATION */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .success-icon-bg {
        width: 90px; height: 90px;
        background: #e9f7ef;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }

    .text-success-header {
        color: var(--success) !important;
        font-weight: 800;
        margin-bottom: 10px;
        letter-spacing: -0.5px;
    }

    .message-text {
        font-size: 1.1rem;
        color: #636e72;
        line-height: 1.6;
        margin-bottom: 40px;
    }

    .btn-main-action {
        background-color: var(--kaauh-teal);
        color: white;
        padding: 14px 35px;
        border-radius: 50px;
        font-weight: 700;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        box-shadow: 0 8px 15px rgba(0, 99, 110, 0.2);
    }

    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 12px 20px rgba(0, 99, 110, 0.3);
    }

    /* Secondary Nav styling */
    #confirmationNavbar {
        background-color: var(--kaauh-teal);
        padding: 12px 20px;
    }

    @media (max-width: 576px) {
        .thank-you-card { padding: 40px 20px; }
    }
</style>

<div id="confirmationNavbar" class="shadow-sm">
    <div class="container-fluid">
         <span class="text-white fw-bold">
            <i class="fas fa-check-circle me-2"></i>{% trans "Submission Complete" %}
         </span>
    </div>
</div>

<div class="main-content-area">
    <div class="thank-you-card">
        
        <div class="success-icon-bg">
            <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="var(--success)" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
            </svg>
        </div>
        
        <h1 class="text-success-header">{% trans "Thank You!" %}</h1>
        <h2 class="h5 mb-4" style="color: #2d3436; font-weight: 600;">
            {% trans "Your application has been received." %}
        </h2>
        
        <p class="message-text">
            {% 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>
        
        <div class="action-buttons">
            <a href="{% url 'kaauh_career' %}" class="btn-main-action">
                {% trans "Return to Careers" %}
            </a>
        </div>

        
    </div>
</div>

{% endblock content %}