<h3><span translate>Conditional Formatting</span> <i class="fa fa-plus icon-as-button" title="{{ 'Add conditional format' | translate }}" ng-click="ngDialogData.conditionalFormat = arrayNewElement(ngDialogData.conditionalFormat)"></i></h3>


<div class="admin-view-details-object-explorer-views" ng-repeat="format in ngDialogData.conditionalFormat">
  <div class="admin-view-details-object-explorer-buttons">
    <i class="fa fa-trash icon-as-button" title="{{ 'Remove conditional format' | translate }}" ng-click="arrayRemoveElement(ngDialogData.conditionalFormat, format)"></i>
  </div>

  <label><span translate>Style to be applied if formatting matches: </span>
    <input type="text" ng-model="format.style" size="30" required>
  </label> <br>

  <label><span translate>Element type to be evaluated for this formatter: </span>
    <input type="text" ng-model="format.type" size="30" required>
  </label> <br>

  <h4 translate>Formatting Rules</h4>

  <table class="admin-view-details-table">
    <thead>
    <tr>
      <th translate>Column</th>
      <th translate>Rule</th>
      <th translate>Match</th>
      <th translate>Invert?</th>
      <th><i class="fa fa-plus icon-as-button" title="{{ 'Add formatting rule' | translate }}" ng-click="format.columnFilter = arrayNewElement(format.columnFilter)"></i></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="filter in format.columnFilter">
      <td>
        <input type="text" ng-model="filter.column" size="15" required>
      </td>
      <td>
        <select ng-model="filter.compare" required>
          <option value="equals" translate>equals</option>
          <option value="contains" translate>contains</option>
          <option value="geq">&gt;=</option>
          <option value="leq">&lt;=</option>
        </select>
      </td>
      <td>
        <input type="text" ng-model="filter.value" size="25" required>
      </td>
      <td>
        <input type="checkbox" ng-model="filter.invert"/>
      </td>
      <td>
        <i class="fa fa-trash icon-as-button" title="{{ 'Remove formatting rule' | translate }}" ng-click="arrayRemoveElement(format.columnFilter, filter)"></i>
        <i class="fa fa-chevron-up icon-as-button" title="{{ 'Increase formatting rule in priority' | translate }}" ng-click="arrayMoveElement(format.columnFilter, filter, -1)"></i>
        <i class="fa fa-chevron-down icon-as-button" title="{{ 'Decrease formatting rule in priority' | translate }}" ng-click="arrayMoveElement(format.columnFilter, filter, 1)"></i>
        <i class="fa fa-plus icon-as-button" title="{{ 'Add formatting rule' | translate }}" ng-click="arrayNewElement(format.columnFilter, filter)"></i>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<p>
  <button ng-click="closeThisDialog({save: true, conditionalFormat: ngDialogData.conditionalFormat})" translate>Save</button>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button ng-click="closeThisDialog({save: false})" translate>Cancel</button>
</p>
