<div class="af-gui-columns crm-flex-box" ng-if="!$ctrl.entity.loading">
  <fieldset class="af-gui-entity-values" ng-if="$ctrl.editor.getAfform().type !== 'block'">
    <legend>{{:: ts('Values:') }}</legend>
    <div class="form-inline" ng-if="getMeta().fields[fieldName]" ng-repeat="(fieldName, value) in $ctrl.entity.data">
      <label>{{ getMeta().fields[fieldName].label }}:</label><br />
      <input class="form-control" af-gui-field-value="getField($ctrl.getEntityType(), fieldName)" ng-model="$ctrl.entity.data[fieldName]" />
      <a href ng-click="removeValue($ctrl.entity, fieldName)">
        <i class="crm-i fa-times"></i>
      </a>
    </div>
    <hr />
    <div class="form-inline">
      <input class="form-control" on-crm-ui-select="$ctrl.addValue(selection)" crm-ui-select="{data: valuesFields, placeholder: ts('Add value')}" />
    </div>
  </fieldset>

  <fieldset class="af-gui-entity-palette">
    <legend class="form-inline">
      {{:: ts('Add:') }}
      <input ng-model="controls.fieldSearch" ng-change="$ctrl.buildPaletteLists()" class="form-control" type="search" placeholder="&#xf002" title="{{:: ts('Search fields') }}" />
    </legend>
    <div class="af-gui-entity-palette-select-list">
      <div ng-if="elementList.length">
        <label>{{:: ts('Elements') }}</label>
        <div ui-sortable="$ctrl.editor.getSortableOptions()" ui-sortable-update="buildPaletteLists" ng-model="elementList">
          <div ng-repeat="element in elementList" >
            <div class="af-gui-palette-item">{{:: elementTitles[$index] }}</div>
          </div>
        </div>
      </div>
      <div ng-if="blockList.length">
        <label>{{:: ts('Blocks') }}</label>
        <div ui-sortable="$ctrl.editor.getSortableOptions($ctrl.entity.name)" ui-sortable-update="buildPaletteLists" ng-model="blockList">
          <div ng-repeat="block in blockList" ng-class="{disabled: blockInUse(block)}">
            <div class="af-gui-palette-item">{{:: blockTitles[$index] }}</div>
          </div>
        </div>
      </div>
      <div ng-repeat="fieldGroup in fieldList">
        <div ng-if="fieldGroup.fields.length">
          <label>{{ fieldGroup.label }}</label>
          <div ui-sortable="$ctrl.editor.getSortableOptions(fieldGroup.entityName)" ui-sortable-update="buildPaletteLists" ng-model="fieldGroup.fields">
            <div ng-repeat="field in fieldGroup.fields" ng-class="{disabled: fieldInUse(field.name)}">
              <div class="af-gui-palette-item">{{:: getField(fieldGroup.entityType, field.name).label }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</div>

<a ng-if="!$ctrl.entity.loading && $ctrl.editor.allowEntityConfig" href ng-click="$ctrl.editor.removeEntity($ctrl.entity.name)" class="btn btn-sm btn-danger-outline af-gui-remove-entity" title="{{ ts('Remove %1', {1: getMeta().label}) }}">
  <i class="crm-i fa-trash"></i>
</a>

<fieldset ng-if="!$ctrl.entity.loading && $ctrl.editor.allowEntityConfig">
  <legend>{{:: ts('Options') }}</legend>
  <div ng-include="'~/afGuiEditor/entityConfig/Options.html'"></div>
</fieldset>

<fieldset ng-repeat="behavior in $ctrl.behaviors">
  <legend>{{:: behavior.title }}</legend>
  <div ng-include="behavior.template || '~/afGuiEditor/behaviors/afGuiDefaultBehaviorTemplate.html'"></div>
</fieldset>
