<div class="type-selector">
  {{#if hasTypes}}
    <a role="button" {{action "toggleTypes"}} class="active">
      {{activeTypeLabel}}
    </a>

    {{#if showTypes}}
      <div class="selector-types">
        {{#each selectorTypes as |item|}}
          {{wizard-mapper-selector-type
            activeType=activeType
            item=item
            toggle=(action "toggleType")}}
        {{/each}}
      </div>
    {{/if}}
  {{else}}
    <span>{{activeTypeLabel}}</span>
  {{/if}}
</div>

<div class="input">
  {{#if showText}}
    {{input
      type="text"
      value=value
      placeholder=(i18n placeholderKey)
      change=(action "changeInputValue")}}
  {{/if}}

  {{#if showComboBox}}
    {{combo-box
      value=value
      content=comboBoxContent
      onChange=(action "changeValue")
      options=(hash
        none=placeholderKey
        allowAny=comboBoxAllowAny
      )}}
  {{/if}}

  {{#if showMultiSelect}}
    {{multi-select
      content=multiSelectContent
      value=value
      onChange=(action "changeValue")
      options=multiSelectOptions}}
  {{/if}}

  {{#if showList}}
    {{wizard-value-list
      values=value
      addKey=placeholderKey
      onChange=(action "changeValue")}}
  {{/if}}

  {{#if showTag}}
    {{tag-chooser
      tags=value
      onChange=(action "changeValue")
      everyTag=true
      options=(hash
        none=placeholderKey
        filterable=true
      )}}
  {{/if}}

  {{#if showUser}}
    {{email-group-user-chooser
      placeholderKey=placeholderKey
      value=value
      autocomplete="discourse"
      onChange=(action "changeUserValue")
      options=(hash
        includeMessageableGroups="true"
      )}}
  {{/if}}
</div>