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

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

  {{#if showComboBox}}
    {{combo-box
      value=value
      content=comboBoxContent
      onChange=(action (mut value))
      onOpen=(action "enableActive")
      onClick=(action 'enableActive')
      options=(hash
        none=placeholderKey
      )}}
  {{/if}}
  
  {{#if showMultiSelect}}
    {{multi-select
      content=multiSelectContent
      value=value
      onChange=(action (mut value))
      onOpen=(action "enableActive")
      onClose=(action "disableActive")
      options=multiSelectOptions}}
  {{/if}}
  
  {{#if showList}}
    {{value-list
      values=value
      addKey=placeholderKey}}
  {{/if}}
  
  {{#if showTag}}
    {{tag-chooser
      tags=value
      filterable=true
      onOpen=(action "enableActive")
      onClose=(action "disableActive")
      options=(hash
        none=placeholderKey
      )}}
  {{/if}}
  
  {{#if showUser}}
    {{user-selector 
      includeMessageableGroups='true'
      placeholderKey=placeholderKey
      usernames=value
      autocomplete="discourse"
      click=(action "enableActive")}}
  {{/if}}
</div>