//~OPTIONS
{
  clientRendering: true,
}

//~ARGUMENTS
{
  fcfClassInner:  fcf.argVal("@{{decor.selectWrapper}}@"),
  projection:     "",
  fields:         [],
  value:          false,
  enable:         true,
  search:         true,
  blank:          true,
  width:          "250px",
  buttons:        [],
}

//~TEMPLATE
%{{
  let value = typeof args.value === "object" && !fcf.empty(args.value["@title"]) ? args.value["@title"] : "";
}}%
<table class="@{{decor.selectContainer}}@" style="width: @{{args.width}}@">
  <tr>
    <td width="100%">
      <input 
        type="text" 
        style="width:100%; height: 100%" 
        class="@{{decor.selectInput}}@" 
        value="@{{fcf.encodeHtml(value)}}@"
        @{{args.search && args.enable ? "" : "readonly"}}@
        fcfEventInput="if (wrapper.getArg('enable')) wrapper.onInput(event)" 
        fcfEventClick="if (wrapper.getArg('enable')) wrapper.onClickInput(event)"
        >
    </td>
    <td width="0%" class="@{{decor.selectButtonsContainer}}@">
      <div 
        class="@{{decor.selectButton}}@ @{{args.enable ? "" : "fcf-inactive"}}@" 
        fcfEventClick="if (wrapper.getArg('enable')) wrapper.onButtonClick(event)">
        <span class="fcf-icon-down"></span>
      </div>%{{
        fcf.each(args.buttons, (a_key, a_value)=>{
      }}%@{{a_value}}@%{{
        });
      }}%
    </td>
  </tr>
</table>
@{{ render.template("+menu", 
                    {
                      fcfStyle:   "display: none", 
                      fcfAlias:   "menu", 
                      blank:      fcf.argRef("blank"), 
                      projection: fcf.argRef("projection"), 
                      fields:     fcf.argRef("fields"), 
                      find:       "",
                    }); 
}}@


//~OPTIONS menu
{
  clientRendering: true,
}

//~ARGUMENTS menu
{
  fcfClassInner: "fcf-select-data",
  blank:         true,
  projection:    "",
  find:          "",
  _items:        fcf.argProg({dependencies: "projection"}),
}

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

  fcf.each(args._items, function(k,v){
}}%
    <div name="item" class="${{decor.selectItem}}$" value="@{{fcf.encodeHtml(v["@key"])}}@" title="@{{fcf.encodeHtml(v["@title"])}}@" fcfEventClick="parent.onSelect(event)">
    @{{ v["@title"] != "" ? v["@title"] : v["@key"] }}@
    </div>  
%{{
  });
}}%
