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

//~ARGUMENTS
{
  value:          fcf.argProg(),
  data:           fcf.argProg(),
  items:          {},
  search:         true,
  enable:         true,
  titlePattern:   "${data}$",
  blank:          true,
}

//~TEMPLATE
@{{ render.template({
      template: "@controls:select",
      args: {
        fcfAlias: "select",
        search: args.search,
        enable: args.enable,
        blank: true,
        value: undefined,
        data:  undefined,
        items: fcf.argRef(args.fcfId, "items"),
        buttons:        fcf.argVal([
                        '<div class="@{{decor.selectButton}}@ @{{args.value && args.enable ? "" : "fcf-inactive"}}@" '+
                             'name="button-add"' +
                             'fcfEventClick="if (wrapper.getArg(\'enable\')) parent.onAdd(wrapper.getArg(\'value\'))"'+
                             '>' +
                        '+' +
                        '</div>'
        ]),
        onchange: "fcf.getWrapper(this).getParent().onSwitchElementAdd(event);",
      }
    }); }}@
@{{ render.template("+items", {
                    fcfAlias: "items",
                    titlePattern: args.titlePattern,
                    enable: args.enable,
                    items: fcf.argRef("data"),
                    blank: fcf.argRef("blank")
                    }
                  );
}}@

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

//~ARGUMENTS items
{
  items:          {},
}

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