<form class="" ng-if="!$ctrl.entity.loading">
  <div class="alert alert-warning" ng-if=":: $ctrl.editor.getFormType() === 'form'">
    {{:: ts('Note: Extra fields are submitted with the form, but not saved to the CiviCRM database.')}}
  </div>
  <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="&#x1f50d;" 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()" ui-sortable-update="buildPaletteLists" ng-model="blockList">
          <div ng-repeat="block in blockList">
            <div class="af-gui-palette-item">{{:: blockTitles[$index] }}</div>
          </div>
        </div>
      </div>
      <div ng-if="fieldList.length">
        <label>{{ ts('Extra Fields') }}</label>
        <div ui-sortable="$ctrl.editor.getSortableOptions()" ui-sortable-update="buildPaletteLists" ng-model="fieldList">
          <div ng-repeat="field in fieldList">
            <div class="af-gui-palette-item">{{:: fieldTitles[$index] }}</div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</form>

