<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<div *ngFor="let task of tasks" style="margin: 0 0 16px 0">
  <mat-checkbox [(ngModel)]="task.completed"
                [checked]="allComplete(task)"
                [indeterminate]="someComplete(task.subtasks)"
                (change)="setAllCompleted(task.subtasks, $event.checked)">
    {{task.name}}
  </mat-checkbox>
  <div>
    <div *ngFor="let subtask of task.subtasks" style="margin-left: 24px">
      <mat-checkbox [(ngModel)]="subtask.completed">
        {{subtask.name}}
      </mat-checkbox>
    </div>
  </div>
</div>
