<h1 mat-dialog-title class="prevent-select">{{ title }}</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="equipment-container" *ngFor="let equipment of equipments; let i = index" [ngClass]="{ bottom_divider: i < equipments.length - 1}">
      <div class="equipment-code">
        {{ equipment.TIPO }} - {{ equipment.MODELO }}. Kilómetro de origen: {{ equipment.KILOMETRO_ORIGEN }}. Kilómetro de destino: {{ equipment.KILOMETRO_DESTINO }}
      </div>
      <button mat-mini-fab color="primary" class="override_no_shadow ml-8" mstTooltip="Ver detalles" (click)="openEquipmentDetails(equipment.CODIGO)">
        <mat-icon>visibility</mat-icon>
      </button>
    </div>
    <div style="font-weight: 500; text-align: center;" *ngIf="equipments.length == 0">
      No se encontraron equipamientos relacionados.
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>