<section
  class="mesh-manager"
  data-test-mesh-manager
>
  {{#let (unique-id) as |templateId|}}
    {{#if @targetItemTitle}}
      <h2 class="target-title">
        {{t "general.selectMeshFor" title=@targetItemTitle}}
      </h2>
    {{/if}}
    {{#if this.sortedTerms.length}}
      <ul class="selected-terms">
        {{#each this.sortedTerms as |term|}}
          <li>
            {{#if @editable}}
              <button
                type="button"
                {{on "click" (fn @remove term)}}
              >
                <span class="term-title">
                  {{term.name}}
                </span>
                <span class="term-details">
                  {{term.id}}
                  {{#if term.deleted}}
                    - <span class="deprecated">({{t "general.deprecatedAbbreviation"}})</span>
                  {{else if term.trees.length}}
                    - <MeshDescriptorLastTreeNumber @descriptor={{term}} />
                  {{/if}}
                </span>
                <FaIcon @icon="xmark" class="remove" />
              </button>
            {{else}}
              <span class="term-title">
                {{term.name}}
              </span>
              <span class="term-details">
              {{term.id}}
                {{#if term.deleted}}
                  - <span class="deprecated">({{t "general.deprecatedAbbreviation"}})</span>
                {{else if term.trees.length}}
                  - <MeshDescriptorLastTreeNumber @descriptor={{term}} />
                {{/if}}
              </span>
            {{/if}}
          </li>
        {{/each}}
      </ul>
    {{/if}}
    {{#if @editable}}
      <div class="mesh-search" data-test-mesh-search>
        <label for="mesh-search-{{templateId}}">{{t "general.searchMesh"}}:</label>
        <input
          id="mesh-search-{{templateId}}"
          autocomplete="off"
          class="search-input"
          type="search"
          value={{this.query}}
          placeholder={{t "general.search"}}
          {{on "input" this.update}}
          {{on "keyup" this.keyUp}}
          {{did-insert (set this.searchInput)}}
        >
      </div>
    {{/if}}
    <div {{on-click-outside this.clear}} data-test-search-results-container>
      {{#if this.search.isRunning}}
        <ul class="mesh-search-results">
          <li>
            {{t "general.currentlySearchingPrompt"}}
          </li>
        </ul>
      {{else if (and this.hasSearchQuery (lte this.query.length 2))}}
        <ul class="mesh-search-results" data-test-search-results>
          <li data-test-search-result>
            {{t "general.moreInputRequiredPrompt"}}
          </li>
        </ul>
      {{else if this.searchResults.length}}
        <ul class="mesh-search-results" data-test-search-results>
          {{#each this.searchResults as |term|}}
            <li
              class={{if (includes term.id (map-by "id" this.terms)) "disabled"}}
              data-test-search-result
            >
              <button
                type="button"
                {{on "click" (fn this.add term)}}
              >
                <span class="descriptor-name" data-test-name>
                  {{term.name}}
                </span>
                <span class="descriptor-id">
                  {{term.id}}
                  {{#if term.trees.length}}
                    - <MeshDescriptorLastTreeNumber @descriptor={{term}} />
                  {{/if}}
                </span>
                <ul class="mesh-concepts">
                  {{#each term.concepts as |concept|}}
                    {{#if concept.scopeNote}}
                      <li
                        class="{{unless term.isActive "disabled"}}

                          {{if concept.hasTruncatedScopeNote "truncated"}}"
                      >
                        {{concept.truncatedScopeNote}}
                      </li>
                    {{/if}}
                  {{/each}}
                </ul>
              </button>
            </li>
          {{/each}}
        </ul>
        {{#if this.hasMoreSearchResults}}
          <button
            disabled={{if this.searchMore.isRunning true}}
            type="button"
            {{on "click" (perform this.searchMore)}}
            data-test-show-more
          >
            <FaIcon
              @icon={{if this.searchMore.isRunning "spinner"}}
              @spin={{if this.searchMore.isRunning true false}}
            />
            {{t "general.showMore"}}
          </button>
        {{/if}}
     {{else if (and this.hasSearchQuery this.search.lastSuccessful)}}
        <ul class="mesh-search-results" data-test-search-results>
          <li data-test-search-result>
            {{t "general.noSearchResultsPrompt"}}
          </li>
        </ul>
      {{/if}}
    </div>
  {{/let}}
</section>
