//~OPTIONS
{
  clientRendering: true,
  lockTemplate:    true,
}

//~ARGUMENTS
{
  mode:               "edit",
  fields:             fcf.argVal([], { hardDependencies: ["fieldsWidth"] }),
  fieldsMap:          fcf.argProg({dependencies: ["fields"]}),
  value:              {},
  alerts:             [],
  errors:             [],
  errorsMap:          fcf.argProg({dependencies: ["errors"]}),
  fieldsWidth:        "100%",
}

//~TEMPLATE
<div class="${{decor.form}}$">
  %{{
    fcf.each(args.alerts, (a_key, a_error)=>{
  }}%
  <div class="fcf-alert">
    @{{a_error}}@
  </div>
  %{{
    });
  }}%

  %{{ fcf.each(args.fields, function(a_key, a_field){ }}%
    <div class="@{{decor.formElement}}@">
      %{{ if (a_field.title) { }}%
        <div class="@{{decor.formTitle}}@">
          @{{a_field.title}}@:
        </div>
      %{{ } }}%

      @{{ render.view({ view: a_field, mode: args.mode, record: fcf.argRef("value"), args: { value: fcf.argRef('value[' + JSON.stringify(a_field.alias) + ']') } }) }}@

      %{{ if (!fcf.empty(a_field.description)) { }}%
        <div class="@{{decor.formDescription}}@"><description>@{{a_field.description}}@</description></div>
      %{{ } }}%

      %{{ if (args.errorsMap[a_field.alias]) { }}%
        <div class="@{{decor.formElementError}}@">
          %{{fcf.each(args.errorsMap[a_field.alias], (key, error)=>{ }}%
            <div class="@{{decor.formElementErrorItem}}@">
              @{{error}}@
            </div>
          %{{ }); }}%
        </div>
      %{{ } }}%
    </div>
  %{{ }); }}%
</div>
