<form
  action=""
  data-test-selector="navigation-search-field"
  class="form {{unless isInHeader 'theme--dark'}} new-search {{if isShowingFieldCategoryIcon 'new-search--withtag'}}">

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

    <div class="form__icon-group">
      {{svg-icon path='svg/nav-search' iconModifier='form__icon'}}
    </div>

    {{#liquid-if isShowingFieldCategoryIcon use='search-form-tag' class='search-tag' containerless=true}}
      <button class="search-tag__img" type="button" {{action 'updateCurrentCategory' null}} data-test-selector="filter-icon">
        {{partial 'svg/remove-tag'}}

        {{partial (unbound currentCategory.icon)}}
      </button>
    {{/liquid-if}}
  </div>
</form>

{{#ember-wormhole to="wormhole-overlays"}}
  {{#navigation-search/animate-panel
    isOpen=isPanelOpen
    isInHeader=isInHeader
    leftPosition=leftPosition
    onOpen=(action 'searchInteractionDidBegin')
    onClose=(action 'searchInteractionDidEnd')
    onClickOutside=(action 'onClickOutsidePanel')}}

    <div class="search-panel__title-bar flex">
      <button
        class="{{unless currentCategory 'search-panel__title-back--hidden'}} search-panel__title-back flex flex--verticalCenter flex--horizontalCenter"
        type="button"
        {{action 'updateCurrentCategory' null}}
        data-test-selector="panel-remove-current-filter">

        <div class="arrow arrow--r">
          {{t 'general.forms.back'}}
        </div>
      </button>

      <h2 class="search-panel__title" data-test-selector="panel-header">
        {{i18n (or currentCategory.headerTitle 'Top Results')}}
      </h2>
    </div>

    {{#if (eq currentCategory.id 'videos')}}
      {{navigation-search/videos-filter
        updateFilterOptions=(action 'updateFilterOptions')
        filterOptions=filterOptions}}
    {{/if}}

    <div class="search-result-view search-result-view--active {{if (eq currentCategory.id 'videos') 'search-result-view--filtered'}}">
      {{#navigation-search/panel-content onClickThrough=(action 'didClickThrough') class='collection-wrapper'}}
        {{#if request.isWaiting}}
          <div class="loading-spinner"></div>
        {{else if request.didError}}
          {{partial 'components/navigation-search/error'}}
        {{else if noResultsFound}}
          {{partial 'components/navigation-search/no-results'}}
        {{/if}}

        {{#if (not request.didError noResultsFound)}}
          {{! loading in an invisible div allows images to start loading early in some cases }}
          {{! template-lint-disable triple-curlies }}
          <div class="tse-content" style={{{if request.isWaiting 'visibility: hidden;'}}}>
            {{#infinite-scroll
              action=(if currentCategory (action 'loadMoreForType'))
              isLoading=request.isLoading
              buffer=scrollBuffer
              contentLength=currentCategory.hits.length}}

              {{#each sortedCategories key="id" as |category|}}
                {{#navigation-search/results-section
                  class="search-result-view__block"
                  onHeaderClick=(action 'updateCurrentCategory' category)
                  currentCategory=currentCategory
                  category=category}}

                  {{component (concat 'navigation-search/' category.id) category=category isInHeader=isInHeader}}
                {{/navigation-search/results-section}}
              {{/each}}
            {{/infinite-scroll}}
          </div>
        {{/if}}
      {{/navigation-search/panel-content}}
    </div>
  {{/navigation-search/animate-panel}}
{{/ember-wormhole}}
