<form
  tal:define="style style|field.widget.style;
              css_class css_class|string:${field.widget.css_class or field.css_class or ''};
              item_template item_template|field.widget.item_template;
              autocomplete autocomplete|field.autocomplete;
              title title|field.title;
              errormsg errormsg|field.errormsg;
              description description|field.description;
              buttons buttons|field.buttons;
              use_ajax use_ajax|field.use_ajax;
              ajax_options ajax_options|field.ajax_options;
              formid formid|field.formid;
              action action|field.action or None;
              method method|field.method;"
  tal:attributes="autocomplete autocomplete;
                  style style;
                  class css_class;
                  action action;"
  id="${formid}"
  method="${method}"
  enctype="multipart/form-data"
  accept-charset="utf-8"
  i18n:domain="deform"
  >

  <fieldset class="deform-form-fieldset">

    <legend tal:condition="title">${title}</legend>

    <input type="hidden" name="${h.csrf_token_key}" value="${h.get_csrf_token(request.session)}" />
    <input type="hidden" name="_charset_" />
    <input type="hidden" name="__formid__" value="${formid}"/>

    <!--
    <div class="alert alert-danger" tal:condition="field.error">
      <div class="error-msg-lbl" i18n:translate=""
        >There was a problem with your submission</div>
      <div class="error-msg-detail" i18n:translate=""
        >Errors have been highlighted below</div>
      <p class="error-msg">${field.errormsg}</p>
    </div>
    -->

    <p class="section first" tal:condition="description">
      ${description}
    </p>

    <div tal:repeat="child field"
         tal:replace="structure child.render_template(item_template)"/>

    <div class="form-group">
      <tal:loop tal:repeat="button buttons">
        <button
              tal:define="btn_disposition repeat.button.start and 'btn-primary' or (button.name == 'delete' and 'btn-danger' or 'btn-default');
              btn_icon button.icon|None"
              tal:attributes="disabled button.disabled if button.disabled else None"
              id="${formid+button.name}"
              name="${button.name}"
              type="${button.type}"
              class="btn ${button.css_class or btn_disposition}"
              value="${button.value}">
          <i tal:condition="btn_icon" class="${btn_icon}"> </i>
          ${button.title}
        </button>
      </tal:loop>
    </div>

  </fieldset>

  <script type="text/javascript" tal:condition="use_ajax">
   deform.addCallback(
     '${formid}',
     function(oid) {
       var target = '#' + oid;
       var options = {
         target: target,
         replaceTarget: true,
         success: function() {
           deform.processCallbacks();
           deform.focusFirstInput(target);
         },
         beforeSerialize: function() {
           // See http://bit.ly/1agBs9Z (hack to fix tinymce-related ajax bug)
           if ('tinymce' in window) {
             $(tinymce.get()).each(
               function(i, el) {
                 var content = el.getContent();
                 var editor_input = document.getElementById(el.id);
                 editor_input.value = content;
             });
           }
         }
       };
       var extra_options = ${ajax_options} || {};
       $('#' + oid).ajaxForm($.extend(options, extra_options));
     }
   );
  </script>

</form>