{% load static i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as language_info_list %}

<!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 %}{% translate "Application Form" %}{% endblock %}</title>

    {% comment %} Load the correct Bootstrap CSS file for RTL/LTR {% endcomment %}
    {% if LANGUAGE_CODE == 'ar' %}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    {% else %}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    {% endif %}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
    /* ---------------------------------------------------------------------- */
    /* THEME & UTILITY VARIABLES */
    /* ---------------------------------------------------------------------- */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-teal-light: #e6f7f8;    /* Very light teal for hover/background */
        --success: #198754;
        --danger: #dc3545;
        --light-bg: #f8f9fa;
        --gray-text: #6c757d;
        --kaauh-border: #d0d7de;        /* Cleaner border color */
        --kaauh-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* Deeper shadow for premium look */
        --kaauh-dark-bg: #0d0d0d;
        --kaauh-dark-contrast: #1c1c1c;

        /* CALCULATED STICKY HEIGHTS (As provided in base) */
        --navbar-height: 56px;
        --navbar-gap: 16px;
        --sticky-navbar-total-height: 128px;
    }

    body {
        min-height: 100vh;
        background-color: #f0f0f5;
        padding-top: 0;
    }

    .text-primary-theme { color: var(--kaauh-teal) !important; }
    .text-primary-theme-hover:hover { color: var(--kaauh-teal-dark) !important; }

    /* Language Dropdown Styles */
    .language-toggle-btn {
        background-color: transparent;
        border: 1px solid var(--kaauh-border);
        color: var(--kaauh-teal);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        min-width: 120px;
        justify-content: center;
    }

    .language-toggle-btn:hover {
        background-color: var(--kaauh-teal-light);
        border-color: var(--kaauh-teal);
        color: var(--kaauh-teal-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 99, 110, 0.15);
    }

    .language-toggle-btn:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
        border-color: var(--kaauh-teal);
    }

    .language-toggle-btn::after {
        margin-left: 0.5rem;
    }

    .dropdown-menu {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        padding: 0.5rem;
        min-width: 180px;
    }

    .dropdown-menu .dropdown-item {
        padding: 0.75rem 1rem;
        transition: all 0.2s ease;
        border-radius: 0.375rem;
        margin: 0.25rem 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 500;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
    }

    .dropdown-menu .dropdown-item:hover {
        background-color: var(--kaauh-teal);
        color: white;
        transform: translateX(4px);
    }

    .dropdown-menu .dropdown-item:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
    }

    .dropdown-menu .dropdown-item.active {
        background-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0, 99, 110, 0.2);
    }

    .dropdown-menu .dropdown-item.active:hover {
        background-color: var(--kaauh-teal-dark);
    }

    .flag-emoji {
        font-size: 1.2rem;
        line-height: 1;
        min-width: 24px;
        text-align: center;
    }

    .language-text {
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* RTL Support for Language Dropdown */
    html[dir="rtl"] .language-toggle-btn {
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .dropdown-menu .dropdown-item {
        flex-direction: row-reverse;
        text-align: right;
    }

    html[dir="rtl"] .dropdown-menu .dropdown-item:hover {
        transform: translateX(-4px);
    }

    /* Mobile Responsiveness */
    @media (max-width: 768px) {
        .language-toggle-btn {
            min-width: 100px;
            padding: 0.4rem 0.8rem;
            font-size: 0.9rem;
        }

        .dropdown-menu {
            min-width: 160px;
        }

        .dropdown-menu .dropdown-item {
            padding: 0.6rem 0.8rem;
            font-size: 0.85rem;
        }

        .flag-emoji {
            font-size: 1rem;
            min-width: 20px;
        }
    }

    .bg-kaauh-teal {
         background-color: #00636e;
    }

    .btn-main-action {
        background-color: var(--kaauh-teal);
        color: white;
        border: none;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        box-shadow: 0 6px 15px rgba(0, 99, 110, 0.4); /* Stronger shadow */
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        color: white;
        transform: translateY(-2px); /* More pronounced lift */
        box-shadow: 0 10px 20px rgba(0, 99, 110, 0.5);
    }
    /* ---------------------------------------------------------------------- */
    /* 1. DARK HERO STYLING (High Contrast) */
    /* ---------------------------------------------------------------------- */
    .hero-section {
        background: linear-gradient(135deg, var(--kaauh-dark-contrast) 0%, var(--kaauh-dark-bg) 100%);
        padding: 4rem 0; /* Reduced from 8rem to 4rem */
        margin-top: -1px;
        color: white;
        position: relative;
        overflow: hidden;
    }
    .hero-title {
        font-size: 2.5rem; /* Reduced from 3.5rem to 2.5rem */
        font-weight: 800; /* Extra bold */
        line-height: 1.1;
        letter-spacing: -0.05em;
        max-width: 900px;
    }
    .hero-section .lead {
        font-size: 1.35rem; /* Larger lead text */
    }
    .btn-hero-action {
        /* Primary CTA: Retained strong teal look */
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        font-weight: 600;
        padding: 0.8rem 2.2rem;
        border-radius: 50rem;
        box-shadow: 0 4px 10px rgba(0, 99, 110, 0.4);
    }
    @media (min-width: 992px) {
        .hero-section {
            padding: 10rem 0;
        }
        .hero-title {
            font-size: 5.5rem;
        }
    }

    /* ---------------------------------------------------------------------- */
    /* 2. PATH CARDS SECTION (New Segmented Entry) */
    /* ---------------------------------------------------------------------- */
    .path-card-section {
        background-color: white;
        margin-top: -80px; /* Pulls the section up over the dark hero for a modern layered look */
        position: relative;
        z-index: 50;
        padding-top: 5rem;
        padding-bottom: 5rem;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        box-shadow: var(--kaauh-shadow); /* Defines the separation */
    }
    .path-card {
        padding: 2rem;
        border-radius: 1rem;
        border: 1px solid var(--kaauh-border);
        transition: all 0.3s ease;
        height: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    .path-card:hover {
        border-color: var(--kaauh-teal);
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 99, 110, 0.1);
    }
    .path-card-icon {
        color: var(--kaauh-teal);
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    .path-card h5 {
        font-weight: 700;
        color: var(--kaauh-teal-dark);
        margin-bottom: 0.5rem;
    }

    /* ---------------------------------------------------------------------- */
    /* 3. JOB LISTING & FILTER (Refined) */
    /* ---------------------------------------------------------------------- */
    .job-listing-section {
        background-color: #f0f0f5; /* Separates the job list from the white path section */
        padding-top: 3rem;
    }

    .job-listing-card {
        border: 1px solid var(--kaauh-border);
        border-left: 6px solid var(--kaauh-teal);
        border-radius: 0.75rem;
        padding: 2rem !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Lighter default shadow */
    }
    .job-listing-card:hover {
        transform: translateY(-3px); /* Increased lift */
        box-shadow: 0 12px 25px rgba(0, 99, 110, 0.15); /* Stronger hover shadow */
        background-color: var(--kaauh-teal-light);
    }

    .card.sticky-top-filters {
        box-shadow: var(--kaauh-shadow); /* Uses the deeper card shadow */
    }

    /* RTL Corrections (retained) */
    html[dir="rtl"] .alert { border-right: 5px solid; border-left: none; }
    html[dir="rtl"] .job-listing-card { border-right: 6px solid var(--kaauh-teal); border-left: 1px solid var(--kaauh-border); }
    </style>
</head>
<body>

    <nav id="topNavbar" class="navbar navbar-expand-lg sticky-top bg-white border-bottom" style="z-index: 1040;">
    <div class="container-fluid">
        <a class="navbar-brand text-dark fw-bold" href="{% url 'kaauh_career' %}">
            <img src="{% static 'image/kaauh.jpeg' %}" alt="{% translate 'KAAUH IMAGE' %}" style="height: 50px; margin-right: 10px;">
            <span style="color:#00636e;">KAAUH Careers</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">

                {% comment %} <li class="nav-item">
                    <a class="nav-link text-secondary" href="{% url 'applicant_profile'  %}">{% translate "Applications" %}</a>
                </li> {% endcomment %}
                <li class="nav-item">
                    <a class="nav-link text-secondary" href="{% url 'candidate_portal_dashboard'  %}">{% translate "Profile" %}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-secondary" href="{% url 'kaauh_career' %}">{% translate "Careers" %}</a>
                </li>

                <li class="nav-item dropdown">
                    <button class="language-toggle-btn dropdown-toggle" type="button"
                        data-bs-toggle="dropdown" data-bs-offset="0, 8" aria-expanded="false"
                        aria-label="{% trans 'Toggle language menu' %}">
                        <i class="fas fa-globe"></i>
                        <span class="d-inline">{{ LANGUAGE_CODE|upper }}</span>
                    </button>

                    <ul class="dropdown-menu mx-auto {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-end{% else %}dropdown-menu-end{% endif %}" aria-labelledby="navbarLanguageDropdown">

                        <li>
                            <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
                                <input name="next" type="hidden" value="{{ request.get_full_path }}">
                                <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
                                    <span class="flag-emoji">🇺🇸</span>
                                    <span class="language-text">English</span>
                                </button>
                            </form>
                        </li>

                        <li>
                            <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
                                <input name="next" type="hidden" value="{{ request.get_full_path }}">
                                <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
                                    <span class="flag-emoji">🇸🇦</span>
                                    <span class="language-text">العربية (Arabic)</span>
                                </button>
                            </form>
                        </li>
                    </ul>
                </li>
                </ul>
        </div>
    </div>
</nav>

{% if messages %}
        <div class="container message-container mt-3">
            <div class="row">
                {# Use responsive columns matching the main content block for alignment #}
                <div class="col-lg-12 order-lg-1 col-12 mx-auto">
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i> {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

 {# ================================================= #}
    {# DJANGO MESSAGE BLOCK - Placed directly below the main navbar #}
    {# ================================================= #}

    {# ================================================= #}



    {% block content %}


    {% endblock content %}


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

{% block customJS %}
{% endblock %}
</body>
</html>
