<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={{this.value}}
      placeholder={{i18n placeholderKey}}
      {{on "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>