<div class="form-inline">
  <label for="crm-search-admin-display-label">{{:: ts('Label') }} <span class="crm-marker">*</span></label>
  <input id="crm-search-admin-display-label" type="text" class="form-control" ng-model="$ctrl.display.label" required placeholder="{{:: ts('Untitled') }}"/>
</div>
<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>

<fieldset class="crm-search-admin-edit-columns-wrapper">
  <legend>
    {{:: ts('Fields') }}
  </legend>
  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
  <p class="help-block">
    {{:: ts("The top-most line will be shown as the searchable title (combine multiple fields using rewrite + tokens).") }}
    {{:: ts("Other lines will be shown below in smaller text, and will not be searchable (except for ID which is always searchable).") }}
  </p>
  <fieldset class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
    <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
      <legend>
        <i class="crm-i fa-arrows crm-search-move-icon"></i>
        {{ $index ? ts('Description %1:', {1: $index}) : ts('Title:') }} {{ $ctrl.parent.getColLabel(col) }}
      </legend>
      <button type="button" class="btn btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
        <i class="crm-i fa-ban"></i>
      </button>
      <div class="form-inline crm-search-admin-flex-row">
        <label title="{{:: ts('Text to display if the field contents are empty.') }}">
          <input type="checkbox" ng-checked="col.empty_value" ng-click="$ctrl.parent.toggleEmptyVal(col)" >
          {{:: ts('Empty placeholder') }}
        </label>
        <textarea rows="2" class="form-control crm-flex-1" ng-if="col.empty_value" ng-model="col.empty_value" ng-model-options="{updateOn: 'blur'}"></textarea>
        <crm-search-admin-token-select ng-if="col.empty_value" model="col" field="empty_value" suffix=":label"></crm-search-admin-token-select>
      </div>
      <div class="form-inline crm-search-admin-flex-row">
        <label title="{{:: ts('Change the contents of this field, or combine multiple field values.') }}">
          <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >
          {{:: ts('Rewrite Text') }}
        </label>
        <textarea rows="2" class="form-control crm-flex-1" ng-if="col.rewrite" ng-model="col.rewrite" ng-model-options="{updateOn: 'blur'}"></textarea>
        <crm-search-admin-token-select ng-if="col.rewrite" model="col" field="rewrite" suffix=":label"></crm-search-admin-token-select>
      </div>
      <search-admin-icons item="col" ng-if="!$index"></search-admin-icons>
    </fieldset>
  </fieldset>
</fieldset>
