<div class="crm-flex-box">
  <div class="crm-search-criteria-column">
    <div ng-if=":: $ctrl.paramExists('join')">
      <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.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>
          <input id="crm-search-join-{{ $index }}" class="form-control huge" ng-model="join[0]" crm-ui-select="{placeholder: ' ', data: getJoinEntities}" disabled >
          <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>
        <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')">
      <div class="form-inline" ng-repeat="groupBy in $ctrl.savedSearch.api_params.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">
        <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>
  </div>
  <div class="crm-search-criteria-column">
    <fieldset class="api4-clause-fieldset">
      <crm-search-clause clauses="$ctrl.savedSearch.api_params.where" format="string" op="AND" label="{{:: ts('Where') }}" fields="fieldsForWhere" allow-functions="true" ></crm-search-clause>
    </fieldset>
    <fieldset ng-if="$ctrl.paramExists('having') && $ctrl.savedSearch.api_params.groupBy.length" class="api4-clause-fieldset">
      <crm-search-clause clauses="$ctrl.savedSearch.api_params.having" format="string" op="AND" label="{{:: ts('Having') }}" fields="fieldsForHaving" ></crm-search-clause>
    </fieldset>
  </div>
</div>
<div class="form-group crm-search-admin-right">
  <div class="btn-group" ng-if="$ctrl.savedSearch.id">
    <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search results table') }}">
      <i class="crm-i fa-external-link"></i>
      {{:: ts('View Results') }}
    </a>
    <button type="button" ng-click="$ctrl.openDisplayMenu = true;" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openDisplayMenu">
      <li title="{{:: ts('View search results table') }}">
        <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank">
          <i class="crm-i fa-table"></i>
          {{:: ts('Search results table') }}
        </a>
      </li>
      <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="display.id" ng-class="{disabled: display.acl_bypass}" title="{{:: display.acl_bypass ? ts('Display has permissions disabled') : ts('View display') }}">
        <a ng-href="{{ display.acl_bypass ? '' : $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + display.name }}" target="_blank">
          <i class="crm-i {{ display.acl_bypass ? 'fa-unlock' : $ctrl.displayTypes[display.type].icon }}"></i>
          {{ display.label }}
        </a>
      </li>
    </ul>
  </div>
</div>
<fieldset id="crm-search-build-functions">
  <legend ng-click="controls.showFunctions = !controls.showFunctions">
    <i class="crm-i fa-caret-{{ !controls.showFunctions ? 'right' : 'down' }}"></i>
    {{:: ts('Field Transformations') }}
  </legend>
  <div ng-if="!!controls.showFunctions">
    <!-- Must use track by $index with an array of primitives, and manually refresh this loop when indexes change -->
    <fieldset ng-repeat="col in $ctrl.savedSearch.api_params.select track by $index" ng-if="!$ctrl.isPseudoField(col)">
      <crm-search-function class="form-inline" mode="select" expr="$ctrl.savedSearch.api_params.select[$index]"></crm-search-function>
    </fieldset>
  </div>
</fieldset>
