<div>
  <div mat-dialog-title>Systems and talkgroups selection</div>
  <div [formGroup]="select" mat-dialog-content>
    <mat-checkbox color="primary" [disableRipple]="true" formControlName="all"
      [indeterminate]="indeterminate.everything">
      Everything
    </mat-checkbox>
    <h3 class="mat-caption">Groups</h3>
    <div class="flex-row wrap" formArrayName="groups">
      <ng-container *ngFor="let group of configGroups; let groupIndex = index">
        <div [formGroupName]="groupIndex">
          <mat-checkbox color="primary" [disableRipple]="true" formControlName="checked"
            [indeterminate]="indeterminate.groups[groupIndex]">
            {{ group.value.label }}
          </mat-checkbox>
        </div>
      </ng-container>
    </div>
    <h3 class="mat-caption">Tags</h3>
    <div class="flex-row wrap" formArrayName="tags">
      <ng-container *ngFor="let tag of configTags; let tagIndex = index">
        <div [formGroupName]="tagIndex">
          <mat-checkbox color="primary" [disableRipple]="true" formControlName="checked"
            [indeterminate]="indeterminate.tags[tagIndex]">
            {{ tag.value.label }}
          </mat-checkbox>
        </div>
      </ng-container>
    </div>
    <h3 class="mat-caption">Systems</h3>
    <div formArrayName="systems">
      <ng-container *ngFor="let system of configSystems; let systemIndex = index">
        <div [formGroupName]="systemIndex">
          <div class="flex-row margin">
            <mat-checkbox color="primary" [disableRipple]="true" formControlName="all"
              [indeterminate]="indeterminate.systems[systemIndex]">
              {{ system.value.label }}
            </mat-checkbox>
          </div>
          <div class="flex-row wrap indent margin" formArrayName="talkgroups">
            <ng-container *ngFor="let talkgroup of configTalkgroups[systemIndex]; let talkgroupIndex = index">
              <div [formGroupName]="talkgroupIndex">
                <mat-checkbox color="primary" [disableRipple]="true" formControlName="checked">
                  {{ talkgroup.value.label }}
                </mat-checkbox>
              </div>
            </ng-container>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
  <div mat-dialog-actions>
    <button mat-raised-button (click)="cancel()">Cancel</button>
    <button mat-raised-button color="primary" (click)="accept()">Ok</button>
  </div>
</div>