<div af-gui-edit-options ng-if="editingOptions" class="af-gui-content-editing-area"></div>
<div ng-if="!editingOptions" class="af-gui-element af-gui-field" >
  <div class="af-gui-bar" title="{{ getEntity().label + ': ' + getDefn().label }}">
    <div class="form-inline pull-right">
      <div class="btn-group" 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/field-menu.html'"></ul>
      </div>
    </div>
  </div>
  <label ng-style="{visibility: node.defn.label === false ? 'hidden' : 'visible'}" ng-class="{'af-gui-field-required': getProp('required')}" class="af-gui-node-title">
    <span af-gui-editable ng-model="getSet('label')" ng-model-options="{getterSetter: true}" default-value="getDefn().label">{{ getProp('label') }}</span>
  </label>
  <div class="af-gui-field-help" ng-if="propIsset('help_pre')">
    <span af-gui-editable ng-model="getSet('help_pre')" ng-model-options="{getterSetter: true}" default-value="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') + '.html'"></div>
  <div class="af-gui-field-help" ng-if="propIsset('help_post')">
    <span af-gui-editable ng-model="getSet('help_post')" ng-model-options="{getterSetter: true}" default-value="getDefn().help_post">{{ getProp('help_post') }}</span>
  </div>
</div>
