<div
  {{did-insert (perform this.search)}}
  {{did-update (perform this.search) @query}}
  ...attributes
>
  {{#if (and this.trimmedQuery this.search.isIdle)}}
    <DocsModalDialog
      @tetherTarget="[data-search-box]"
      @attachment="top left"
      @clickOutsideToClose={{true}}
      @onClose={{@onClose}}
      @targetAttachment="bottom left"
      @constraints={{array (hash to="window" attachment="together" pin=true)}}
    >
      <ul
        class="docs-w-76 docs-bg-white docs-shadow-md"
        data-test-search-result-list
      >
        {{#each (take 5 this.searchResults) as |result index|}}
          <li>
            <DocsHeader::SearchResult
              @result={{result}}
              @query={{@query}}
              @selected={{eq index this.selectedIndex}}
              @onMouseEnter={{fn this.selectResult index}}
              @onClick={{@onClose}}
            />
          </li>
        {{else}}
          <li
            class="docs-block docs-py-1 docs-px-3 docs-text-grey-dark docs-no-underline"
          >
            No results.
          </li>
        {{/each}}
      </ul>
    </DocsModalDialog>
  {{/if}}
</div>