<af-gui-edit-options ng-if="editingOptions" class="af-gui-content-editing-area"></af-gui-edit-options>
<div ng-if="!editingOptions" class="af-gui-element af-gui-field" >
  <div class="af-gui-bar" title="{{:: getOriginalLabel() }}">
    <div class="form-inline">
      <span ng-if="$ctrl.node.defn.label === false">{{:: getOriginalLabel() }}</span>
      <div class="btn-group pull-right" af-gui-menu >
        <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-element-button" data-toggle="dropdown" title="{{:: ts('Configure') }}">
          <span><i class="crm-i fa-gear"></i></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" ng-if="menu.open" ng-include="'~/afGuiEditor/elements/afGuiField-menu.html'"></ul>
      </div>
    </div>
  </div>
  <label ng-style="{visibility: $ctrl.node.defn.label === false ? 'hidden' : 'visible'}" ng-class="{'af-gui-field-required': getProp('required')}" class="af-gui-node-title">
    <span crm-ui-editable ng-model="getSet('label')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().label">{{ getProp('label') }}</span>
  </label>
  <div class="af-gui-field-help" ng-if="propIsset('help_pre')">
    <span crm-ui-editable ng-model="getSet('help_pre')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().help_pre">{{ getProp('help_pre') }}</span>
  </div>
  <div class="af-gui-field-input af-gui-field-input-type-{{ getProp('input_type').toLowerCase() }}" ng-include="'~/afGuiEditor/inputType/' + getProp('input_type', 'Missing') + '.html'"></div>
  <div class="af-gui-field-help" ng-if="propIsset('help_post')">
    <span crm-ui-editable ng-model="getSet('help_post')" ng-model-options="{getterSetter: true}" default-value="$ctrl.getDefn().help_post">{{ getProp('help_post') }}</span>
  </div>
</div>
