{% extends 'affiliates_app/base_affiliate.html' %}
{% load static %}
{% load expat_extras %}

{% block title %}Affiliate Information Center | Ensolanka Global Ambassadors{% endblock %}

{% block content %}

<style>
    /* =========================================================
       AFFILIATE INFORMATION CENTER — DASHBOARD STYLE
    ========================================================= */

    .affiliate-info-page {
        min-height: 100vh;
        background: #f8fafc;
        padding-bottom: 5rem;
    }

    .affiliate-info-hero {
        background:
            linear-gradient(135deg, rgba(8, 15, 31, 0.92), rgba(20, 35, 58, 0.84)),
            url("{% static 'expat_life/images/affiliates_hero.webp' %}");
        background-size: cover;
        background-position: center;
        color: #fff;
        padding: 5rem 0 4rem;
    }

    .affiliate-info-hero .section-mini-title {
        color: #ffc107;
        font-size: .78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .affiliate-info-hero h1 {
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1.08;
    }

    .affiliate-info-hero p {
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.8;
        max-width: 850px;
    }

    .affiliate-info-hero-card {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(14px);
        border-radius: 28px;
        padding: 2rem;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
    }

    .affiliate-info-hero-card span {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.72);
        font-weight: 800;
    }

    .affiliate-info-hero-card h3 {
        color: #ffc107;
        font-weight: 900;
        margin-top: 0.55rem;
        margin-bottom: 0.7rem;
    }

    .affiliate-info-hero-card p {
        font-size: 0.94rem;
        margin-bottom: 0;
    }

    .affiliate-info-wrapper {
        margin-top: -2.2rem;
        position: relative;
        z-index: 5;
    }

    .affiliate-back-row {
        margin-bottom: 1rem;
    }

    .affiliate-back-row .btn {
        border-radius: 999px;
        font-weight: 800;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    }

    .marketing-training-card {
        border-radius: 24px;
        overflow: hidden;
        background: #ffffff;
        border: none;
        box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
    }

    .marketing-training-header {
        background:
            linear-gradient(135deg, rgba(14, 26, 34, 0.96), rgba(21, 94, 117, 0.92));
        color: #fff;
        padding: 1.5rem 1.75rem;
        border-bottom: none;
    }

    .marketing-training-header .section-mini-title {
        color: #ffc107;
        font-size: .76rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .marketing-training-header h3 {
        font-weight: 800;
    }

    .marketing-training-header p {
        color: rgba(255, 255, 255, .78);
        max-width: 760px;
    }

    .training-language-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        padding: .75rem;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
    }

    .training-lang-btn {
        border: 1px solid #d1d5db;
        background: #fff;
        color: #0e1a22;
        border-radius: 999px;
        padding: .55rem 1.15rem;
        font-weight: 700;
        font-size: .9rem;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        transition: all .2s ease;
        cursor: pointer;
    }

    .training-lang-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    }

    .training-lang-btn.active {
        background: #0e1a22;
        border-color: #0e1a22;
        color: #fff;
        box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
    }

    .training-language-panel {
        display: none;
    }

    .training-language-panel.active {
        display: block;
    }

    .training-guide-box,
    .training-media-box {
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 20px;
        padding: 1.35rem;
    }

    .training-icon {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #0e1a22;
        color: #ffc107;
        font-size: 1.45rem;
        flex-shrink: 0;
    }

    .training-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .training-list li {
        display: flex;
        gap: .65rem;
        margin-bottom: .75rem;
        color: #475569;
        line-height: 1.55;
    }

    .training-list li i {
        color: #16a34a;
        margin-top: .18rem;
        flex-shrink: 0;
    }

    .training-video-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        border-radius: 16px;
        overflow: hidden;
        background: #0e1a22;
    }

    .training-video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .training-media-box audio {
        height: 40px;
    }

    .info-language-image-buttons {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .65rem;
    }

    .info-language-image-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 999px;
        opacity: 0.72;
        transition: all .22s ease;
        border: 2px solid transparent;
    }

    .info-language-image-btn img {
        width: 150px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    .info-language-image-btn:hover {
        opacity: 1;
        transform: translateY(-2px);
        filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.18));
    }

    .info-language-image-btn.active {
        opacity: 1;
        transform: translateY(-2px);
        filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.22));
    }

    .affiliate-info-note {
        border-radius: 20px;
        background: #ecfeff;
        border: 1px solid #a5f3fc;
        color: #155e75;
        padding: 1rem 1.1rem;
        line-height: 1.65;
        margin-bottom: 1.3rem;
    }

    .affiliate-info-note strong {
        color: #0e1a22;
    }

    .training-empty-box {
        text-align: center;
        padding: 3rem 1.5rem;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 22px;
    }

    .training-empty-box i {
        font-size: 2.2rem;
        color: #94a3b8;
    }

    .training-empty-box h5 {
        color: #0e1a22;
        font-weight: 800;
        margin-top: 1rem;
    }

    .training-empty-box p {
        color: #64748b;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    @media (max-width: 991.98px) {
        .affiliate-info-hero {
            padding: 4rem 0 3.25rem;
        }

        .affiliate-info-hero-card {
            padding: 1.4rem;
        }

        .info-language-image-buttons {
            justify-content: flex-start;
        }

        .info-language-image-btn img {
            width: 135px;
        }
    }

    @media (max-width: 767.98px) {
        .affiliate-info-hero {
            text-align: center;
        }

        .affiliate-info-wrapper {
            margin-top: -1.5rem;
        }

        .marketing-training-header,
        .card-body.p-4 {
            padding-left: 1.1rem !important;
            padding-right: 1.1rem !important;
        }

        .training-language-tabs {
            justify-content: center;
        }

        .info-language-image-buttons {
            justify-content: center;
        }

        .info-language-image-btn img {
            width: 120px;
        }
    }

    @media (max-width: 420px) {
        .info-language-image-btn img {
            width: 100px;
        }
    }
    
    /* =========================================================
    ENSOLANKA SPECIAL COMPANY VIDEO SECTION
    ========================================================= */

    .ensolanka-company-video-section {
        margin-top: 2.2rem;
    }

    .ensolanka-video-premium-card {
        position: relative;
        overflow: hidden;
        border-radius: 34px;
        padding: 1.25rem;
        background:
            radial-gradient(circle at 12% 18%, rgba(255, 193, 7, 0.24), transparent 28%),
            radial-gradient(circle at 88% 12%, rgba(34, 211, 238, 0.18), transparent 30%),
            linear-gradient(135deg, #07131c 0%, #0e1a22 45%, #153446 100%);
        box-shadow:
            0 28px 80px rgba(15, 23, 42, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .ensolanka-video-premium-card::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 33px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        pointer-events: none;
    }

    .ensolanka-video-inner {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 0.9fr 1.35fr;
        gap: 1.5rem;
        align-items: center;
    }

    .ensolanka-video-content {
        color: #fff;
        padding: 1.6rem 1.2rem 1.6rem 1.4rem;
    }

    .ensolanka-video-content .section-mini-title {
        color: #ffc107;
        font-size: .76rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .11em;
    }

    .ensolanka-video-content h3 {
        font-size: clamp(1.65rem, 2.4vw, 2.45rem);
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1.12;
        margin-bottom: 1rem;
    }

    .ensolanka-video-content p {
        color: rgba(255, 255, 255, 0.76);
        line-height: 1.75;
        margin-bottom: 1.2rem;
    }

    .ensolanka-video-badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
    }

    .ensolanka-video-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .48rem .8rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.88);
        font-size: .82rem;
        font-weight: 800;
    }

    .ensolanka-video-badge i {
        color: #ffc107;
    }

    .ensolanka-video-frame-outer {
        position: relative;
        padding: .72rem;
        border-radius: 28px;
        background:
            linear-gradient(135deg, rgba(255, 193, 7, 0.85), rgba(255, 255, 255, 0.24), rgba(34, 211, 238, 0.55));
        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.32),
            0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    .ensolanka-video-frame-middle {
        padding: .45rem;
        border-radius: 23px;
        background: rgba(7, 19, 28, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .ensolanka-video-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        border-radius: 18px;
        overflow: hidden;
        background: #020617;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .ensolanka-video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .ensolanka-video-caption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-top: .8rem;
        color: rgba(255, 255, 255, 0.72);
        font-size: .82rem;
        font-weight: 700;
    }

    .ensolanka-video-caption span {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    @media (max-width: 991.98px) {
        .ensolanka-video-inner {
            grid-template-columns: 1fr;
        }

        .ensolanka-video-content {
            padding: 1.4rem .8rem .4rem;
            text-align: center;
        }

        .ensolanka-video-badge-row {
            justify-content: center;
        }
    }

    @media (max-width: 575.98px) {
        .ensolanka-video-premium-card {
            border-radius: 26px;
            padding: .8rem;
        }

        .ensolanka-video-frame-outer {
            border-radius: 22px;
            padding: .45rem;
        }

        .ensolanka-video-frame-middle {
            border-radius: 18px;
            padding: .32rem;
        }

        .ensolanka-video-wrapper {
            border-radius: 14px;
        }

        .ensolanka-video-caption {
            flex-direction: column;
            align-items: flex-start;
        }
    }

</style>


<section class="affiliate-info-page">

    <!-- HERO -->
    <div class="affiliate-info-hero">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <span class="section-mini-title d-block mb-2">
                        Ensolanka Global Ambassador Resources
                    </span>

                    <h1 class="display-4 mb-3">
                        Multilingual Information Center
                    </h1>

                    <p class="lead mb-0">
                        Access the Ensolanka Global Ambassador Playbook, summary overview,
                        audio guide, and video training in English, Sinhala, or Tamil.
                    </p>
                </div>

                <div class="col-lg-4">
                    <div class="affiliate-info-hero-card">
                        <span>Current Resource Center</span>
                        <h3>Affiliate Training</h3>
                        <p>
                            Learn how to promote Sri Lanka living opportunities with confidence,
                            clarity, and professional guidance.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- CONTENT -->
    <div class="container affiliate-info-wrapper">

        <div class="affiliate-back-row d-flex flex-wrap gap-2 justify-content-between align-items-center">
            <a href="{% url 'affiliates_app:home_affiliates' %}"
               class="btn btn-light">
                <i class="bi bi-arrow-left-circle me-1"></i>
                Back to Affiliate Home
            </a>

            {% if request.user.is_authenticated %}
                <a href="{% url 'affiliates_app:affiliate_dashboard' %}"
                   class="btn btn-dark">
                    <i class="bi bi-speedometer2 me-1"></i>
                    Affiliate Dashboard
                </a>
            {% endif %}
        </div>


        <!-- Section: Marketing Training / Guidance -->
        <div id="marketing-training" class="card border-0 shadow-sm marketing-training-card">
            <div class="card-header marketing-training-header">
                <div>
                    <span class="section-mini-title d-block mb-1">
                        Affiliate Training
                    </span>

                    <h3 class="mb-1">
                        Marketing Guidance &amp; Training
                    </h3>

                    <p class="mb-0">
                        Learn how to confidently promote Sri Lanka living opportunities and represent
                        Ensolanka as a trusted global ambassador.
                    </p>
                </div>
            </div>

            <div class="card-body p-4">

                {% if training_resources %}

                    <div class="affiliate-info-note">
                        <strong>Select a language below.</strong>
                        The training guide, downloadable documents, audio guide, and video training
                        will change according to your selected language.
                    </div>

                    <!-- Language Image Buttons -->
                    <div class="info-language-image-buttons mb-3">

                        <a href="?lang=si"
                           class="info-language-image-btn {% if selected_language == 'si' %}active{% endif %}"
                           data-training-lang="si"
                           aria-label="Open Sinhala resources">
                            <img src="{% static 'expat_life/images/sinhala.png' %}"
                                 alt="Sinhala">
                        </a>

                        <a href="?lang=ta"
                           class="info-language-image-btn {% if selected_language == 'ta' %}active{% endif %}"
                           data-training-lang="ta"
                           aria-label="Open Tamil resources">
                            <img src="{% static 'expat_life/images/tamil.png' %}"
                                 alt="Tamil">
                        </a>

                        <a href="?lang=en"
                           class="info-language-image-btn {% if selected_language == 'en' %}active{% endif %}"
                           data-training-lang="en"
                           aria-label="Open English resources">
                            <img src="{% static 'expat_life/images/english.png' %}"
                                 alt="English">
                        </a>

                    </div>



                    <!-- Training Content Panels -->
                    {% for training in training_resources %}
                        <div class="training-language-panel {% if training.language == selected_language %}active{% endif %}"
                             data-training-panel="{{ training.language }}">

                            <div class="row g-4 align-items-start">

                                <!-- Left: Training Guide Details -->
                                <div class="col-lg-7">
                                    <div class="training-guide-box h-100">

                                        <div class="d-flex align-items-start gap-3 mb-3">
                                            <div class="training-icon">
                                                <i class="bi bi-journal-richtext"></i>
                                            </div>

                                            <div>
                                                <span class="badge rounded-pill bg-warning text-dark mb-2">
                                                    {{ training.get_language_display }}
                                                </span>

                                                <h4 class="fw-bold mb-1">
                                                    {{ training.title }}
                                                </h4>

                                                {% if training.description %}
                                                    <p class="text-muted mb-0">
                                                        {{ training.description|linebreaksbr }}
                                                    </p>
                                                {% else %}
                                                    <p class="text-muted mb-0">
                                                        Complete training materials to help affiliates promote Sri Lanka living opportunities with confidence.
                                                    </p>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <div class="playbook-summary mt-4">
                                            <h5 class="fw-bold mb-3">
                                                Training Materials
                                            </h5>

                                            <ul class="training-list">
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Read the complete ambassador playbook for this language.
                                                </li>
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Download the summary overview for quick revision.
                                                </li>
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Listen to the audio guide to improve your explanation flow.
                                                </li>
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Watch the video training before promoting to potential guests.
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="d-flex flex-column flex-md-row flex-wrap gap-2 mt-4">

                                            {% if training.full_playbook_pdf %}
                                                <a href="{{ training.full_playbook_pdf.url }}"
                                                   class="btn btn-dark rounded-pill px-4"
                                                   target="_blank">
                                                    <i class="bi bi-file-earmark-pdf me-1"></i>
                                                    View Full Playbook
                                                </a>

                                                <a href="{{ training.full_playbook_pdf.url }}"
                                                   class="btn btn-outline-dark rounded-pill px-4"
                                                   download>
                                                    <i class="bi bi-download me-1"></i>
                                                    Download Full Playbook
                                                </a>
                                            {% endif %}

                                            {% if training.summary_overview_pdf %}
                                                <a href="{{ training.summary_overview_pdf.url }}"
                                                   class="btn btn-outline-primary rounded-pill px-4"
                                                   download>
                                                    <i class="bi bi-file-earmark-text me-1"></i>
                                                    Download Summary Overview
                                                </a>
                                            {% endif %}

                                        </div>

                                        {% if not training.full_playbook_pdf and not training.summary_overview_pdf %}
                                            <p class="text-muted small mt-4 mb-0">
                                                Document files for this language will be available soon.
                                            </p>
                                        {% endif %}

                                    </div>
                                </div>


                                <!-- Right: Audio + Video -->
                                <div class="col-lg-5">

                                    <!-- Audio Training -->
                                    <div class="training-media-box mb-4">
                                        <h5 class="fw-bold mb-2">
                                            <i class="bi bi-headphones me-1"></i>
                                            Audio Training Guide
                                        </h5>

                                        {% if training.audio_guide_file %}
                                            <audio controls preload="metadata" class="w-100 mb-3">
                                                <source src="{{ training.audio_guide_file.url }}" type="audio/mpeg">
                                                Your browser does not support the audio element.
                                            </audio>

                                            <a href="{{ training.audio_guide_file.url }}"
                                               class="btn btn-outline-secondary btn-sm rounded-pill"
                                               download>
                                                <i class="bi bi-download me-1"></i>
                                                Download Audio File
                                            </a>
                                        {% else %}
                                            <p class="text-muted small mb-0">
                                                Audio guide for this language will be available soon.
                                            </p>
                                        {% endif %}
                                    </div>


                                    <!-- Video Training -->
                                    <div class="training-media-box">
                                        <h5 class="fw-bold mb-2">
                                            <i class="bi bi-play-circle-fill me-1"></i>
                                            Video Training
                                        </h5>

                                        {% if training.youtube_video_link %}
                                            {% with training.youtube_video_link|video_embed_url as embed_url %}
                                                {% if embed_url %}
                                                    <div class="training-video-wrapper">
                                                        <iframe
                                                            src="{{ embed_url }}"
                                                            title="{{ training.title }} Video Training"
                                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                            referrerpolicy="strict-origin-when-cross-origin"
                                                            allowfullscreen
                                                            loading="lazy">
                                                        </iframe>
                                                    </div>
                                                {% else %}
                                                    <p class="text-muted small mb-0">
                                                        Video link is available, but it could not be embedded.
                                                    </p>
                                                {% endif %}
                                            {% endwith %}
                                        {% else %}
                                            <p class="text-muted small mb-0">
                                                Video training for this language will be available soon.
                                            </p>
                                        {% endif %}
                                    </div>

                                </div>

                            </div>

                        </div>
                    {% endfor %}

                {% else %}

                    <div class="training-empty-box">
                        <i class="bi bi-journal-x"></i>

                        <h5>
                            Training resources are not available yet
                        </h5>

                        <p class="mb-0">
                            The Ensolanka Global Ambassador Playbook, summary, audio guide,
                            and video training will appear here once published.
                        </p>
                    </div>

                {% endif %}

            </div>
        </div>
        <!-- Section: Special Ensolanka Company Video -->
        <div class="ensolanka-company-video-section">

            <div class="ensolanka-video-premium-card">

                <div class="ensolanka-video-inner">

                    <!-- Left: Video Message Content -->
                    <div class="ensolanka-video-content">

                        <span class="section-mini-title d-block mb-2">
                            Special Community Presentation
                        </span>

                        <h3>
                            Rise Sri Lanka Together
                        </h3>

                        <p>
                            A special Ensolanka presentation created to inspire Sri Lankans,
                            global friends, and ambassadors to work together with pride,
                            unity, and a shared vision for a stronger Sri Lanka.
                        </p>

                        <div class="ensolanka-video-badge-row">
                            <span class="ensolanka-video-badge">
                                <i class="bi bi-stars"></i>
                                Ensolanka Creation
                            </span>

                            <span class="ensolanka-video-badge">
                                <i class="bi bi-flag-fill"></i>
                                Sri Lanka Vision
                            </span>

                            <span class="ensolanka-video-badge">
                                <i class="bi bi-play-circle-fill"></i>
                                Official Song Video
                            </span>
                        </div>

                    </div>


                    <!-- Right: Premium Video Frame -->
                    <div class="ensolanka-video-frame-outer">
                        <div class="ensolanka-video-frame-middle">

                            <div class="ensolanka-video-wrapper">
                                <iframe
                                    src="https://www.youtube.com/embed/tXE8svGbyQU"
                                    title="Rise Sri Lanka Together | Song by Ensolanka"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    referrerpolicy="strict-origin-when-cross-origin"
                                    allowfullscreen
                                    loading="lazy">
                                </iframe>
                            </div>

                            <div class="ensolanka-video-caption">
                                <span>
                                    <i class="bi bi-youtube"></i>
                                    Rise Sri Lanka Together | Song by Ensolanka
                                </span>

                                <span>
                                    <i class="bi bi-shield-check"></i>
                                    Presented by Ensolanka
                                </span>
                            </div>

                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
    
</section>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const buttons = document.querySelectorAll('[data-training-lang]');
        const panels = document.querySelectorAll('.training-language-panel');

        function activateLanguage(selectedLang, updateUrl = true) {
            buttons.forEach(function (btn) {
                if (btn.getAttribute('data-training-lang') === selectedLang) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });

            panels.forEach(function (panel) {
                if (panel.getAttribute('data-training-panel') === selectedLang) {
                    panel.classList.add('active');
                } else {
                    panel.classList.remove('active');
                }
            });

            if (updateUrl) {
                const newUrl = new URL(window.location.href);
                newUrl.searchParams.set('lang', selectedLang);
                window.history.pushState({}, '', newUrl);
            }
        }

        buttons.forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();

                const selectedLang = this.getAttribute('data-training-lang');
                activateLanguage(selectedLang, true);
            });
        });

        const urlParams = new URLSearchParams(window.location.search);
        const initialLang = urlParams.get('lang') || '{{ selected_language|default:"en" }}';

        if (initialLang) {
            activateLanguage(initialLang, false);
        }
    });
</script>

{% endblock %}