<span title="{{:: ts('Transform field using a function') }}">
  <input class="form-control fa-crm-formula" style="min-width: 20px" ng-model="$ctrl.fnName" crm-ui-select="{data: $ctrl.getFunctions, placeholder: ' ', width: 'off', dropdownCss: {width: '275px'}}" ng-change="$ctrl.selectFunction()">
</span>
<label ng-hide="$ctrl.mode !== 'select' && !$ctrl.fn">{{ $ctrl.fieldArg.field.label }}</label>

<div class="form-group" ng-repeat="arg in $ctrl.args">
  <crm-search-function-flag ng-if="$ctrl.fn" flag="flag_before" arg="arg" param="$ctrl.getParam($index)" write-expr="$ctrl.writeExpr()"></crm-search-function-flag>
  <span ng-switch="arg.type" ng-if="arg !== $ctrl.fieldArg">
    <input ng-switch-when="number" class="form-control" type="number" ng-model="arg.value" placeholder="{{ $ctrl.getParam($index).label }}" ng-change="$ctrl.changeArg($index)" ng-model-options="{updateOn: 'blur'}">
    <input ng-switch-when="string" class="form-control" ng-model="arg.value" placeholder="{{ $ctrl.getParam($index).label }}" ng-change="$ctrl.changeArg($index)" ng-trim="false" ng-model-options="{updateOn: 'blur'}">
    <input ng-switch-when="field" class="form-control" ng-model="arg.value" crm-ui-select="{data: $ctrl.getFields, placeholder: $ctrl.getParam($index).label}" ng-change="$ctrl.changeArg($index)">
  </span>
  <crm-search-function-flag ng-if="$ctrl.fn && arg.value" flag="flag_after" arg="arg" param="$ctrl.getParam($index)" write-expr="$ctrl.writeExpr()"></crm-search-function-flag>
</div>
<div class="btn-group" ng-if="$ctrl.canAddArg()">
  <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="crm-i fa-plus"></i> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li ng-repeat="(name, type) in $ctrl.exprTypes" ng-show="$ctrl.getParam($ctrl.args.length).must_be.indexOf(name) >= 0">
      <a href ng-click="$ctrl.addArg(name)">{{ type.label }}</a>
    </li>
  </ul>
</div>
