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

//~ARGUMENTS
{
  //fcfStyleInner:  "display: inline-block",
  fcfClassInner:  fcf.argVal("@{{decor.selectWrapper}}@"),
  value:          fcf.argVal("@{{fcf.firstKey(args.items)}}@"),
  data:           fcf.argVal("@{{args.items[args.value] ? args.items[args.value] : ''}}@", {dependencies:["value", "items"]}),
  items:          [],
  titlePattern:   "${data}$",
  search:         true,
  blank:          false,
  enable:         true,
  width:          "250px",
  // Array additional button
  // Example: buttons: [{name: "add", width: "auto", data: "Add"}]
  buttons:        [],
}

//~TEMPLATE
<table class="@{{decor.selectContainer}}@" style="width:@{{args.width}}@">
<tr>
  <td width="100%">
    <input class="${{decor.selectInput}}$"
           autocomplete="off"
           style="width: 100%"
           autocomplete="off"
           @{{ args.search ? "" : "readonly" }}@
           @{{ args.enable ? "" : "disabled" }}@
           value="@{{fcf.encodeHtml(args.data)}}@"
           fcfEventInput="wrapper.onInput(event);"
           >
    </input>
  </td>
  <td width="1px" class="@{{decor.selectButtonsContainer}}@">
    <div
      class="@{{decor.selectButton}}@"
      fcfEventClick="wrapper.onExtend(event)"
      @{{ args.enable ? "" : "disabled" }}@
      >
      <i class="fcf-icon-down"></i>
    </div>%{{
        fcf.each(args.buttons, (a_key, a_value)=>{
      }}%@{{a_value}}@%{{
        });
      }}%
  </td>
</tr>
</table>

@{{ render.template({template: "+menu", args: {fcfAlias: "menu", fcfEventChange: "parent.onChange(event);", fcfEventClose: "parent.onCloseMenu(event);" }}); }}@


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

//~ARGUMENTS menu
{
  fcfClassInner: "fcf-select-data",
  fcfStyleInner: fcf.argVal("width: @{{args.width}}@; display: @{{args.display}}@"),
  width:         0,
  blank:         false,
  display:       "none",
  items:         {},
  titlePattern:  "${data}$",
  fcfEventKeyDown: "wrapper.onKeyDown(event)",
}

//~TEMPLATE menu
%{{
  if (args.blank){
}}%
  <div name="item" class="${{decor.selectItem}}$" value="" fcfEventClick="wrapper.onItem(event)">&nbsp;</div>
%{{
  }

  fcf.each(args.items, function(k,v){
}}%
  <div name="item" class="${{decor.selectItem}}$" value="@{{fcf.encodeHtml(k)}}@" fcfEventClick="wrapper.onItem(event)">
  @{{ fcf.pattern(args.titlePattern, {value: k, data: v}) }}@
  </div>
%{{
  });
}}%
