<h1 mat-dialog-title class="prevent-select">Vista gráfica de la arborescencia</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog_details_column animated fadeIn" *ngIf="!isLoading && !hasError">
    <div class="arborescence-item-container" *ngFor="let item of arborescence; let i = index" [matTooltip]="item.label">
      <img src="assets/img/img-login.png" alt="level0" *ngIf="i == 0" class="line-image">
      <mat-icon [svgIcon]="item.graph.icon" *ngIf="i > 0 && i <= 2 && item.graph.customIcon == 'S'"></mat-icon>
      <mat-icon *ngIf="i > 0 && i <= 2 && item.graph.customIcon == 'N'">{{ item.graph.icon }}</mat-icon>
      <div class="arborescence-image-container" *ngIf="i > 2">
        <img [src]="item.graph" [alt]="'level' + i">
      </div>
      <div class="arborescence-separator" *ngIf="i < arborescence.length - 1"></div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close="print">Imprimir PDF</button>
  <button mat-button mat-dialog-close>Cerrar</button>
</div>