<div *ngFor="let configurationGroup of changes">
  <material-chips>
    <material-checkbox
        class="result-checkbox"
        [checked]="configurationCheckboxes[configurationGroup].checked"
        [indeterminate]="configurationCheckboxes[configurationGroup].indeterminate"
        (change)="onConfigurationChange($event, configurationGroup)">
    </material-checkbox>
    <template
        ngFor
        let-configuration
        [ngForOf]="summaries(configurationGroup).keys">
      <material-chip
          tooltipTarget
          #chip="tooltipTarget"
          [removable]="false"
          displayNameRenderer>
        {{configuration}}
      </material-chip>
      <material-tooltip-card [for]="chip">
        <div *deferredContent>
              <span *ngFor="let singleConfiguration of summaries(configurationGroup)[configuration]">
                {{singleConfiguration}}<br>
              </span>
        </div>
      </material-tooltip-card>
    </template>
  </material-chips>
  <span *ngFor="let resultGroup of configurationGroup"
        style="margin-left: 16px">
    <material-checkbox
        no-ink
        [checked]="resultCheckboxes[resultGroup].checked"
        (change)="onResultChange($event, resultGroup, configurationGroup)"
        [indeterminate]="resultCheckboxes[resultGroup].indeterminate">
    </material-checkbox>
    <span [class]="resultGroup.first.resultStyle">
          {{resultGroup.first.changesText}}
    </span><br>
    <span class="nonbreaking" *ngFor="let change of resultGroup.take(resultLimit)"
          tooltipTarget
          #logs="tooltipTarget"
          style="cursor: pointer; margin-left: 16px; height: 16px">
      <material-checkbox
          no-ink
          [checked]="checked[change]"
          (checkedChange)="onChange($event, change, resultGroup, configurationGroup)">
      </material-checkbox>
      <span tooltipTarget #logs="tooltipTarget">{{change.name}}</span><br>
      <material-tooltip-card
          [for]="logs"
          [preferredPositions]="preferredTooltipPositions">
        <div *deferredContent>
          <h4>Logs</h4>
          <dart-log
              *ngFor="let configuration of change.configurations.configurations"
              [configuration]="configuration"
              [index]="range.end"
              [test]="change.name">
          </dart-log>
        </div>
      </material-tooltip-card>
    </span>
    <div
        *ngIf="resultGroup.length > resultLimit"
        (click)="resultLimit = resultGroup.length"
        style="cursor: pointer">
      &vellip; {{resultGroup.length - resultLimit}} more changed results
    </div>
  </span>
</div>