<tal:block i18n:domain="nive">

<div tal:condition="msgs|None" class="alert alert-warning">
  <div tal:repeat="msg msgs"
       tal:content="structure msg"></div>
</div>

<form 
  id="${field.formid}"
  action="${field.action}${field.anchor}"
  method="${field.method}"
  class="${field.css_class}"
  enctype="multipart/form-data"
  tal:attributes="autofill field.autofill"
  role="form">

    <div tal:condition="field.error" class="alert alert-warning">
      <h4 i18n:translate="">There was a problem with your submission</h4>
      <div i18n:translate="">Errors have been highlighted below</div>
      <div tal:condition="field.errormsg" class="errorMsg">${field.errormsg}</div>
    </div>

    <tal:block tal:define="rndr field.renderer;
                           tmpl field.widget.item_template"
               tal:repeat="f field.children">
         <div tal:replace="structure rndr(tmpl,field=f,cstruct=cstruct.get(f.name, null))"></div>
    </tal:block>
  
    <div tal:condition="field.footer"
         tal:content="structure field.footer" class="form-footer"></div>

    <div tal:condition="field.uploadProgressBar" style="display:none" class="progress">
      <div class="bar bar-success" style="width:0%;"></div>
    </div>

    <div tal:replace="structure field.renderer(field.widget.action_template, form=field, buttons=field.buttons)"></div>

<script type="text/javascript" tal:condition="field.use_ajax">
function reform_ajaxify(response, status, xhr, form, oid, mthd) {
    var showbar = 0;
    var options = {
        target: '#'+oid,
        replaceTarget: true,
        forceSync: true,
        useProgressBar: '${field.uploadProgressBar}',
        delay: 500,                                        // delay in milliseconds before showing the progress bar

        beforeSend: function() {
            if(options.useProgressBar=='none')
                return;
            if(options.useProgressBar=='always')
                $(options.target+' .progress').show();
            $(options.target+' .progress .bar').width('0%');
        },

        uploadProgress: function(event, position, total, percentComplete) {
            if(options.useProgressBar=='none')
                return;
            // keep some rest to show the server has to process thew file, too
            if(percentComplete>98)
                percentComplete = 98;
            $(options.target+' .progress .bar').width(percentComplete + '%');
            if(options.useProgressBar=='auto') {
                if(showbar==0)
                    showbar = options.delay+event.timeStamp;
                if(showbar > 0) {
                    if(event.timeStamp > showbar) {
                        showbar=-1;
                        $(options.target+' .progress').show();
                    };
                };
            };
        },

        success:  function(responseText, statusText, xhr, $form) {
            if(options.useProgressBar!='none')
                $(options.target+' .progress .bar').width('100%');
            if(xhr.getResponseHeader('X-Relocate')) {
                if($(this).nive_actiondelegation!=undefined)
                    // custom success handling plugin point
                    $(this).nive_actiondelegation(responseText, status, xhr);
                else
                    window.location.href = xhr.getResponseHeader('X-Relocate');
            }
            else {
                reform_ajaxify(response, status, xhr, form, oid);
            }
        },
        error:  function(responseText, statusText, xhr, $form) {
            $('#'+oid).replaceWith(responseText.responseText);
            reform_ajaxify(response, status, xhr, form, oid);
        }
    };
    var extra_options = ${field.ajax_options};
    var name;
    if (extra_options) {
        for (name in extra_options) {
            options[name] = extra_options[name];
        };
    };
    $('#'+oid).ajaxForm(options);
    if(mthd){
        mthd(response, status, xhr, form);
    }
}
reform.addCallback(
    '${field.formid}',
    function(oid) {
        //deactivated! reform_ajaxify(null, null, null, null, oid);
    }
);
${'reform_loaded=false; reform.load();' if True else ''}
</script>
</form>
</tal:block>