<div id="bootstrap-theme">
  <div ng-controller="crmSearchActionUpdate">
    <p><strong>{{:: ts('Update the %1 selected %2 with the following values:', {1: model.ids.length, 2: $ctrl.entityTitle}) }}</strong></p>
    <div class="form-inline" ng-repeat="clause in $ctrl.values" >
      <input class="form-control" ng-change="$ctrl.updateField($index)" ng-model="clause[0]" crm-ui-select="{data: $ctrl.availableFields, allowClear: true, placeholder: 'Field'}" />
      <input class="form-control" ng-model="clause[1]" crm-search-value="{field: $ctrl.getField(clause[0])}" />
    </div>
    <div class="form-inline">
      <input class="form-control twenty" style="width: 15em;" ng-model="$ctrl.add" ng-change="$ctrl.addField()" ng-disabled="!$ctrl.fields" ng-class="{loading: !$ctrl.fields}" crm-ui-select="{data: $ctrl.availableFields, placeholder: ts('Add Value')}"/>
    </div>
    <hr />
    <div class="buttons pull-right">
      <button type="button" ng-click="$ctrl.cancel()" class="btn btn-danger">{{:: ts('Cancel') }}</button>
      <button ng-click="$ctrl.save()" class="btn btn-primary" ng-disabled="!$ctrl.values.length">{{:: ts('Update %1', {1: $ctrl.entityTitle}) }}</button>
    </div>
  </div>
</div>
