<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div [formGroup]="parentForm" id="formWrapper" fxFlex="100" fxLayout="column">
    <div>
        <button mat-button mat-raised-button color="accent" class="small-button"
                (click)="loadOptionsFromRestApi()"
                style="margin-right:10px;" [disabled]="!showOptions">
            <span>Reload</span>
        </button>
    </div>
    <div fxLayout="column" *ngIf="loading" class="mt-10">
        <mat-spinner color="accent"
                     [mode]="'indeterminate'"
                     [diameter]="20"></mat-spinner>
    </div>
    <div fxLayout="column" *ngIf="error" class="mt-10">
        <sp-exception-message [message]="errorMessage"></sp-exception-message>
    </div>
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="sp-tree">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
            <mat-checkbox color="accent"
                          [attr.data-cy]="node.nodeName"
                          [checked]="node.selected"
                          (change)="toggleNodeSelection(node)">{{node.nodeName}}
            </mat-checkbox>
        </mat-tree-node>
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
            <div class="mat-tree-node">
                <button mat-icon-button matTreeNodeToggle
                        [attr.data-cy]="'button-' +node.nodeName"
                        [attr.aria-label]="'Toggle ' + node.nodeName">
                    <mat-icon class="mat-icon-rtl-mirror">
                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                    </mat-icon>
                </button>
                <mat-checkbox color="accent"
                              [attr.data-cy]="node.nodeName"
                              [checked]="descendantsAllSelected(node)"
                              [indeterminate]="descendantsPartiallySelected(node)"
                              (change)="toggleAllNodeSelection(node)">{{node.nodeName}}
                </mat-checkbox>
            </div>
            <div [class.sp-tree-invisible]="!treeControl.isExpanded(node)"
                 role="group">
                <ng-container matTreeNodeOutlet></ng-container>
            </div>
        </mat-nested-tree-node>
    </mat-tree>
</div>
