<div class="form-inline" ng-repeat="clause in $ctrl.item.cssRules">
  <label>{{:: $ctrl.label }}</label>
  <div class="input-group">
    <input type="text" class="form-control" ng-if="!$ctrl.styles[clause[0]]" placeholder="{{:: ts('CSS class') }}" ng-model="clause[0]" ng-model-options="{updateOn: 'blur'}">
    <div class="input-group-btn" style="{{ $ctrl.styles[clause[0]] ? '' : 'width:27px' }}">
      <button type="button" ng-click="$ctrl.menuOpen = true" ng-if="$ctrl.styles[clause[0]]" class="btn btn-sm dropdown-toggle crm-search-admin-combo-button {{ clause[0].replace('bg-', 'btn-') }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {{ $ctrl.styles[clause[0]] }}
      </button>
      <button type="button" ng-click="$ctrl.menuOpen = true" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">{{:: $ctrl.label }}</span> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" ng-if="$ctrl.menuOpen">
        <li ng-repeat="(key, label) in $ctrl.styles">
          <a href class="{{:: key }}" ng-click="clause[0] = key">{{:: label }}</a>
        </li>
        <li class="divider" role="separator"></li>
        <li>
          <a href ng-click="clause[0] = ''">{{:: ts('Other') }}</a>
        </li>
      </ul>
    </div>
  </div>
  <label>{{:: ts('If') }}</label>
  <input class="form-control collapsible-optgroups" ng-model="clause[1]" crm-ui-select="::{data: $ctrl.fields, allowClear: true, placeholder: ts('Always')}" ng-change="$ctrl.onSelectField(clause)" />
  <crm-search-condition ng-if="clause[1]" clause="clause" field="$ctrl.getField(clause[1])" offset="2" option-key="'name'" format="$ctrl.format" class="form-group"></crm-search-condition>
  <button type="button" class="btn btn-xs btn-danger-outline" ng-click="$ctrl.item.cssRules.splice($index, 1);" title="{{:: ts('Remove style') }}">
    <i class="crm-i fa-times"></i>
  </button>
</div>
<div class="form-inline" ng-if="$ctrl.showMore()" title="{{:: ts('Set background color or text style based on a field value') }}">
  <label>{{:: $ctrl.label }}</label>
  <div class="btn-group">
    <button type="button" ng-click="$ctrl.menuOpen = true" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>{{ $ctrl.item.cssRules && $ctrl.item.cssRules.length ? ts('Add') : ts('None') }}</span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" ng-if="$ctrl.menuOpen">
      <li ng-repeat="(key, label) in $ctrl.styles">
        <a href class="{{:: key }}" ng-click="$ctrl.addClause(key)">{{:: label }}</a>
      </li>
      <li class="divider" role="separator"></li>
      <li>
        <a href ng-click="$ctrl.addClause('')">{{:: ts('Other') }}</a>
      </li>
    </ul>
  </div>
</div>
