<div ...attributes class="tree-wrapper">
  <div class="uk-inline uk-margin-small-bottom uk-width-1-1">
    <span class="uk-form-icon" uk-icon="icon: search"></span>
    <div class="uk-search uk-search-default uk-width-1-1">
      {{#if this.filterValue}}
        <button
          type="reset"
          class="uk-form-icon uk-form-icon-flip"
          uk-icon="close"
          {{on "click" (set this "filterValue" null)}}
          data-test-search-reset
        />
      {{/if}}
      <span uk-search-icon></span>
      <Input
        class="uk-input uk-search-input"
        aira-label="search"
        @type="search"
        @value={{this.filterValue}}
        placeholder=""
        autocomplete="off"
        data-test-tree-search
        {{on "input" (perform this.filter)}}
      />
    </div>
  </div>
  {{#if @items}}
    <ul class="tree">
      {{#if this.hasFilter}}
        {{#each
          (sort-by "name" (filter-by "id" this.filterItemList @items))
          as |item|
        }}
          <TreeNode
            @item={{item}}
            @itemRoute={{@itemRoute}}
            @activeItem={{@activeItem}}
            @expandedItems={{this.expandedItems}}
            @filteredItems={{this.filtered}}
          />
        {{/each}}
      {{else}}
        {{#each (sort-by "name" @items) as |item|}}
          <TreeNode
            @item={{item}}
            @itemRoute={{@itemRoute}}
            @activeItem={{@activeItem}}
            @expandedItems={{this.expandedItems}}
          />
        {{/each}}
      {{/if}}
    </ul>
  {{/if}}
</div>