//~OPTIONS
{
  extends:              "fcfControls:templates/view.tmpl",
  clientRendering:      true,
  lockTemplate:         false,
  autoUpdate:           true,
}
//~ARGUMENTS
{
  fcfStyleInner:  fcf.argVal("display:inline;"),
  value:          "",
  enable:         true,
  autofocus:      false,
  width:          "250px",
  rightButtons:   [],
  leftButtons:    [],
}

//~TEMPLATE
<table class="@{{decor.textEditTableClass}}@" @{{!args.enable ? "readonly" : ""}}@ style="width:@{{args.width}}@">
<tr>
  %{{ fcf.each(args.leftButtons, (a_key, a_content)=>{ }}%
    <td width="1px" class="@{{decor.textEditButtonClass}}@">
      @{{a_content}}@
    </td>
  %{{ }); }}%
  <td width="100%">
    <input
      autocomplete="off"
      type="text"
      @{{args.autofocus ? "autofocus" : ""}}@
      @{{!args.enable   ? "readonly" : ""}}@
      class="${{decor.textEditClass}}$"
      style='width:100%'
      fcfEventInput="wrapper.onInput(event)"
      value="@{{fcf.encodeHtml(args.value)}}@"
      ></input>
  </td>
  %{{ fcf.each(args.rightButtons, (a_key, a_content)=>{ }}%
    <td width="1px" class="@{{decor.textEditButtonClass}}@">
      @{{a_content}}@
    </td>
  %{{ }); }}%
</tr>
</table>
