<li>
  <div href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
    <label>{{:: ts('Type:') }}</label>
    <select class="form-control" ng-model="getSet('input_type')" ng-model-options="{getterSetter: true}" title="{{:: ts('Field type') }}">
      <option ng-repeat="type in $ctrl.inputTypes" value="{{ type.name }}">{{ type.label }}</option>
    </select>
  </div>
</li>
<li>
  <a href ng-click="toggleRequired(); $event.stopPropagation(); $event.target.blur();" title="{{:: ts('Require this field') }}">
    <i class="crm-i fa-{{ getProp('required') ? 'check-' : '' }}square-o"></i>
    {{:: ts('Required') }}
  </a>
</li>
<li>
  <a href ng-click="toggleDefaultValue(); $event.stopPropagation(); $event.target.blur();" title="{{:: ts('Pre-fill this field with a value') }}">
    <i class="crm-i fa-{{ $ctrl.hasDefaultValue ? 'check-' : '' }}square-o"></i>
    {{:: ts('Default value') }}
  </a>
</li>
<li ng-if="$ctrl.hasDefaultValue">
  <div ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown form-inline">
    <input class="form-control" af-gui-field-value="$ctrl.fieldDefn" ng-model="getSet('afform_default')" ng-model-options="{getterSetter: true}" >
  </div>
</li>
<li>
  <a href ng-click="toggleLabel(); $event.stopPropagation(); $event.target.blur();" title="{{:: ts('Show field label') }}">
    <i class="crm-i fa-{{ $ctrl.node.defn.label === false ? '' : 'check-' }}square-o"></i>
    {{:: ts('Label') }}
  </a>
</li>
<li>
  <a href ng-click="toggleHelp('pre'); $event.stopPropagation(); $event.target.blur();" title="{{:: ts('Show help text above this field') }}">
    <i class="crm-i fa-{{ propIsset('help_pre') ? 'check-' : '' }}square-o"></i>
    {{:: ts('Pre help text') }}
  </a>
</li>
<li>
  <a href ng-click="toggleHelp('post'); $event.stopPropagation(); $event.target.blur();" title="{{:: ts('Show help text below this field') }}">
    <i class="crm-i fa-{{ propIsset('help_post') ? 'check-' : '' }}square-o" ></i>
    {{:: ts('Post help text') }}
  </a>
</li>
<li role="separator" class="divider" ng-if="$ctrl.canBeRange() || $ctrl.canBeMultiple()"></li>
<li ng-if="$ctrl.canBeMultiple()" ng-click="$event.stopPropagation()">
  <a href ng-click="toggleMultiple()" title="{{:: ts('Search multiple values') }}">
    <i class="crm-i fa-{{ !$ctrl.node.defn.input_attrs.multiple ? '' : 'check-' }}square-o"></i>
    {{:: ts('Multi-Select') }}
  </a>
</li>
<li ng-if="$ctrl.canBeRange()" ng-click="$event.stopPropagation()">
  <a href ng-click="toggleSearchRange()" title="{{:: ts('Search between low & high values') }}">
    <i class="crm-i fa-{{ !$ctrl.node.defn.search_range ? '' : 'check-' }}square-o"></i>
    {{:: ts('Search by range') }}
  </a>
</li>
<li role="separator" class="divider" ng-if="hasOptions()"></li>
<li ng-if="hasOptions()" ng-click="$event.stopPropagation()">
  <a href ng-click="resetOptions()" title="{{:: ts('Reset the option list for this field') }}">
    <i class="crm-i fa-{{ $ctrl.node.defn.options ? '' : 'check-' }}circle-o"></i>
    {{:: ts('Default option list') }}
  </a>
</li>
<li ng-if="hasOptions()">
  <a href ng-click="editOptions()" title="{{:: ts('Customize the option list for this field') }}">
    <i class="crm-i fa-{{ !$ctrl.node.defn.options ? '' : 'check-' }}circle-o"></i>
    {{:: ts('Customize options') }}
  </a>
</li>
<li role="separator" class="divider"></li>
<li>
  <a href ng-click="$ctrl.deleteThis()" title="{{:: ts('Remove field from form') }}">
    <span class="text-danger"><i class="crm-i fa-trash"></i> {{:: ts('Remove field') }}</span>
  </a>
</li>
