<section
  class="taxonomy-manager"
  {{did-insert this.load @vocabulary}}
  data-test-taxonomy-manager
>
  {{#let (unique-id) as |templateId|}}
    {{#if @selectedTerms}}
      <div class="selected-terms">
        {{#each this.listableVocabularies as |vocab|}}
          <DetailTermsList
            @vocabulary={{vocab}}
            @terms={{@selectedTerms}}
            @canEdit={{true}}
            @remove={{@remove}}
          />
        {{/each}}
      </div>
    {{/if}}
    {{#if this.assignableVocabularies.length}}
      <div class="vocabulary-picker">
        <div>
          <label for="vocabulary-{{templateId}}">
            {{t "general.selectVocabulary"}}:
          </label>
          <select
            id="vocabulary-{{templateId}}"
            {{on "change" this.changeSelectedVocabulary}}
          >
            {{#each this.assignableVocabularies as |vocab|}}
              <option value={{vocab.id}} selected={{if (eq vocab.id this.vocabId) "selected"}}>
                {{vocab.title}} ({{vocab.school.title}})
              </option>
            {{/each}}
          </select>
        </div>
        <input
          aria-label={{t "general.filterPlaceholder"}}
          autocomplete="off"
          type="search"
          value={{this.termFilter}}
          placeholder={{t "general.filterPlaceholder"}}
          {{on "input" (perform this.setTermFilter value="target.value")}}
          data-test-filter
        >
      </div>
      <div class="terms-picker tag-tree">
        <ul class="selectable-terms-list">
          {{#each (sort-by "title" this.terms) as |term|}}
            {{#if term.active}}
              <li class="top-level">
                <SelectableTermsListItem
                  @selectedTerms={{@selectedTerms}}
                  @term={{term}}
                  @add={{@add}}
                  @remove={{@remove}}
                />
                {{#if term.hasChildren}}
                  <SelectableTermsList
                    @selectedTerms={{@selectedTerms}}
                    @parent={{term}}
                    @add={{@add}}
                    @remove={{@remove}}
                    @termFilter={{this.termFilter}}
                  />
                {{/if}}
              </li>
            {{/if}}
          {{/each}}
        </ul>
      </div>
    {{/if}}
  {{/let}}
</section>
