<div id="lol-champion-filter-contain">
  {{input placeholder="Search by Champion" value=(mut champQuery) class="button button--hollow"}}
  <button class="button">
    {{i18n "Search"}}
  </button>
</div>

<div class="{{if isActivated 'show' 'hide'}}" style="position:absolute">
  <div class="balloon balloon--down balloon--left balloon--dropmenu lol-metadata-champion-balloon show" style="width:180px">
    <div class="balloon__scroller lol-metadata-champion-balloon scroll" style="height: 25em">
      <div class="collection-wrapper">
        <div class="tse-scroll-content"  id="lol_champ_filter">
          <div class="tse-content">
            <div style="padding:4px">
              {{#each filteredChamps as |champion|}}
                <div class="search-result-view__item search-result-view__item--game card card--row card--xs" style="padding:2px">
                  <a href="#"  data-ts_selectable="true"  class="noHover card__layout" {{action 'selectChamp' champion}}>
                    <figure class="card__img" style={{champion.figureStyle}}>
                      <img src={{champion.spriteSrc}} style={{champion.imgStyle}}>
                    </figure>
                    <div class="card__body">
                      <h5 class="card__title">{{champion.name}}</h5>
                    </div>
                  </a>
                </div>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
