<a
  class="np-header-mobile-menu-content-button"
  onclick="toggleLanguageSelector()"
  ">
  <span class="lang-en">Language</span>
  <span class="lang-es">Idioma</span>
  <div class="language-selector-dropdown">
    <div class="language-selector-dropdown-item" onclick="changeLanguage('en')">English</div>
    <div class="language-selector-dropdown-item" onclick="changeLanguage('es')">Español</div>
  </div>
</a>


<style>
  .language-selector-dropdown {
    position: absolute;
    width: 97%;
    background-color: white;
    z-index: 1;
    top: 54px;
    padding: 0 10px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.65);
  }
  .language-selector-dropdown-item {
    align-items: center;
    background: #e4e8eb;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.15);
    color: #305263;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    height: 52px;
    justify-content: center;
    margin-top: 12px;
    text-decoration: none;
    width: 100%;
  }
</style>
<script>
  $(document).ready(function() {
    $('.language-selector-dropdown').hide();
    
    // Close dropdown when clicking outside
    $(document).on('click', function(event) {
      if (!$(event.target).closest('.language-selector-dropdown, [onclick*="toggleLanguageSelector"]').length) {
        $('.language-selector-dropdown').hide();
      }
    });
  });

  function toggleLanguageSelector() {
    $('.language-selector-dropdown').toggle();
  }

  function changeLanguage(language) {
    fetch("https://webhooks.workato.com/webhooks/rest/a542031c-264f-4ab7-a43b-3d79da6e4def/carrot-academy-change-language", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          language: language,
          userId: '{{current_person.id}}'
        })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
      })
      .then(data => {
        const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('lang', language);
    window.location.href = currentUrl.toString();
      })
      .catch(error => {
        console.error("Error sending language information:", error);
      });
  }
</script>