<div
  {{on "click" @onClick}}
  {{on "mouseenter" @onMouseEnter}}
  data-test-search-result
  ...attributes
>
  <LinkTo
    class="docs-block docs-py-2 docs-px-3 docs-text-black docs-no-underline hover:docs-bg-grey-lighter
      {{if @selected 'docs-bg-grey-lighter'}}"
    @route={{this.linkArgs.route}}
    @models={{this.linkArgs.models}}
  >
    <div class="docs-flex docs-items-center">
      {{svg-jar
        this.icon
        height=28
        width=28
        class="docs-mr-2 docs-flex-no-shrink"
      }}
      <span class="docs-truncate">
        {{#if this.titleMatchesQuery}}
          {{{this.highlightedTitle}}}
        {{else}}
          {{@result.document.title}}
        {{/if}}
      </span>
    </div>

    {{#if (not this.titleMatchesQuery)}}
      <small class="docs-text-grey-dark docs-inline-block">
        {{{this.bestMatch}}}
      </small>
    {{/if}}
  </LinkTo>
</div>