<!--
  ~ 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
    fxFlex="100"
    fxLayout="column"
    class="designer-panel-content"
    *ngIf="assetModel"
>
    <div fxLayout="row" class="sp-tab-bg designer-panel-header">
        <div fxLayoutAlign="start center" class="designer-panel-title">
            <h4>Asset Browser</h4>
        </div>
        <div fxFlex fxLayoutAlign="end end"></div>
    </div>
    <div fxFlex="100" fxLayout="column">
        <div fxFlex fxLayout="column" class="designer-panel-config">
            <mat-tree
                [dataSource]="dataSource"
                [treeControl]="treeControl"
                class="sp-tree"
                #tree
            >
                <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                    <div
                        [ngClass]="
                            node.assetId === selectedAsset.assetId
                                ? 'asset-node selected-node'
                                : 'asset-node'
                        "
                        fxLayout="row"
                        fxFlex="100"
                        (click)="selectNode(node)"
                    >
                        <span fxLayoutAlign="end center">{{
                            node.assetName
                        }}</span>
                        <div fxLayoutAlign="end center" fxFlex *ngIf="editMode">
                            <button
                                mat-icon-button
                                (click)="addAsset(node)"
                                color="accent"
                            >
                                <i class="material-icons">add</i>
                            </button>
                            <button
                                mat-icon-button
                                (click)="deleteAsset(node)"
                                color="accent"
                            >
                                <i class="material-icons">delete</i>
                            </button>
                        </div>
                    </div>
                </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>
                        <div
                            [ngClass]="
                                node.assetId === selectedAsset.assetId
                                    ? 'asset-node selected-node'
                                    : 'asset-node'
                            "
                            fxLayout="row"
                            fxFlex="100"
                            (click)="selectNode(node)"
                        >
                            <span fxLayoutAlign="start center">{{
                                node.assetName
                            }}</span>
                            <div
                                fxLayoutAlign="end center"
                                fxFlex
                                *ngIf="editMode"
                            >
                                <button
                                    mat-icon-button
                                    (click)="addAsset(node)"
                                    color="accent"
                                >
                                    <i class="material-icons">add</i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div
                        [class.sp-tree-invisible]="
                            !treeControl.isExpanded(node)
                        "
                        role="group"
                    >
                        <ng-container matTreeNodeOutlet></ng-container>
                    </div>
                </mat-nested-tree-node>
            </mat-tree>
        </div>
    </div>
</div>
