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

//~ARGUMENTS
{
  fcfClassInner:          "fcf-controls-menu",
  root:                   "/",
  current:                fcf.argVal("@{{route.uri}}@"),
  loadingDepth:           1,
  disclosure:             1,
  dynamic:                true,
  saveState:              fcf.argVal("@{{args.dynamic}}@"),
  items:                  fcf.argProg({important: true, modify: true, hardDependencies: ["current", "innerRedraw", "saveState"]}),
  enableRoot:             false,

  itemTemplate:           "+item",
  openContainerTemplate:  "+container",
  innerOpen:              false,
}



//~TEMPLATE
%{{
let lastItem = {};
let diffLevel = 0;
let lastLevel = args.enableRoot ? 0 : 1;
fcf.each(args.items, (key, item)=>{
  diffLevel = item.level - lastLevel;
  lastLevel = item.level;
}}%
  %{{ for(let i = 0; i > diffLevel; --i) { }}%
    </div>
  %{{ } }}%
  %{{ for(let i = 0; i < diffLevel; ++i) { }}%
    @{{ render.template(args.openContainerTemplate, {item: fcf.argRef(`items[${key - i - 1}]`), dynamic: args.dynamic}) }}@
  %{{ } }}%
  %{{ if (item.visible) { }}%
    @{{render.template(args.itemTemplate, {item: fcf.argRef(`items[${key}]`), dynamic: args.dynamic})}}@
  %{{ } }}%
%{{
});
}}%
%{{ for(let i = (args.enableRoot ? 0 : 1); i < lastLevel; ++i) { }}%
  </div>
%{{ } }}%


//~OPTIONS container
{
  wrapper: false,
  clientRendering: true,
}

//~TEMPLATE container
<div uri="@{{args.item.uri}}@" class="fcf-controls-menu-level @{{args.item.animation ? "animation" : ""}}@ @{{ !args.dynamic ? "" : args.item.open ? "open" : "noopen"}}@" level="@{{args.item.level}}@">

//~OPTIONS item
{
  wrapper: false,
  clientRendering: true,
}


//~TEMPLATE item
  %{{
    let idItem = fcf.id();
  }}%
  <div  name="item" id="@{{idItem}}@" uri="@{{args.item.uri}}@"
        class=" fcf-controls-menu-item
                @{{ args.item.current ? "active" : "noactive" }}@
              %{{ if (args.dynamic) { }}%
                @{{ args.item.visible ? "visible" : "novisible" }}@
                @{{ args.item.noempty ? "noempty" : "empty" }}@
                @{{ args.item.open ? "open" : "noopen" }}@
                @{{ args.item.animation ? "animation" : "" }}@
              %{{ } }}%
              "
        level="@{{args.item.level}}@">
  %{{
    let offset = fcf.max((args.item.level-1),0)*16;
  }}%
    <div style="padding-left:@{{offset}}@px">
      <table width="100%" cellspacing="0px" cellpadding="0px" valign="middle">
      <tr>
        <td width="100%">
        <a href="@{{args.item.uri}}@" fcfEventClick="wrapper.onClick(event, '@{{args.item.uri}}@')">@{{args.item.title}}@</a>
        </td>
        %{{ if (args.dynamic) { }}%
        <td>
        <div class="fcf-controls-menu-button" fcfEventClick="wrapper.onOpenMenu(event, '@{{args.item.uri}}@', @{{args.item.open}}@)"></div>
        </td>
        %{{ } }}%
      <tr>
      </table>
    </div>
  </div>
