<div class="autohost-recommended-balloon balloon balloon--down balloon--right balloon--md balloon--no-padding show pd-b-10 filter-bar__balloon-scroller">
  <div class="pd-1 border-b">
    <form
      action=""
      data-test-selector="navigation-search-field"
      class="form new-search">

      <div class="form__input-group form__input-group--icon-left ">
        <input
          oninput={{action 'updateTerm'}}
          type="text"
          class="form__input focused pd-l-3"
          placeholder={{i18n 'Search for people'}}
          autocorrect="off"
          autocomplete="off"
          spellcheck="false"
          autocapitalize="off">

        <div class="form__icon-group">
          {{svg-icon path='svg/nav-search' iconModifier='form__icon'}}
        </div>
      </div>
    </form>
  </div>
  <div class="search-result-view search-result-view--active pd-l-1 pd-r-1 mg-t-1">
    {{#if hasTerm}}
      <div class="search-result-view__titlesep noHover">
        {{i18n 'Search Results'}}
      </div>
    {{/if}}

    {{#if (and hasHits (not didError))}}
      <div class="tse-content">
        {{#infinite-scroll
          loadMore=(action 'loadMoreForType')
          buffer=scrollBuffer
          contentLength=hitCount}}

          <div class="search-result-view__block">
            {{#if hitCount}}
              <div data-test-selector="users-hits">
                {{#each hits as |channel|}}
                  {{autohost-settings/recommended-channel
                    user=channel
                    displayName=(format-display-name channel.name channel.display_name)
                    source='search'
                    location='recommendations'
                    addAction=(action clickAction)
                    undoAction=(action undoAction)
                    inList=(get channelsMap channel.login)}}
                {{/each}}
              </div>
            {{/if}}
          </div>
        {{/infinite-scroll}}
      </div>
    {{/if}}

    {{#if isLoading}}
      <div class="loading-spinner"></div>
    {{else if (and hasNoHits hasTerm)}}
      <div class="noticeWrap__visual flex__item mg-b-1 pd-t-2">
        {{svg-icon path='svg/search-no-results'}}
      </div>
      <h4 class="noticeWrap__title flex__item mg-b-2" data-test-selector="panel-body-no-results">{{i18n 'No results found'}}</h4>
    {{/if}}

    {{#if (and hasNoHits hasRecommendedResults)}}
      <div class="search-result-view__titlesep noHover" data-test-selector="recommended-header">
        {{i18n 'Recommended'}}
      </div>
      {{#each recommendedResults as |recommended|}}
        {{#with recommended.channel as |channel|}}
          {{autohost-settings/recommended-channel
            user=channel
            displayName=(format-display-name channel.name channel.display_name)
            subtext=recommended.subtext
            source=recommended.source
            location='recommendations'
            addAction=(action clickAction)
            undoAction=(action undoAction)
            inList=(get channelsMap channel.name)}}
        {{/with}}
      {{/each}}
    {{/if}}
  </div>
</div>
