//~OPTIONS
{
  extends:         "@controls:form",
  clientRendering: false,
}

//~ARGUMENTS
{
  mode:                   "edit",
  projection:             undefined,
  key:                    undefined,
  fields:                 fcf.argVal([], {modify: true, hardDependencies: ["projection"]}),
  value:                  fcf.argRef("value@@{{args.language}}@", { hardDependencies:["languages", "mode"] }),
  enableTranslations:     true,
  enableLabels:           true,
  language:               fcf.argProg(),
  defaultLanguage:        fcf.argProg(),
  languages:              fcf.argProg(),

  fieldsWidth:            "100%",
  errors:                 [],
  alerts:                 [],
  allModify:              {},

  _enableTranslations:    fcf.argProg(),
}

//~TEMPLATE
%{{
  let isEditMode = args.mode.split(".")[0] == "edit" || args.mode.split(".")[0] == "add";
}}%
<div class="${{decor.form}}$">
  %{{
   if (args._enableTranslations) {
  }}%
  <div name="fcf-form-top-panel" class="fcf-form-top-panel">
    <div class="${{decor.formTranslations}}$">
    !{{Current language}}!: @{{ render.template("@controls:select", { items: fcf.application.getSystemVariable("fcf:languages"), value: fcf.argRef(args.fcfId, "language") }) }}@
    </div>
    <div style="clear:both"></div>
  </div>
  %{{
    }
  }}%

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

  %{{
    let errorsLangs = fcf.map(
            args.errors,
            (a_key, a_error)=>{
              return [a_error.language in args.languages ? a_error.language : args.defaultLanguage, true];
            });
    fcf.each(errorsLangs, (a_lang)=>{
      if (a_lang == args.language)
        return;
  }}%
    <div class="fcf-alert">
    @{{ fcf.pattern(fcf.t("Incorrect fields for the ${language}$ language"), {language: args.languages[a_lang]} ) }}@
    </div>
  %{{
    });
  }}%

  %{{ fcf.each(args.fields, function(a_key, a_field){ }}%
    <div class="${{decor.formElement}}$">

      %{{ if (a_field.title && args.enableLabels) { }}%
        <div class="@{{decor.formTitle}}@">
          @{{a_field.title}}@:
        </div>
      %{{ } }}%

      %{{ if (args.language !== args.defaultLanguage && a_field.translate && isEditMode) { }}%
      <div class="fcf-form-view-container" style="width: @{{args.fieldsWidth}}@">
        <div class="fcf-form-view-data">
      %{{ } }}%

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

      %{{ if (args.language !== args.defaultLanguage && a_field.translate && isEditMode) { }}%
        </div>
        <div class="fcf-form-view-clear-button">
        @{{ render.template("@controls:button", {title: "<span class=\"fcf-icon-clear\"></span>", fcfEventClick: "parent.onClearElement(\"" + fcf.escapeQuotes(a_field.alias) + "\")" } )}}@
        </div>
      </div>
      %{{ } }}%

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

      %{{
        let errors = fcf.filter(args.errors, (a_key, a_error) => {
          return  a_error.alias == a_field.alias && (a_error.language == args.language || !a_error.language);
        });
        if (!fcf.empty(errors)) {
      }}%
          <div class="@{{decor.formElementError}}@">
            %{{fcf.each(errors, (key, error)=>{ }}%
              <div class="@{{decor.formElementErrorItem}}@">
                @{{error.error}}@
              </div>
            %{{ }); }}%
          </div>
      %{{ } }}%

    </div>
  %{{ }); }}%
</div>
