<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
<fieldset>
  <div class="form-inline">
    <label for="crm-search-admin-display-style">{{:: ts('Style') }}</label>
    <select id="crm-search-admin-display-style" class="form-control" ng-model="$ctrl.display.settings.style" ng-change="$ctrl.display.settings.symbol = ''">
      <option value="ul">{{:: ts('Bullets') }}</option>
      <option value="ol">{{:: ts('Numbers') }}</option>
    </select>
    <label for="crm-search-admin-display-symbol">{{:: ts('Symbol') }}</label>
    <select id="crm-search-admin-display-symbol" class="form-control" ng-model="$ctrl.display.settings.symbol">
      <option ng-repeat="symbol in $ctrl.symbols[$ctrl.display.settings.style]" value="{{ symbol.char }}">
        {{ symbol.label }}
      </option>
    </select>
    <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
  </div>
  <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
  <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
</fieldset>
<fieldset class="crm-search-admin-edit-columns-wrapper">
  <legend>
    {{:: ts('Fields') }}
    <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group btn-group-xs"></div>
  </legend>
  <div 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> {{ $ctrl.parent.getColLabel(col) }}</legend>
      <div class="form-inline" title="{{:: ts('Should this item display on its own line or inline with other items?') }}">
        <label><input type="checkbox" ng-model="col.break"> {{:: ts('New Line') }}</label>
        <button type="button" class="btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
          <i class="crm-i fa-ban"></i>
        </button>
      </div>
      <div class="form-inline crm-search-admin-flex-row">
        <label>
          <input type="checkbox" ng-checked="col.label" ng-click="col.label = col.label ? null : $ctrl.parent.getColLabel(col)" >
          {{:: ts('Label') }}
        </label>
        <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
        <crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":label"></crm-search-admin-token-select>
      </div>
      <div class="form-inline" ng-if="col.label">
        <label style="visibility: hidden"><input type="checkbox" disabled></label><!--To indent by 1 checkbox-width-->
        <div class="checkbox">
          <label><input type="checkbox" ng-model="col.forceLabel"> {{:: ts('Show label even when field is blank') }}</label>
        </div>
      </div>
      <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
    </fieldset>
  </div>
</fieldset>
