//~OPTIONS
{
  include: [  "fcf:NSystem/languages.js",
              "fcfManagement:templates/pages/translations/translations-tabs/styles.css"
           ],
  access:  ["root"],
}

//~ARGUMENTS
{
  language:               fcf.firstKey(fcf.NTools.languages.getLanguages()),
  languages:              fcf.NTools.languages.getLanguages(),
  defaultLanguage:        fcf.application.getSystemVariable("fcf:defaultLanguage"),
  files:                  fcf.argProg(),
  displayedFilesAll:      fcf.argProg({dependencies: ["files", "language"]}),
  displayedFiles:         fcf.argRef("displayedFilesAll['@{{args.language}}@']"),
  editableFile:           fcf.argProg({dependencies: ["displayedFilesAll", "language"]}),
  translations:           fcf.argProg({dependencies: ["displayedFilesAll"]}),
  translationsOrigin:     fcf.argProg({dependencies: ["displayedFilesAll"]}),
  translationsModify:     fcf.argProg(),
}

//~TEMPLATE
<b>!{{Language}}!:</b>
@{{ render.template("@controls:select", {fcfAlias: "language", items: fcf.NTools.languages.getLanguages(), value: fcf.argRef("language") }); }}@

<b>!{{Editable file}}!:</b>
%{{
  var file  = undefined;
  fcf.each(args.files, function(k, v){
    if (v.language == args.language && v.editable)
      file = v.path;
  });
}}%
@{{file}}@

<h4>!{{Displayed files}}!:</h4>
%{{ fcf.each(args.displayedFiles, function(k, displayedFile){ }}%
<span 
  class="translations-tab-file-item @{{ displayedFile.enable ? "" : "fcf-inactive"}}@" 
  @{{ !displayedFile.editable ? "fcfEventClick='wrapper.onFileClick(\"" + displayedFile.path + "\")'" : "" }}@
  >
  @{{ displayedFile.path }}@
  %{{ if (!displayedFile.editable) { }}%
  @{{ displayedFile.enable ? "<span class='fcf-icon-eye'></span>" : "" }}@
  %{{ } else { }}%
    <span class='fcf-icon-edit'></span>
  %{{ } }}%
</span>
%{{ }); }}%

<p>
<h4>!{{Translations}}!:</h4>
@{{
  render.template("@controls:table", {
    fcfAlias: "table",
    enableToolbar: true,
    enableSearch:  true,
    outputRowCount:  10,
    value: fcf.argRef("translations['" + args.language + "']"),
    toolbarLeftItems: fcf.argVal([
      fcf.argTmpl("@controls:button", {title: fcf.t("Append"), fcfEventClick: "parent.getParent().onAppendRecord()"}),
    ]),
    editableFile: args.editableFile,
    columnsStyles: [ {width: "40%"}, {width: "60%"} ],
    columns: [
      {
        alias: "phrase",
        title: "!{{Phrase}}!",
        type:  "text",
      },
      {
        alias: "translate",
        title: "!{{Translate}}!",
        type:  "text",
        mode: "edit",
        args: {
          width: "100%",
          height: "2em",
        }
      },
      {
        alias: "path",
        title: "!{{File}}!",
        type:  "text",
      },
      {
        alias:          "action",
        title:          "!{{Actions}}!",
        type:           "text",
        template:       "@controls:button",
        args: { 
          title: "!{{Remove}}!",
          editableFile: args.editableFile,
          __path:   fcf.argRecordRef("path"),
          __modify: fcf.argRecordRef("modify"),
          enable: fcf.argVal("@{{args.editableFile == args.__path || args.__modify}}@"),
          fcfEventClick: "parent.getParent().onRemoveRecord('@{key}@')"
        }
      },
    ]
  });
}}@
</p>

@{{ render.template("@controls:button",{fcfAlias: "save", title: fcf.t("Save"), enable: false, fcfEventClick: "parent.onSave()" }) }}@
@{{ render.template("@controls:button",{fcfAlias: "cancel", title: fcf.t("Cancel"), enable: false, fcfEventClick: "parent.onCancel()" }) }}@