<div class="setting">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.step.title"}}</label>
  </div>
  <div class="setting-value">
    <Input name="title" @value={{this.step.title}} />
  </div>
</div>

<div class="setting full">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.step.banner"}}</label>
  </div>
  <div class="setting-value">
    {{uppy-image-uploader
      imageUrl=step.banner
      onUploadDone=(action "bannerUploadDone")
      onUploadDeleted=(action "bannerUploadDeleted")
      type="wizard-step-banner"
      class="no-repeat contain-image"
      id=(concat "wizard-step-" step.id "-banner-upload")
    }}
  </div>
</div>

<div class="setting full">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.step.description"}}</label>
  </div>
  <div class="setting-value">
    {{wizard-text-editor value=step.raw_description}}
  </div>
</div>

{{#wizard-subscription-container}}
  <div class="setting full field-mapper-setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.condition"}}</label>
    </div>

    <div class="setting-value">
      {{wizard-mapper inputs=step.condition options=stepConditionOptions}}
    </div>
  </div>

  <div class="setting full">
    <div class="setting-label"></div>
    <div class="setting-value force-final">
      <h4>{{i18n "admin.wizard.step.force_final.label"}}</h4>
      <Input @type="checkbox" @checked={{this.step.force_final}} />
      <span>{{i18n "admin.wizard.step.force_final.description"}}</span>
    </div>
  </div>

  <div class="setting full field-mapper-setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.step.required_data.label"}}</label>
    </div>

    <div class="setting-value">
      {{wizard-mapper
        inputs=step.required_data
        options=(hash
          inputTypes="validation"
          inputConnector="and"
          wizardFieldSelection="value"
          userFieldSelection="value"
          keyPlaceholder="admin.wizard.submission_key"
          context="step"
        )
      }}
      {{#if step.required_data}}
        <div class="required-data-message">
          <div class="label">
            {{i18n "admin.wizard.step.required_data.not_permitted_message"}}
          </div>
          <Input @value={{this.step.required_data_message}} />
        </div>
      {{/if}}
    </div>
  </div>

  <div class="setting full field-mapper-setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.step.permitted_params.label"}}</label>
    </div>
    <div class="setting-value">
      {{wizard-mapper
        inputs=step.permitted_params
        options=(hash
          pairConnector="set"
          inputTypes="association"
          keyPlaceholder="admin.wizard.param_key"
          valuePlaceholder="admin.wizard.submission_key"
          context="step"
        )
      }}
    </div>
  </div>
{{/wizard-subscription-container}}

{{wizard-links
  itemType="field"
  current=currentField
  items=step.fields
  parentId=step.id
}}

{{#each step.fields as |field|}}
  {{wizard-custom-field
    field=field
    step=step
    wizard=wizard
    currentFieldId=currentField.id
    fieldTypes=fieldTypes
    removeField="removeField"
    wizardFields=wizardFields
    subscribed=subscribed
  }}
{{/each}}