<div class="form-inline" ng-repeat="icon in $ctrl.item.icons">
  <label>{{:: ts('Icon') }}</label>
  <div class="input-group">
    <div class="input-group-btn">
      <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>{{ icon.field ? $ctrl.iconFieldMap[icon.field].text : ts('Choose...') }}</span> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" ng-if="$ctrl.menuOpen">
        <li ng-repeat="field in $ctrl.iconFields">
          <a href ng-click="$ctrl.setIconField(field.id, $parent.$index)">{{:: field.text }}</a>
        </li>
        <li class="divider" ng-show="$ctrl.iconFields.length" role="separator"></li>
        <li>
          <a href ng-click="$ctrl.pickIcon($index)">{{:: ts('Choose Icon...') }}</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="form-group crm-search-admin-field-icon" ng-if="icon.icon">
    <input required ng-model="icon.icon" class="form-control crm-icon-picker">
  </div>
  <select class="form-control" ng-model="icon.side" title="{{:: ts('Show icon on left or right side of the field') }}">
    <option value="left">{{:: ts('Align left') }}</option>
    <option value="right">{{:: ts('Align right') }}</option>
  </select>
  <div class="form-group" ng-if="icon.if">
    <label>{{:: ts('If') }}</label>
    <input class="form-control collapsible-optgroups" ng-model="icon.if[0]" crm-ui-select="::{data: $ctrl.fields, allowClear: true, placeholder: ts('Always')}" ng-change="$ctrl.onSelectField(icon.if)" />
    <crm-search-condition ng-if="icon.if[0]" clause="icon.if" field="$ctrl.getField(icon.if[0])" offset="1" option-key="'name'" format="$ctrl.format" class="form-group"></crm-search-condition>
  </div>
  <button type="button" class="btn btn-xs btn-danger-outline" ng-click="$ctrl.item.icons.splice($index, 1);" title="{{:: ts('Remove icon') }}">
    <i class="crm-i fa-times"></i>
  </button>
</div>
<div class="form-inline" title="{{:: ts('Add icon(s) to this column') }}">
  <label>{{:: ts('Icon') }}</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.icons && $ctrl.item.icons.length ? ts('Add') : ts('None') }}</span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" ng-if="$ctrl.menuOpen">
      <li ng-repeat="field in $ctrl.iconFields">
        <a href ng-click="$ctrl.addIcon(field.id)">{{:: field.text }}</a>
      </li>
      <li class="divider" ng-show="$ctrl.iconFields.length" role="separator"></li>
      <li>
        <a href ng-click="$ctrl.addIcon()">{{:: ts('Choose Icon...') }}</a>
      </li>
    </ul>
  </div>
</div>
