<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 (mut field.type))
      options=(hash
        none="admin.wizard.field.type"
      )}}
  </div>
</div>

{{#if showMinLength}}
  <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>
{{/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 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
        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
        options=contentOptions}}
    </div>
  </div>
{{/if}}

{{wizard-advanced-toggle showAdvanced=field.showAdvanced}}

{{#if field.showAdvanced}}
  <div class="advanced-settings">
    
    {{#if isCategory}}
      <div class="setting">
        <div class="setting-label">
          <label>{{i18n 'admin.wizard.field.property'}}</label>
        </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">
      <div class="setting-label">
        <label>{{i18n 'admin.wizard.translation'}}</label>
      </div>
      <div class="setting-value medium">
        {{input
          name="key"
          value=field.key
          class="medium"
          placeholderKey="admin.wizard.translation_placeholder"}}
      </div>
    </div>
    
  </div>
{{/if}}