//~OPTIONS
{
  clientRendering: "update_np",
}

//~ARGUMENTS
{
  projection:         "",
  selfProjection:     "",
  enable:             fcf.argProg({important: true}), // default: true
  blank:              fcf.argProg({important: true}), // default: true
  width:              "250px",
  _sourceProjection:  fcf.argProg(),
  _fields:            fcf.argProg(),

}

//~TEMPLATE
@{{
  render.template("@dbControls:select", 
                  {
                    fcfAlias:       "select",
                    projection:     fcf.argRef("_sourceProjection"),
                    blank:          false,
                    enable:         fcf.argRef("enable"),
                    fields:         fcf.argRef("_fields"),
                    width:          fcf.argRef("width"),
                    buttons:        fcf.argVal([
                                    '<div class="@{{decor.selectButton}}@ @{{args.value && args.enable ? "" : "fcf-inactive"}}@" '+
                                         'name="button-add"' + 
                                         'fcfEventClick="if (wrapper.getArg(\'enable\')) parent.onAppend(wrapper.getArg(\'value\'))"'+
                                         '>' + 
                                    '+' +
                                    '</div>'
                    ]),
                  } );
}}@
@{{ render.template("+items", 
                    {
                      fcfAlias: "items",
                      value:    fcf.argRef("value"),
                      blank:    fcf.argRef("blank"),
                      enable:   fcf.argRef("enable"),
                    }); 
}}@

//~OPTIONS items
{
  clientRendering: true,
}

//~TEMPLATE items
%{{
  var count = fcf.count(args.value);
}}%
<div class="${{decor.multiselectItems}}$">
%{{ fcf.each(args.value, function(a_key, a_record){  }}%
    <div class="${{decor.multiselectItem}}$">
      @{{ a_record["@title"] }}@ 
      %{{ if (args.enable && (count > 1 || args.blank)) { }}%
      <div value="@{{a_record["@key"]}}@" class="${{decor.multiselectRemoveButton}}$" fcfEventClick="parent.onRemoveItem(event);"></div>
      %{{ } }}%
    </div>
%{{ }); }}%
</div>

