    <div class="language-picker-container">
        <div class="language-content-wrapper">
            <h1>Confirm course language</h1>
            <p>Please confirm the language you want to use for the ‘California Dasher Safety Training’ in. You won’t be able to change it after starting.</p>
            
            <div class="language-picker-dropdown" id="language-picker">
                <button class="language-picker-btn">
                    <div class="language-picker-btn-content">
                        <img class="globe-icon" src="https://cdn.northpass.io/doordash/globe-line.svg" alt="">
                        <span>English (US)</span>
                    </div>
                    <span class="language-picker-arrow">
                        <i class="far fa-chevron-down picker-arrow"></i>
                    </span>
                </button>
                <div class="language-picker-content">
                    <div class="lang-option" course-id="0e588697-8e99-4f19-b35b-ace9b4175ee7">
                        中文 (Mandarin)
                    </div>
                    <div class="lang-option" course-id="427e075b-aad6-4ecc-8cb2-9d6cf412750b">
                        Español (Spanish)
                    </div>
                    <div class="lang-option" course-id="1abab73d-629d-42a5-bca1-53f9e2d481bb">
                        English (US)
                    </div>
                    <div class="lang-option" course-id="b130e6c4-33a5-49a7-a7dc-4f284e909c4c">
                       Tagalog
                    </div>
                </div>
            </div>
        </div>
        
        <div class="button-container">
            <button class="language-picker-confirm-btn">Confirm language</button>
        </div>
    </div>
<div class="loading-overlay" id="loadingOverlay">
    <div class="spinner"></div>
</div>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #fff;
}

.language-picker-container {
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    height: 100svh;
    flex-direction: column;
    justify-content: space-between;
    padding:15px;
    box-sizing: border-box;
}

.language-picker-container h1 {
    font-size: 1.5em;
    margin: 0 0 10px;
    font-weight: bold;
    color: #191919;
}

.language-picker-container p {
    margin: 0 0 20px;
    line-height: 1.6;
    color: #606060;
}

.language-picker-dropdown {
    position: relative;
    margin-bottom: 20px;
}

.language-picker-btn {
    width: 100%;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    padding: 10px 20px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    font-size: 1em;
    border: 2px solid #191919;
}
.button-container {
margin-top: auto;
}
.language-picker-content {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5px;
}

.language-picker-btn-content {
  display: flex;
  align-items: center;
  color: #191919;
}
.picker-arrow{
    color:#191919;
}
.language-picker-content .lang-option {
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.language-picker-content .lang-option:hover {
    background-color: #ddd;
}
.lang-option {
  padding: 9px 16px;
}
.language-picker-confirm-btn {
    width: 100%;
    background-color: #EB1700;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

.globe-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.language-picker-arrow {
    font-size: 0.8em;
}
aside {
    display: none !important;
}

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const langParam = urlParams.get('lang');

const translations = {
    en: {
        title: 'Confirm course language',
        description: "Please confirm the language you want to use for the ‘California Dasher Safety Training’. You won’t be able to change it after starting.",
        confirm: "Confirm language"
    },
    zh: {
        title: '确认课程语言',
        description: "请确认您希望使用的‘加州送餐员安全培训’的语言。开始后将无法更改。",
        confirm: "确认语言"
    },
    es: {
        title: 'Confirmar idioma del curso',
        description: "Por favor confirme el idioma que desea usar para la ‘Capacitación de seguridad de Dasher en California’. No podrá cambiarlo después de comenzar.",
        confirm: "Confirmar idioma"
    },
    tl: {
        title: 'Kumpirmahin ang wika ng kurso',
        description: "Pakikumpirma ang wika na nais mong gamitin para sa ‘California Dasher Safety Training’. Hindi na ito mababago kapag nagsimula na.",
        confirm: "Kumpirmahin ang wika"
    },
    fr: {
        title: 'Confirmer la langue du cours',
        description: "Veuillez confirmer la langue que vous souhaitez utiliser pour la ‘Formation de sécurité Dasher en Californie’. Vous ne pourrez plus la changer après avoir commencé.",
        confirm: "Confirmer la langue"
    },
    vi: {
        title: 'Xác nhận ngôn ngữ khóa học',
        description: "Vui lòng xác nhận ngôn ngữ bạn muốn sử dụng cho ‘Khóa đào tạo an toàn Dasher tại California’. Bạn sẽ không thể thay đổi sau khi bắt đầu.",
        confirm: "Xác nhận ngôn ngữ"
    },
    ko: {
        title: '과정 언어 확인',
        description: "‘캘리포니아 배달원 안전 교육’에서 사용할 언어를 확인하세요. 시작 후에는 변경할 수 없습니다.",
        confirm: "언어 확인"
    },
    hy: {
        title: 'Հաստատել դասընթացի լեզուն',
        description: "Խնդրում ենք հաստատել լեզուն, որով ցանկանում եք անցկացնել ‘Կալիֆոռնիա Դաշերի անվտանգության դասընթացը’: Սկսվելուց հետո այն չի կարող փոփոխվել։",
        confirm: "Հաստատել լեզուն"
    },
    fa: {
        title: 'تأیید زبان دوره',
        description: "لطفاً زبان مورد نظر خود را برای «آموزش ایمنی دشر کالیفرنیا» تأیید کنید. پس از شروع دوره قابل تغییر نخواهد بود.",
        confirm: "تأیید زبان"
    }
};

    if (langParam && translations[langParam]) {

        localStorage.setItem('selectedLang', langParam);

        document.body.setAttribute('data-lang', langParam);

        const t = translations[langParam];
        document.querySelector('.language-content-wrapper h1').textContent = t.title;
        document.querySelector('.language-content-wrapper p').textContent = t.description;
        document.querySelector('.language-picker-confirm-btn').textContent = t.confirm;
    }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropdown = document.getElementById('language-picker');
    const btn = dropdown.querySelector('.language-picker-btn');
    const selectedSpan = btn.querySelector('span');
    const content = dropdown.querySelector('.language-picker-content');
    const confirmBtn = document.querySelector('.language-picker-confirm-btn');
    const options = Array.from(content.querySelectorAll('.lang-option'));
    const loadingOverlay = document.getElementById('loadingOverlay');

    let selectedCourseId = options.find(opt => opt.textContent.trim() === 'English (US)').getAttribute('course-id');

    btn.addEventListener('click', function() {
        content.style.display = content.style.display === 'block' ? 'none' : 'block';
    });

    options.forEach(option => {
        option.addEventListener('click', function() {
            selectedSpan.textContent = this.textContent;

            options.forEach(opt => {
                opt.classList.remove('selected');
                const icon = opt.querySelector('.fa-check');
                if (icon) icon.remove();
            });

            this.classList.add('selected');
            const checkIcon = document.createElement('i');
            checkIcon.className = 'far fa-check';
            this.appendChild(checkIcon);

            // Update selected course ID
            selectedCourseId = this.getAttribute('course-id');

            content.style.display = 'none';
        });
    });

    window.addEventListener('click', function(e) {
        if (!dropdown.contains(e.target)) {
            content.style.display = 'none';
        }
    });

    confirmBtn.addEventListener('click', function() {
        if (selectedCourseId) {
            loadingOverlay.style.display = 'flex';
            enrollToCourse(selectedCourseId);
        } else {
            console.log('No course ID selected');
        }
    });
});

let enrollToCourse = async (courseId) => {
    function apiCaller() {
        return new Promise(function(res, rej) {
            let xhr = new XMLHttpRequest();
            url = "https://webhooks.workato.com/webhooks/rest/41ea4fc7-fb82-4d0b-8fb3-ca0d3a1e4b8e/enroll-to-course";
            xhr.open("POST", url, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log('Enrollment successful');
                    res();
                } else if (xhr.readyState === 4) {
                    console.log('Enrollment failed');
                    rej();
                }
            };
            xhr.send(JSON.stringify({
                "person_id": "{{ current_person.id }}",
                "course_id": courseId
            }));
        });
    }

    try {
        await apiCaller();
        setTimeout(function() {
            window.location.href = "/courses/" + courseId;
        }, 3000);
    } catch(err) {
        console.log(err);
    }
};
</script>