<div class="js-language-filter balloon-wrapper">
  <a class="js-language-control button button--hollow button--dropmenu" {{action 'toggleSortOptions'}}>
    {{t 'general.Twitch.language'}}
    <span class="{{unless numSelectedFiltersIsViewable 'hidden'}}">
      <span class="pill pill--purple js-language-indicator"> {{numSelectedFilters}}</span>
    </span>
  </a>
  <div class="balloon js-language-balloon balloon--down balloon--no-tail balloon--left balloon--dropmenu {{if isSortOptionsVisible 'show' 'hide'}}">
    <div class="filter-bar__balloon-scroller scroll">
      <div class="tse-scroll-content">
        <div class="tse-content">
          <ul class='balloon__list filter-bar__balloon-checklist js-language-options'>
            {{#each broadcasterLanguagesScroll as |language|}}
              <li>
                <label class="balloon__link {{if (get broadcasterLanguageCheckboxes language.code) 'filter-bar__balloon-link--active'}}"><input type="checkbox" onchange={{action 'checkboxChanged' language.code}} data-language-code={{language.code}} checked={{get broadcasterLanguageCheckboxes language.code}}> {{language.name}}</label>
              </li>
            {{/each}}
          </ul>
        </div>
      </div>
    </div>
    <div class="filter-bar__balloon-footer">
      <a class="button button--text" {{action 'clearFilters'}}>{{i18n "Clear all"}}</a>
    </div>
  </div>
</div>
