<div class="playlist-add-container card">
  <div class="mg-x-2">
    <h4 class="pd-t-2 mg-b-2">{{i18n 'Add videos to collection'}}</h4>
    <div class="mg-b-1 form">
      <label class="form__label">{{i18n 'Search your videos'}}</label>
      <div class="form__input-group form__input-group--icon-left">
        <input
          type="search"
          class="form__input"
          name="search"
          placeholder={{i18n 'Filter by video'}}
            oninput={{action 'setSearchTerm' value='target.value'}}>

        <div class="form__icon-group">
          <label for="icon-example-1">
            <figure class="form__icon icon">
              {{svg-icon path="svg/nav-search"}}
            </figure>
          </label>
        </div>
      </div>
    </div>
  </div>

  {{#if hasResults}}
    <div class="playlist-add-results">
      <div class="tse-scroll-content scroll-y">
        {{#each searchResults as |item|}}
          <div
            class="playlist-add-search-card flex flex--spaceBetween flex--verticalCenter {{if (in-array playlistItemIds item.id) "playlist-add-search-card--selected"}}">
            <div class="flex__item playlist-add-search-card__meta">
              {{video/search-card-row
                testSelector='search-card'
                video=item
                isAdded=(in-array playlistItemIds item.id)
              }}
            </div>
            <div class="flex__item">
              {{manager/collections/video-selector/button
                isAdded=(in-array playlistItemIds item.id)
                item=item
                addHandler=addItemToPlaylist
                removeHandler=removeItemFromPlaylist
              }}
            </div>
          </div>
        {{/each}}
        {{infinite-scroll-slug
          loadMore=(action 'loadMore')
          buffer=scrollBuffer
          contentLength=searchResults.length
        }}
      </div>
    </div>
  {{else}}
    <div class="playlist-empty-state">
      {{!-- TODO: Needs better messaging per use case --}}
      {{i18n 'No results found.'}}
    </div>
  {{/if}}

  <div class="align-center playlist-add-done">
    {{#common/button-element onClick=doneHandler testSelector='done-button'}}
      {{t 'general.forms.done'}}
    {{/common/button-element}}
  </div>
</div>
