<h1 mat-dialog-title class="prevent-select">Simulación de orden de mantenimiento preventivo</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="simulation-column animated fadeIn" *ngIf="!isLoading && !hasError">
    <div class="actions-row mb-16 mt-16">
      <button mat-flat-button color="primary" class="mr-8" (click)="startSimulation()" [disabled]="simulating">
        <mat-icon>play_arrow</mat-icon> Iniciar simulación
      </button>
      <a class="hidden" target="_blank" id="download"></a>
      <mat-slide-toggle [disabled]="simulating" [(ngModel)]="includeCharge">Incluir carga inducida</mat-slide-toggle>
    </div>
    <div class="simulation-loader-container animated fadeIn" *ngIf="starting">
      <h1>Iniciando simulación</h1>
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
    <div class="simulation-container animated fadeIn" *ngIf="!starting" #simulationContainer id="simulationContainer">
      <div class="simulation-row animated fadeIn" *ngFor="let step of steps; let i = index" [ngClass]="{ simulation_mb_8: i < steps.length - 1, 
      sub_step: !step.isMain }" [id]="'step-' + step.id">
        <div [ngClass]="{ simulation_main_icon: step.isMain, sub_step_icon: !step.isMain }">
          <mat-icon>{{ step.icon }}</mat-icon>
        </div>
        <div class="simulation-label ml-16">
          {{ step.label }}
        </div>
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button (click)="printPDF()" [disabled]="!hasBeenSimulated">Imprimir simulación</button>
</div>