<div class="leadership-search" data-test-leadership-search>
  <input
    aria-label={{t "general.searchForIliosUsers"}}
    autocomplete="name"
    type="search"
    value={{this.searchValue}}
    placeholder={{t "general.searchForIliosUsers"}}
    incremental="true"
    {{on "input" (perform this.searchForUsers value="target.value")}}
    {{on "search" (perform this.searchForUsers value="target.value")}}
    {{on "keyup" (perform this.searchForUsers value="target.value")}}
  >
  <ul
    class="results
      {{unless
        (or this.searchForUsers.isRunning this.searchForUsers.lastSuccessful.value.length)
        "hidden"
      }}"
  >
    {{#if this.searchForUsers.isRunning}}
      <li>
        {{t "general.currentlySearchingPrompt"}}
      </li>
    {{else}}
      {{#each this.searchForUsers.lastSuccessful.value as |result index|}}
        {{#if (eq result.type "text")}}
          <li>
            {{result.text}}
          </li>
        {{/if}}
        {{#if (eq result.type "summary")}}
          <li class="summary">
            {{result.text}}
          </li>
        {{/if}}
        {{#if (eq result.type "user")}}
          <li
            class="user {{unless (includes result.user.id this.existingUserIds) "clickable" "inactive"}}"
            data-test-result-index={{index}}
            data-test-result
          >
            {{#if (includes result.user.id this.existingUserIds)}}
              <span class="name">
                {{result.user.fullName}}
                  {{#unless result.user.enabled}}
                    <FaIcon
                      @icon="user-xmark"
                      @title={{t "general.disabled"}}
                      class="error"
                    />
                  {{/unless}}
              </span>
              <span class="email">
                {{result.user.email}}
              </span>
            {{else}}
              <button
                class="select-user"
                type="button"
                {{on "click" (perform this.clickUser result.user)}}
                data-test-select-user
              >
                <span class="name">
                  {{result.user.fullName}}
                  {{#unless result.user.enabled}}
                    <FaIcon
                      @icon="user-xmark"
                      @title={{t "general.disabled"}}
                      class="error"
                    />
                  {{/unless}}
                </span>
                <span class="email">
                  {{result.user.email}}
                </span>
              </button>
            {{/if}}
          </li>
        {{/if}}
      {{/each}}
    {{/if}}
  </ul>
</div>
