//~OPTIONS
{
  clientRendering: true,
  lockTemplate: true,
}
//~ARGUMENTS
{
  fcfSaveChildsState: false,

  mode:             "read",
  columns:          fcf.argProg({important: true}),
  columnsStyles:    [],
  value:            [],
  outputRowCount:   5,
  page:             1,
  outputPageCount:  5,
  enableToolbar:    false,
  enableSort:       false,
  enableSearch:     false,
  toolbarLeftItems:  [],
  toolbarRightItems: [],
  search:           "",
  sortColumns:      "",
  sortOrder:        {},
  dragable:         false,
  filter:           "",

  _order:           [],
  _links:           fcf.argProg({dependencies:["*"], important: true}),
  _page:            undefined,
  _pageCount:       undefined,
}

//~TEMPLATE
<table class="${{decor.tableClass}}$">
  <thead>
    %{{ if (args.enableToolbar) { }}%
    <tr>
      <th colspan="@{{args.columns.length}}@" class="ui segment">
        %{{ if (args.enableSearch) { }}%
          <div class="fcf-table-toolbar-item">
            @{{ render.template({
                    template: "@controls:text-edit",
                    args: {
                      icon: "search",
                      fcfAlias: "sort",
                      value: args.search,
                      rightButtons:[
                        "<span name='search' class='fcf-icon fcf-icon-find' fcfEventClick='parent.onSearch()'></span>",
                        "<span name='clear' class='fcf-icon fcf-icon-close' fcfEventClick='parent.onClear()'></span>"
                      ]
                      }
                    }) }}@
          </div>
        %{{ } }}%
        %{{ fcf.each(args.toolbarLeftItems, function(a_key, a_item){ }}%
        <div class="fcf-table-toolbar-item">
          @{{a_item}}@
        </div>
        %{{ }); }}%

        %{{ fcf.each(args.toolbarRightItems, function(a_key, a_item){ }}%
        <div class="fcf-table-toolbar-right-item">
          @{{a_item}}@
        </div>
        %{{ }); }}%

      </th>
    </tr>
    %{{ } }}%
    <tr
      ondrop="fcf.getWrapper(this).onDrop(event)"
      ondragover="fcf.getWrapper(this).onDragOver(event)"
      >

    %{{
      fcf.each(args.columns, function(a_key, a_column){
        var orderClass = args.sortOrder[a_key] == "asc"  ? "fcf-icon fcf-icon-down" :
                         args.sortOrder[a_key] == "desc" ? "fcf-icon fcf-icon-up" :
                                                           "fcf-icon fcf-icon-updown";
        var styleColumnObject = fcf.styleToString(args.columnsStyles[a_key]);
    }}%
      <th style="@{{styleColumnObject}}@">@{{fcf.pattern(a_column.title)}}@
          %{{ if (args.enableSort) { }}%
            <div key="@{{a_key}}@" class="fcf-right fcf-pointer @{{orderClass}}@" fcfEventClick="wrapper.onSort(event)"></div>
          %{{ } }}%
      </th>
    %{{ }); }}%
    </tr>
  </tr></thead>
  <tbody>
    %{{
        for(var i = 0; i < args._links.length; ++i) {
            var record = args.value[args._links[i].row];
      }}%
      <tr
        row="@{{i + args.outputRowCount * (args.page-1)}}@"
        @{{args.dragable ? 'draggable="true"' : ''}}@
        fcfEventDragEnd="wrapper.onDragEnd(event)"
        fcfEventDragStart="wrapper.onDragStart(event)"
        fcfEventDragOver="wrapper.onDragOver(event)"
        fcfEventDrop="wrapper.onDrop(event)"
        >
        %{{ fcf.each(args.columns, function(a_key, a_column){ }}%
          <td>
          %{{
            var patternLinkArgs = {
              id:         args.fcfId,
              references: {record: 'value["' + args._links[i].row + '"]', args: ''}
            };
            var patternArgs = {record: record, key: args._links[i].row, args: args};
            var column      = fcf.pattern(a_column, patternArgs, patternLinkArgs);
          }}%
          @{{
            render.view({ view:   column,
                          record: fcf.argRef(`value[${JSON.stringify(args._links[i].row)}]`),
                          args: {
                            value:  a_column.value !== undefined                                 ? column.value :
                                    typeof a_column.args == "object" && "value" in a_column.args ? column.args.value :
                                                                                                   fcf.argRef(`value[${JSON.stringify(args._links[i].row)}][${JSON.stringify(a_column.alias)}]`),
                          },
                          mode:   a_column.mode ? a_column.mode : args.mode});
          }}@</td>
        %{{ }); }}%
      </tr>
    %{{ }; }}%
  </tbody>
  <tfoot>
    %{{
      if (args._pageCount > 1)  {
    }}%
    <tr
        row="bottom"
        ondrop="fcf.getWrapper(this).onDrop(event)"
        ondragover="fcf.getWrapper(this).onDragOver(event)"
    >
      <th
        row="bottom"
        colspan="@{{args.columns.length}}@">
        <div class="fcf-footer-drop-down"><i class="fcf-icon-down"></i></div>
        @{{ render.template({
                        template: "@controls:pagination",
                        args: {
                          fcfClass: decor.paginationTableClass,
                          pageCount: args._pageCount,
                          page: args._page,
                          outputPageCount: args.outputPageCount,
                          fcfEventChange: "parent.onPage(event)"
                        }
                      }); }}@
      </th>
    </tr>
    %{{
    }
    }}%
  </tfoot>
</table>
