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

//~ARGUMENTS
{
  fcfClassInner: "fcf-list",
  fcfStyleInner: "@{{args.width}}@",
  width:         "100%",
  template:      "@controls:form",
  templateArgs:  {mode: "read"},
  fields:        [],
  value:         [],
  page:          0,
  pageCount:     fcf.argVal("@{{fcf.count(args.value)}}@"),
  capacity:      10,
  itemClasses:   "",
  itemStyles:    "",
}

//~TEMPLATE
%{{
  let offset = fcf.max(args.page-1, 0)*args.capacity;
  for(let i = offset; i < (offset + args.capacity); ++i) { }}%
  %{{
    if (!args.value[i])
      break;
  }}%
  <div class="fcf-list-item @{{fcf.str(args.itemClasses)}}@" style="@{{fcf.str(args.itemStyles)}}@">
    %{{
      let templateArgs = fcf.append({}, args.templateArgs, {fields: fcf.argRef("fields"), value: fcf.argRef("value[" + i + "]") });
    }}%
    @{{ render.template(args.template, templateArgs) }}@
  </div>
%{{ }; }}%
<div class="fcf-list-clear"></div>
<br>
@{{
  render.template("@controls:pagination", {
    page:      fcf.argRef("page"),
    pageCount: fcf.argRef("pageCount"),
    showOne:   false,
  });
}}@
