<div class="form-inline">
  <label for="crm-search-main-entity">{{:: ts('Search for') }}</label>
  <input id="crm-search-main-entity" class="form-control huge collapsible-optgroups" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: mainEntitySelect}" ng-disabled="$ctrl.savedSearch.id">
</div>
<div ng-if=":: $ctrl.paramExists('join')" class="crm-search-joins">
  <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.join" class="crm-search-join">
    <div class="form-inline">
      <select class="form-control" ng-model="join[1]" ng-change="$ctrl.changeJoinType(join)" ng-options="o.k as o.v for o in ::joinTypes" ></select>
      <div class="input-group">
        <span class="input-group-addon" title="{{:: getJoin(join[0]).defaultLabel }}"><i class="crm-i {{:: getJoin(join[0]).icon }}"></i></span>
        <input class="form-control crm-search-join-label huge" ng-model="$ctrl.getSetJoinLabel(join[0])" ng-model-options="{getterSetter: true, updateOn: 'blur'}" placeholder="{{:: getJoin(join[0]).defaultLabel }}" title="{{:: ts('Optional label for this join') }}">
      </div>
      <button type="button" class="btn btn-xs btn-danger-outline" ng-click="$ctrl.removeJoin($index)" title="{{:: ts('Remove join') }}">
        <i class="crm-i fa-trash" aria-hidden="true"></i>
      </button>
    </div>
    <div class="api4-clause-fieldset">
      <crm-search-clause clauses="join" format="json" skip="2 + getJoin(join[0]).conditions.length" op="AND" label="{{:: ts('If') }}" hide-label="true" placeholder="ts('Add Condition')" fields="fieldsForJoin(join[0])" ></crm-search-clause>
    </div>
  </fieldset>
  <fieldset class="crm-search-join-add">
    <div class="form-inline">
      <select class="form-control" ng-model="controls.joinType" ng-options="o.k as o.v for o in ::joinTypes" ></select>
      <input id="crm-search-add-join"
             class="form-control crm-action-menu fa-plus"
             crm-ui-select="{placeholder: ts('Entity'), data: getJoinEntities, dropdownCss: {width: '275px'}}"
             on-crm-ui-select="$ctrl.addJoin(selection)">
    </div>
  </fieldset>
</div>
<fieldset ng-if=":: $ctrl.paramExists('groupBy')" class="crm-search-groupbys">
  <div class="form-inline" ng-repeat="groupBy in $ctrl.savedSearch.api_params.groupBy" class="crm-search-groupby">
    <label for="crm-search-groupBy-{{ $index }}">{{:: ts('Group By') }}</label>
    <crm-search-function class="form-group" expr="$ctrl.savedSearch.api_params.groupBy[$index]" mode="groupBy"></crm-search-function>
    <span ng-if="!$ctrl.hasFunction($ctrl.savedSearch.api_params.groupBy[$index])">
          <input id="crm-search-groupBy-{{ $index }}" class="form-control huge" ng-model="$ctrl.savedSearch.api_params.groupBy[$index]" crm-ui-select="{placeholder: ' ', data: fieldsForGroupBy}" ng-change="changeGroupBy($index)" />
        </span>
    <hr>
  </div>
  <div class="form-inline crm-search-groupby-add">
    <input id="crm-search-add-groupBy"
           class="form-control crm-action-menu fa-plus"
           crm-ui-select="{placeholder: ts('Group By'), data: fieldsForGroupBy, dropdownCss: {width: '300px'}}"
           on-crm-ui-select="$ctrl.addParam('groupBy', selection)" >
  </div>
</fieldset>
