{% include "header" %}
{% body %}

<style>
  body[user-lang="es"] .lang-en {
    display: none !important;
  }

  body[user-lang="en"] .lang-es {
    display: none !important;
  }
</style>

<script>
  let lang = '{{current_person.properties.preferred_language}}'
    const langFromQuery = window.location.search.split('lang=')[1];
    if (langFromQuery) {
      lang = langFromQuery;
    }

  // Set user-lang attribute on body
  document.body.setAttribute('user-lang', lang ? lang : 'en');

  function updateFilter(filterId) {

    const select = document.querySelector('#filter-dropdown-' + filterId + ' .np-filter-select');
    const label = document.querySelector('#filter-dropdown-' + filterId + ' .filter-value-label');
    
    if (select && label) {
      const selectedOptions = Array.from(select.selectedOptions);
      const selectedCount = selectedOptions.length;
      const selectedValues = selectedOptions.map(option => option.value);
      
      if (selectedCount === 0) {
        // Set language-specific "All" text
        const allTextEn = label.querySelector('.lang-en');
        const allTextEs = label.querySelector('.lang-es');
        if (allTextEn && allTextEs) {
          allTextEn.innerText = 'All';
          allTextEs.innerText = 'Todos';
        } else {
          label.innerText = lang === 'es' ? 'Todos' : 'All';
        }
      } else {
        // Set language-specific "selected" text
        const selectedText = lang === 'es' ? `${selectedCount} seleccionados` : `${selectedCount} selected`;
        label.textContent = selectedText;
      }
      
      // Fire custom event at the end
      const filterUpdateEvent = new CustomEvent('filterUpdate', {
        detail: {
          filterId: filterId,
          selectedValues: selectedValues
        }
      });
      
      document.dispatchEvent(filterUpdateEvent);
    }
  }
</script>