<cd-table [data]="data | filter:filters"
          (fetchData)="getConfigurationList($event)"
          [columns]="columns"
          selectionType="single"
          (updateSelection)="updateSelection($event)">
  <cd-table-actions class="table-actions"
                    [permission]="permission"
                    [selection]="selection"
                    [tableActions]="tableActions">
  </cd-table-actions>
  <div class="table-filters">
    <div class="form-group filter"
         *ngFor="let filter of filters">
      <label>{{ filter.label }}: </label>
      <select class="form-control input-sm"
              [(ngModel)]="filter.value"
              (ngModelChange)="updateFilter()">
        <option *ngFor="let opt of filter.options">{{ opt }}</option>
      </select>
    </div>
    <a class="fa-stack" 
       title="Reset filters" 
       (click)="resetFilter()">
      <i class="fa fa-filter fa-stack-2x"></i>
      <i class="fa fa-times fa-stack-1x" style="margin-left: 8px; margin-top: 5px;"></i>
    </a>
  </div>
  <cd-configuration-details cdTableDetail
                            [selection]="selection">
  </cd-configuration-details>
</cd-table>

<ng-template #confValTpl let-value="value">
  <span *ngIf="value">
    <span *ngFor="let conf of value; last as isLast">
      {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br/>
    </span>
  </span>
</ng-template>
