
<form
  id="form_field_new"
  name="form_field_new"
  action=""
  method="post"
  data-parsley-validate="true"
>
  {{#if id}}<input type="hidden" id="field_id" name="id" value="{{ id }}" />{{/if}}
  <p>
    <label for="field_type"><%= __('Select a field type:') %></label>
    <select
      id="field_type"
      name="type"
      data-parsley-required="true"
      data-parsley-required-message="<%= __('Please specify a type.') %>"
    >
      <option value="">--</option>
      <option
        {{#ifCond type '==' 'text'}}selected="selected"{{/ifCond}}
        value="text"><%= __('Text Input') %>
      </option>
      <option
        {{#ifCond type '==' 'textarea'}}selected="selected"{{/ifCond}}
        value="textarea"><%= __('Text Area') %>
      </option>
      <option
        {{#ifCond type '==' 'radio'}}selected="selected"{{/ifCond}}
        value="radio"><%= __('Radio buttons') %>
      </option>
      <option
        {{#ifCond type '==' 'checkbox'}}selected="selected"{{/ifCond}}
        value="checkbox"><%= __('Checkbox') %>
      </option>
      <option
        {{#ifCond type '==' 'select'}}selected="selected"{{/ifCond}}
        value="select"><%= _x('Select', 'Form input type') %>
      </option>
      <option
        {{#ifCond type '==' 'date'}}selected="selected"{{/ifCond}}
        value="date"><%= __('Date') %>
      </option>
    </select>
  </p>
  <p>
    <label for="field_name"><%= __("Field name:") %></label>
    <input
      id="field_name"
      type="text"
      name="name"
      value="{{ name }}"
      data-parsley-required="true"
      data-parsley-required-message="<%= __('Please specify a name.') %>"
    />
  </p>
  <hr />

  <div class="field_type_form"></div>

  <p class="mailpoet_align_right">
    <input type="submit" value="<%= __('Done') %>" class="button-primary" />
  </p>
</form>

<script type="text/javascript">
  jQuery(function($) {

    $(function() {
      loadFieldForm();
    });

    $('#form_field_new #field_type').on('change', function() {
      loadFieldForm($(this).val());
    });

    function loadFieldForm(type) {
      type = (type === undefined) ? $('#form_field_new #field_type').val() : type;
      if(type !== '') {
        var template = Handlebars.compile($('#form_template_field_'+type).html()),
            data = {type: type},
            field_id = $('#form_field_new #field_id').val();

        if(field_id !== undefined && field_id.length > 0) {
          var params = $('.mailpoet_form_field[wysija_id="'+field_id+'"]').attr('wysija_params');
          if(params !== undefined) {
            data.params = JSON.parse(params);
          }
        }
        // render field template
        $('#form_field_new .field_type_form').html(template(data));
      } else {
        $('#form_field_new .field_type_form').html('');
      }
    }
  });
</script>
