{{#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")
    }}

    {{#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 (and this.selectKit.hasNoContent (not this.selectKit.isLoading))}}
        <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}}