<div class="balloon-wrapper form">
  <div class="form__input-group form__input-group--icon-left video-stats__search">
    <input
      type="search"
      class="form__input video-stats-form-input js-video-stats-search__input"
      name="search"
      placeholder={{i18n 'Filter by video'}}
      oninput={{action 'setTerm' value='target.value'}}>

    <div class="form__icon-group">
      <figure class="form__icon icon">
        {{svg-icon path="svg/nav-search"}}
      </figure>
    </div>
  </div>
  <div class="balloon balloon--down balloon--no-tail balloon--no-padding video-stats__search-balloon {{if isSearchOpen 'show' 'hide'}}">
    <ul class="balloon__list mg-t-1 tse-content">
      {{#unless hasHits}}
        <li class="video-stats__video-search__result balloon__title js-video-stats-search__title">
          {{i18n "No results found."}}
        </li>
      {{else}}
        {{#unless term}}
          <li class="balloon__title js-video-stats-search__title">{{i18n "Recent Videos"}}</li>
        {{else}}
          <li class="balloon__title js-video-stats-search__title">{{i18n "Search Results"}}</li>
        {{/unless}}
        <li class="balloon__stroke"></li>
        {{#infinite-scroll
          loadMore=(action 'loadMore')
          buffer=scrollBuffer
          contentLength=hits.length}}
          {{#each hits as |video|}}
            <li class="js-video-stats-search__result">
              {{dashboards/video-stats/video-search-card video=video linkRoute=linkRoute hideSearch=(action 'hideSearch')}}
            </li>
          {{/each}}
        {{/infinite-scroll}}
      {{/unless}}
    </ul>
  </div>
</div>
