<h1 mat-dialog-title class="prevent-select">Búsqueda gráfica de equipamientos</h1>
<div mat-dialog-content class="prevent-select">
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
      <button mat-icon-button disabled></button>
      <p [ngClass]="{ mb_8: node.level > 2, m_0: node.level <= 2 }">
        {{ node.item }}&nbsp;
        @if(node.level > 2){
          <span class="assign-button" (click)="assignEquipment(node.item)">Asignar</span>
        }
      </p>
    </mat-tree-node>
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle>
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      <p [ngClass]="{ mb_8: node.level > 2, m_0: node.level <= 2 }">
        {{ node.item }}&nbsp;
        @if(node.level > 2){
          <span class="assign-button" (click)="assignEquipment(node.item)">Asignar</span>
        }
      </p>
      @if(node.isLoading){
        <mat-progress-bar mode="indeterminate" class="example-tree-progress-bar"></mat-progress-bar>
      }
    </mat-tree-node>
  </mat-tree>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>