<ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
  <!-- This is the tree node template for show more node -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
                 class="example-tree-node show-more-node">
    <div class="btn-group">
      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
        <span class="fa fa-chevron-right"></span>
      </span>
      <div class="align-middle pt-2">
        <button *ngIf="!(dataSource.loading$ | async)" (click)="getNextPage(node)"
           class="btn btn-outline-primary btn-sm" role="button">
           <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
        </button>
        <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
      </div>
    </div>
    <div class="text-muted" cdkTreeNodePadding>
      <div class="d-flex">
      </div>
    </div>
  </cdk-tree-node>
  <!-- This is the tree node template for expandable nodes (coms and subcoms with children) -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                 class="example-tree-node expandable-node">
    <div class="btn-group">
      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
              [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
              (click)="toggleExpanded(node)"
              data-test="expand-button">
        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
              aria-hidden="true"></span>
        <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
      </button>
      <!--Don't render the button when non-expandable otherwise it's still accessible, instead render this placeholder-->
      <span *ngIf="!(hasChild(null, node) | async)" aria-hidden="true" class="btn btn-default invisible">
        <span class="fa fa-chevron-right"></span>
      </span>
      <div class="d-flex flex-row">
        <span class="align-middle pt-2 lead">
          <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
          <span class="pr-2">&nbsp;</span>
          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead">{{node.payload.archivedItemsCount}}</span>
        </span>
      </div>
    </div>
    <ds-truncatable [id]="node.id">
      <div class="text-muted" cdkTreeNodePadding>
        <div class="d-flex" *ngIf="node.payload.shortDescription">
          <span aria-hidden="true" class="btn btn-default invisible">
            <span class="fa fa-chevron-right"></span>
          </span>
          <ds-truncatable-part [id]="node.id" [minLines]="3">
            <span>{{node.payload.shortDescription}}</span>
          </ds-truncatable-part>
        </div>
      </div>
    </ds-truncatable>
    <div class="d-flex" *ngIf="node===loadingNode && dataSource.loading$ | async"
         cdkTreeNodePadding>
      <span aria-hidden="true" class="btn btn-default invisible">
        <span class="fa fa-chevron-right"></span>
      </span>
      <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
    </div>
  </cdk-tree-node>
  <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
                 class="example-tree-node childless-node">
    <div class="btn-group">
      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
        <span class="fa fa-chevron-right"></span>
      </span>
      <h6 class="align-middle pt-2">
        <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
      </h6>
    </div>
    <ds-truncatable [id]="node.id">
      <div class="text-muted" cdkTreeNodePadding>
        <div class="d-flex" *ngIf="node.payload.shortDescription">
          <span aria-hidden="true" class="btn btn-default invisible">
            <span class="fa fa-chevron-right"></span>
          </span>
          <ds-truncatable-part [id]="node.id" [minLines]="3">
            <span>{{node.payload.shortDescription}}</span>
          </ds-truncatable-part>
        </div>
      </div>
    </ds-truncatable>
  </cdk-tree-node>
</cdk-tree>
