<div class="tree-filing-scheme-side-panel">
  <div class="vitamui-sidepanel-header">
    <div class="d-flex justify-content-end">
      <button class="btn link cancel">
        <i class="vitamui-icon vitamui-icon-close" (click)="emitClose()"></i>
      </button>
    </div>

    <div class="justify-content-around">
      <div *ngIf="!loadingHolding && !filtered" class="tree-filing-scheme">
        <mat-tree [dataSource]="nestedDataSourceFull" [treeControl]="nestedTreeControlFull"
                  class="filing-holding-scheme-tree">

          <mat-tree-node *matTreeNodeDef="let node">
            <ng-container>
              <li class="mat-tree-node filing-holding-scheme-tree-node">
                <app-filing-holding-node disabled [node]="node" (nodeToggle)="nestedTreeControlFull.toggle(node)"
                                         (labelClick)="emitNode(node)"></app-filing-holding-node>
                 
                <span *ngIf="node?.count != null  && hasResults && node?.count > 0 " class="badge badge-secondary pad">{{node?.count | number : '1.0'}}</span>
                 
              </li>
            </ng-container>
          </mat-tree-node>

          <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
            <ng-container>
              <li>
                <div class="mat-tree-node filing-holding-scheme-tree-node">
                  <app-filing-holding-node [node]="node" [expanded]="nestedTreeControlFull.isExpanded(node)"
                                           (nodeToggle)="nestedTreeControlFull.toggle(node)"
                                           (labelClick)="emitNode(node)"></app-filing-holding-node>
                  
                  <span *ngIf="node?.count != null && hasResults  && node?.count > 0" class="badge badge-secondary pad">{{node?.count | number : '1.0'}}</span>
                  
                </div>
                <ul [class.filing-holding-scheme-tree-invisible]="!nestedTreeControlFull.isExpanded(node)">
                  <ng-container matTreeNodeOutlet></ng-container>
                </ul>
              </li>
            </ng-container>
          </mat-nested-tree-node>
        </mat-tree>
      </div>
      <div *ngIf="!loadingHolding && filtered" class="tree-filing-scheme">
        <mat-tree [dataSource]="nestedDataSourceFiltred" [treeControl]="nestedTreeControlFiltred"
                  class="filing-holding-scheme-tree">

          <mat-tree-node *matTreeNodeDef="let node">
            <ng-container>
              <li class="mat-tree-node filing-holding-scheme-tree-node">
                <app-filing-holding-node disabled [node]="node" (nodeToggle)="nestedTreeControlFiltred.toggle(node)"
                                         (labelClick)="emitNode(node)"></app-filing-holding-node>
                <span *ngIf="node?.count != null && hasResults"
                      class="badge badge-secondary pad">{{node?.count | number : '1.0'}}</span>
              </li>
            </ng-container>
          </mat-tree-node>

          <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
            <ng-container>
              <li>
                <div class="mat-tree-node filing-holding-scheme-tree-node">
                  <app-filing-holding-node [node]="node" [expanded]="nestedTreeControlFiltred.isExpanded(node)"
                                           (nodeToggle)="nestedTreeControlFiltred.toggle(node)"
                                           (labelClick)="emitNode(node)">
                  </app-filing-holding-node>
                  <span *ngIf="node?.count!= null  && hasResults"
                        class="badge badge-secondary pad">{{node?.count | number : '1.0'}}</span>
                </div>
                <ul [class.filing-holding-scheme-tree-invisible]="!nestedTreeControlFiltred.isExpanded(node)">
                  <ng-container matTreeNodeOutlet></ng-container>
                </ul>
              </li>
            </ng-container>
          </mat-nested-tree-node>
        </mat-tree>
      </div>
      <div class="area-show-tree " *ngIf="!loadingHolding && nestedDataSourceFull.data.length <= 0">
        {{'ARCHIVE_SEARCH.FILING_SHCEMA.NO_TREES_NO_PLANS_FOR_ACCESS_CONTRACT' | translate}}
      </div>
      <a *ngIf="filtered && !loadingHolding && nestedDataSourceFull.data.length > 0 && !linkOneToNotKeep "
         class="tree-show-link" (click)="showAllTreeNodes()"> {{'ARCHIVE_SEARCH.FILING_SHCEMA.SHOW_ENTIRE_TREE' |
        translate}}</a>      
    </div>

    <div class="" *ngIf="loadingHolding">
      <mat-spinner diameter="50" color="accent"></mat-spinner>
    </div>
  </div>
</div>