{{#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>
  
  {{!--
    /* learning_step
     * unit:        custom_wizard:templates_and_builder
     * type:        step
     * number:      1
     * title:       Add the attribute to the template
     * description: First, add a new setting block to allow the site admin to
     *              administer how the attribute will work. Here we can see the
     *              controls for the Character Counter field attribute. Note
     *              the attribute is only available for text type fields (see 
     *              isTextType conditional above this block). Note the
     *              consistent use of the ``setting``, ``setting-label`` and
     *              ``setting-value`` HTML structure throughout this component,
     *              and other Custom Wizard admin components.        
     */
  --}}
  <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>
{{/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>{{{i18n 'admin.wizard.field.date_time_format.label'}}}</label>
    </div>
    
    <div class="setting-value">
      {{input value=field.format class="medium"}}
      <label>{{{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 showAdvanced}}
  {{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>
      
      {{#if validations}}
        {{wizard-realtime-validations field=field validations=validations}}
      {{/if}}
    </div>
  {{/if}}
{{/if}}