<fieldset class="crm-search-admin-display-header">
  <div class="form-inline crm-search-admin-flex-row">
    <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 crm-flex-1" ng-model="$ctrl.display.label" required placeholder="{{:: ts('Untitled') }}"/>
  </div>
  <div>
    <textarea class="form-control" placeholder="{{:: ts('Description (shown above)') }}" ng-model="$ctrl.display.settings.description"></textarea>
  </div>
</fieldset>

<details>
  <summary>{{:: ts('Style') }}</summary>
  <div class="form-inline">
    <label>{{:: ts('Table Style') }}</label>
    <div class="checkbox-inline form-control" ng-repeat="style in $ctrl.parent.tableClasses">
      <label>
        <input type="checkbox" ng-checked="$ctrl.includes($ctrl.display.settings.classes, style.name)" ng-click="$ctrl.parent.toggle($ctrl.display.settings.classes, style.name)">
        <span>{{:: style.label }}</span>
      </label>
    </div>
  </div>
</details>


<details>
  <summary>{{:: ts('Footer') }}</summary>
  <search-admin-pager-config display="$ctrl.display" no-limit="true"></search-admin-pager-config>
  <div class="form-inline">
    <div class="checkbox-inline form-control" title="{{:: ts('Shows grand totals or other statistics, configured per-column.') }}">
      <label>
        <input type="checkbox" ng-click="$ctrl.toggleTally()" ng-checked="!!$ctrl.display.settings.tally">
        <span>{{:: ts('Show Totals in Footer') }}</span>
      </label>
    </div>
  </div>
</details>

<fieldset class="crm-search-admin-edit-columns-wrapper">
  <legend>
    {{:: ts('Columns') }}
  </legend>
  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
  <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>
        {{:: $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 for="crm-search-admin-edit-col-{{:: $index }}">{{:: ts('Header') }}</label>
        <input id="crm-search-admin-edit-col-{{:: $index }}" class="form-control crm-flex-1" type="text" ng-model="col.label" >
      </div>
      <div class="form-inline" ng-if="col.type === 'field'">
        <label>
          <input type="checkbox" ng-click="$ctrl.toggleDefault(col)" ng-checked="$ctrl.hasDefault(col)" >
          {{:: ts('Default Value') }}
        </label>
        <crm-search-input ng-model="col.default" ng-if="$ctrl.hasDefault(col)" field="$ctrl.getField(col.key)"></crm-search-input>
      </div>
      <div class="form-inline" ng-if="col.type === 'field' && $ctrl.display.settings.tally">
        <label for="crm-search-admin-edit-col-footer-label-{{:: $index }}">{{:: ts('Footer') }}</label>
        <input class="form-control" id="crm-search-admin-edit-col-footer-label-{{:: $index }}" ng-model="col.tally.label" placeholder="{{:: ts('No label') }}" title="{{:: ts('Footer label') }}">
        <label for="crm-search-admin-edit-col-footer-agg-{{:: $index }}">{{:: ts('Aggregate') }}</label>
        <select id="crm-search-admin-edit-col-footer-agg-{{:: $index }}" class="form-control" ng-model="col.tally.fn" title="{{:: ts('Footer aggregate function') }}">
          <option value="">{{:: ts('None') }}</option>
          <option value="SUM">{{:: ts('Sum') }}</option>
          <option value="AVG">{{:: ts('Average') }}</option>
          <option value="COUNT">{{:: ts('Count') }}</option>
        </select>
      </div>
    </fieldset>
  </fieldset>
</fieldset>
