{{#if showUndo}}
  {{d-button
    action="undoChanges"
    icon=undoIcon
    label=undoKey
    class="undo-changes"}}
{{/if}}

<div class="setting">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.field.label"}}</label>
  </div>
  <div class="setting-value">
    {{input name="label" value=field.label}}
  </div>
</div>

<div class="setting">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.field.required"}}</label>
  </div>
  
  <div class="setting-value">
    <span>{{i18n "admin.wizard.field.required_label"}}</span>
    {{input type="checkbox" checked=field.required}}
  </div>
</div>

<div class="setting">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.field.description"}}</label>
  </div>
  <div class="setting-value">
    {{textarea name="description" value=field.description}}
  </div>
</div>

<div class="setting">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.field.image"}}</label>
  </div>
  <div class="setting-value">
    {{image-uploader
      imageUrl=field.image
      onUploadDone=(action "imageUploadDone")
      onUploadDeleted=(action "imageUploadDeleted")
      type="wizard-step"
      class="no-repeat contain-image"}}
  </div>
</div>

<div class="setting">
  <div class="setting-label">
    <label>{{i18n "admin.wizard.type"}}</label>
  </div>
  
  <div class="setting-value">
    {{combo-box
      value=field.type
      content=fieldTypes
      onChange=(action "changeType")
      options=(hash
        none="admin.wizard.select_type"
      )}}
  </div>
</div>

{{wizard-message
  key=messageKey
  url=messageUrl
  component="field"}}

{{#if isTextType}}
  <div class="setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.field.min_length"}}</label>
    </div>

    <div class="setting-value">
      {{input
        type="number"
        name="min_length"
        value=field.min_length
        class="small"}}
    </div>
  </div>

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

    <div class="setting-value">
      {{input
        type="number"
        name="max_length"
        value=field.max_length
        class="small"}}
    </div>
  </div>

  <div class="setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.field.char_counter"}}</label>
    </div>

    <div class="setting-value">
      <span>{{i18n "admin.wizard.field.char_counter_placeholder"}}</span>
      {{input
        type="checkbox"
        checked=field.char_counter}}
    </div>
  </div>

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

    <div class="setting-value">
      {{textarea
        name="field_placeholder"
        class="medium"
        value=field.placeholder}}
    </div>
  </div>
{{/if}}

{{#if isComposerPreview}}
  <div class="setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.field.preview_template"}}</label>
    </div>

    <div class="setting-value">
      {{textarea name="preview-template" value=field.preview_template}}
    </div>
  </div>
{{/if}}

{{#if isUpload}}
  <div class="setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.field.file_types"}}</label>
    </div>

    <div class="setting-value">
      {{input value=field.file_types class="medium"}}
    </div>
  </div>
{{/if}}

{{#if showLimit}}
  <div class="setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.field.limit"}}</label>
    </div>

    <div class="setting-value">
      {{input type="number" value=field.limit class="small"}}
    </div>
  </div>
{{/if}}

{{#if isDateTime}}
  <div class="setting">
    <div class="setting-label">
      <label>{{html-safe (i18n "admin.wizard.field.date_time_format.label")}}</label>
    </div>

    <div class="setting-value">
      {{input value=field.format class="medium"}}
      <label>{{html-safe (i18n "admin.wizard.field.date_time_format.instructions")}}</label>
    </div>
  </div>
{{/if}}

{{#if showPrefill}}
  <div class="setting full field-mapper-setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.field.prefill"}}</label>
    </div>

    <div class="setting-value">
      {{wizard-mapper
        inputs=field.prefill
        property="prefill"
        onUpdate=(action "mappedFieldUpdated")
        options=prefillOptions}}
    </div>
  </div>
{{/if}}

{{#if showContent}}
  <div class="setting full field-mapper-setting">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.field.content"}}</label>
    </div>

    <div class="setting-value">
      {{wizard-mapper
        inputs=field.content
        property="content"
        onUpdate=(action "mappedFieldUpdated")
        options=contentOptions}}
    </div>
  </div>
{{/if}}

{{#if proSubscribed}}
  <div class="setting full field-mapper-setting pro">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.condition"}}</label>
      <span class="pro-label">{{i18n "admin.wizard.pro.label"}}</span>
    </div>

    <div class="setting-value">
      {{wizard-mapper
        inputs=field.condition
        options=fieldConditionOptions}}
    </div>
  </div>
  
  <div class="setting full field-mapper-setting pro">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.index"}}</label>
      <span class="pro-label">{{i18n "admin.wizard.pro.label"}}</span>
    </div>

    <div class="setting-value">
      {{wizard-mapper
        inputs=field.index
        options=fieldIndexOptions}}
    </div>
  </div>

  {{#if isCategory}}
    <div class="setting pro">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.field.property"}}</label>
        <span class="pro-label">{{i18n "admin.wizard.pro.label"}}</span>
      </div>
      
      <div class="setting-value">
        {{combo-box
          value=field.property
          content=categoryPropertyTypes
          onChange=(action (mut field.property))
          options=(hash
            none="admin.wizard.selector.placeholder.property"
          )}}
      </div>
    </div>
  {{/if}}

  <div class="setting pro">
    <div class="setting-label">
      <label>{{i18n "admin.wizard.translation"}}</label>
      <span class="pro-label">{{i18n "admin.wizard.pro.label"}}</span>
    </div>
    <div class="setting-value">
      {{input
        name="key"
        value=field.key
        placeholderKey="admin.wizard.translation_placeholder"}}
    </div>
  </div>

  {{#if validations}}
    {{wizard-realtime-validations field=field validations=validations}}
  {{/if}}
{{/if}}