<fieldset>
  <div class="form-inline">
    <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 class="checkbox-inline form-control">
      <label><input type="checkbox" ng-model="$ctrl.display.settings.actions"> <span>{{:: ts('Enable Actions') }}</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('Columns') }}</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" />
        <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('Alignment:') }}</label>
        <select ng-model="col.alignment" class="form-control">
          <option value="">{{:: ts('Left') }}</option>
          <option value="text-center">{{:: ts('Center') }}</option>
          <option value="text-right">{{:: ts('Right') }}</option>
        </select>
      </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 Columns') }}</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>
