{{#unless this.selectKit.isHidden}}
  {{component
    this.selectKit.options.headerComponent
    tabindex=this.tabindex
    value=this.value
    selectedContent=this.selectedContent
    selectKit=this.selectKit
    id=(concat this.selectKit.uniqueID "-header")
  }}

  <SelectKit::SelectKitBody
    @selectKit={{this.selectKit}}
    @id={{concat this.selectKit.uniqueID "-body"}}
  >
    {{component
      this.selectKit.options.filterComponent
      selectKit=this.selectKit
      id=(concat this.selectKit.uniqueID "-filter")
    }}

    {{#if this.selectedContent.length}}
      <div class="selected-content">
        {{#each this.selectedContent as |item|}}
          {{component
            this.selectKit.options.selectedChoiceComponent
            item=item
            selectKit=this.selectKit
          }}
        {{/each}}
      </div>
    {{/if}}

    {{#each this.collections as |collection|}}
      {{component
        (component-for-collection collection.identifier this.selectKit)
        collection=collection
        selectKit=this.selectKit
        value=this.value
      }}
    {{/each}}

    {{#if this.selectKit.filter}}
      {{#if this.selectKit.hasNoContent}}
        <span class="no-content" role="alert">
          {{i18n "select_kit.no_content"}}
        </span>
      {{else}}
        <span class="results-count" role="alert">
          {{i18n "select_kit.results_count" count=this.mainCollection.length}}
        </span>
      {{/if}}
    {{/if}}
  </SelectKit::SelectKitBody>
{{/unless}}