-<div class="api4-clause-group-sortable" ng-model="data.clauses" ui-sortable="{axis: 'y', connectWith: '.api4-clause-group-sortable', containment: '.api4-clause-fieldset', over: onSortOver}" ui-sortable-start="onSort" ui-sortable-stop="onSort">
- <div class="api4-input form-inline clearfix" ng-repeat="(index, clause) in data.clauses">
- <div class="api4-clause-badge" title="{{:: ts('Drag to reposition') }}">
- <span class="badge badge-info">
- <span ng-if="!index && !data.groupParent">{{ data.type }}</span>
- <span ng-if="index || data.groupParent">{{ data.op }}</span>
- <i class="crm-i fa-arrows" aria-hidden="true"></i>
- </span>
+<div class="api4-clause-group-sortable" ng-model="data.clauses" ui-sortable="$ctrl.sortOptions">
+ <div class="api4-input form-inline clearfix" ng-repeat="(index, clause) in data.clauses" ng-class="{hiddenElement: index < (data.skip || 0)}">
+ <div ng-if="index >= (data.skip || 0)">
+ <div class="api4-clause-badge" title="{{:: ts('Drag to reposition') }}">
+ <span class="badge badge-info">
+ <span ng-if="index === (data.skip || 0) && !data.groupParent">{{ data.label }}</span>
+ <span ng-if="index > (data.skip || 0) || data.groupParent">{{ $ctrl.conjunctions[data.op] }}</span>
+ <i class="crm-i fa-arrows" aria-hidden="true"></i>
+ </span>
+ </div>
+ <div ng-if="!$ctrl.conjunctions[clause[0]]" class="api4-input-group">
+ <input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{data: data.fields, allowClear: true, placeholder: 'Field'}" />
+ <select class="form-control api4-operator" ng-model="clause[1]" ng-options="o for o in $ctrl.operators" ></select>
+ <input class="form-control" ng-model="clause[2]" api4-exp-value="{field: clause[0], op: clause[1], format: data.format}" />
+ </div>
+ <fieldset class="clearfix" ng-if="$ctrl.conjunctions[clause[0]]" crm-api4-clause="{format: data.format, clauses: clause[1], op: clause[0], fields: data.fields, groupParent: data.clauses, groupIndex: index}">
+ </fieldset>