<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-inline">
  </div>
    <label for="crm-search-admin-display-limit">{{:: ts('Results to display (0 for no limit):') }}</label>
    <input id="crm-search-admin-display-limit" type="number" min="0" step="1" class="form-control" ng-model="$ctrl.display.settings.limit">
    <div class="checkbox-inline form-control">
      <label><input type="checkbox" ng-model="$ctrl.display.settings.pager"> <span>{{:: ts('Use Pager') }}</span></label>
    </div>
  </div>
</fieldset>
<div class="crm-flex-box crm-search-admin-edit-columns-wrapper">
  <fieldset class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.sortableOptions">
    <legend>{{:: ts('Fields') }}</legend>
    <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
      <legend>{{ $ctrl.getFieldLabel(col.expr) }}</legend>
      <div class="form-inline">
        <label>{{:: ts('Label:') }}</label> <input class="form-control" type="text" ng-model="col.label" >
        <div class="form-control checkbox-inline" ng-show="col.label.length" title="{{:: ts('Show label for every record even when this field is blank') }}">
          <label><input type="checkbox" ng-model="col.forceLabel"> <span>{{:: ts('Always show') }}</span></label>
        </div>
        <button class="btn-xs pull-right" ng-click="$ctrl.removeCol($index)" title="{{:: ts('Hide') }}">
          <i class="crm-i fa-ban"></i>
        </button>
      </div>
      <div class="form-inline">
        <label>{{:: ts('Prefix:') }}</label>
        <input class="form-control" ng-model="col.prefix" size="4">
        <label>{{:: ts('Suffix:') }}</label>
        <input class="form-control" ng-model="col.suffix" size="4">
        <div class="form-control checkbox-inline">
          <label><input type="checkbox" ng-model="col.break"> <span>{{:: ts('New line') }}</span></label>
        </div>
      </div>
      <div class="form-inline">
        <label>{{:: ts('Link:') }}</label>
        <crm-search-admin-link-select column="col" links="$ctrl.links"></crm-search-admin-link-select>
      </div>
      <div class="form-inline">
        <label>{{:: ts('Tooltip:') }}</label>
        <input class="form-control" type="text" ng-model="col.title" />
      </div>
    </fieldset>
  </fieldset>
  <fieldset class="crm-search-admin-edit-columns" ng-model="$ctrl.hiddenColumns" ui-sortable="$ctrl.sortableOptions">
    <legend>{{:: ts('Hidden Fields') }}</legend>
    <fieldset ng-repeat="col in $ctrl.hiddenColumns" class="crm-draggable">
      <legend>{{ $ctrl.getFieldLabel(col.expr) }}</legend>
      <div class="form-inline">
        <label>{{:: ts('Label:') }}</label> <input disabled class="form-control" type="text" ng-model="col.label" />
        <button class="btn-xs pull-right" ng-click="$ctrl.restoreCol($index)" title="{{:: ts('Show') }}">
          <i class="crm-i fa-undo"></i>
        </button>
      </div>
    </fieldset>
  </fieldset>
</div>
