<div class="module-container prevent-select animated fadeIn">
  <div id="navigation" class="mb-8 animated fadeIn" style="float: left; margin: 20px;">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" matRipple (click)="goBack(1)">
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </div>

  <div class="menu-title animated fadeIn">
    <span>Calendario de arborescencias</span>
  </div>

  <div class="arborescence-calendar-main-container">
    <div class="calendar-container">
      <mat-calendar [(selected)]="selected" (selectedChange)="updateArborescenceTree()"></mat-calendar>
    </div>
    <div class="arborescence-container">
      <mat-progress-bar mode="indeterminate" class="w-100 animated fadeIn" *ngIf="isLoading"></mat-progress-bar>
      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="!isLoading && !hasError" class="arborescence-tree">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
          {{ node.ELEMENTO }}
        </mat-tree-node>
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
          <div class="mat-tree-node">
            <button mat-icon-button matTreeNodeToggle>
              <mat-icon class="mat-icon-rtl-mirror">
                {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
              </mat-icon>
            </button>
            {{ node.ELEMENTO }}
          </div>
          <div [class.arborescence-tree-invisible]="!treeControl.isExpanded(node)" role="group">
            <ng-container matTreeNodeOutlet></ng-container>
          </div>
        </mat-nested-tree-node>
      </mat-tree>
    </div>
  </div>
</div>