<!--<h1 mat-dialog-title>{{ title }}</h1>
<div mat-dialog-actions>
  <div class="content-container animated fadeIn 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" *ngIf="!isLoading && hasError">
      <mat-icon class="red_primary_font">error</mat-icon>
      <h2>{{ errorStr }}</h2>
    </div>
    <div class="day-events-row" *ngIf="!isLoading && !hasError">
      <div class="day-events">
        <div class="hour-cell" *ngFor="let label of hourLabels; let i = index">
          <div class="divider-container" *ngIf="i > 0">
            <div class="label gray_primary_font">{{ label }}</div>
            <div class="divider gray_primary_background"></div>
          </div>
          <div class="events-container">
            <div class="displayed-event" *ngFor="let event of getEvents(label)" (click)="updateSelectedEvent(event.IDORDEN)" matRipple 
            [ngClass]="{ execution: event.ESTADO == 'Ejecucion', finalized: event.ESTADO == 'Finalizado', canceled: event.ESTADO == 'Cancelacion', 
            pending: event.ESTADO == 'Activo' }">
              <p class="event-title">{{ event.TITULO }}</p>
              <p class="event-start"><span>Inicio:</span> {{ getStartHour(event.HORAINICIO) }}</p>
              <p class="event-duration"><span>Duración estimada:</span> {{ event.TIEMPOESTIMADO }} h</p>
            </div>
          </div>
        </div>
      </div>
      <div class="event-details animated fadeIn">
        <p *ngIf="selectedOrder == 0" class="m-0">Seleccione una orden de trabajo</p>
        <div class="event-displayed-title animated fadeIn" *ngIf="selectedOrder > 0">{{ getEventSelectedTitle() }}</div>
        <div class="event-displayed-info animated fadeIn" *ngIf="selectedOrder > 0">
          <mat-progress-bar mode="indeterminate" *ngIf="gettingWorkOrder" class="animated fadeIn"></mat-progress-bar>
          <div class="event-info-container" *ngIf="!gettingWorkOrder">
            <div>
              <p><span>Fecha de inicio:</span> {{ orderDate(selectedWorkOrder!.FECHAINICIO) }}</p>
            </div>
            <div>
              <p><span>Repeticiones:</span> {{ getRepeat(selectedWorkOrder!.REPETICION) }}</p>
            </div>
            <div>
              <p><span>Hora de inicio:</span> {{ getStartHour(selectedWorkOrder!.HORAINICIO) }}</p>
            </div>
            <div>
              <p><span>Tiempo estimado de ejecución:</span> {{ selectedWorkOrder!.TIEMPOESTIMADO }} h</p>
            </div>
            <div>
              <p><span>Detalles:</span> {{ selectedWorkOrder!.DETALLE }}</p>
            </div>
            <div>
              <p><span>Análisis:</span> {{ selectedWorkOrder!.ANALISIS }}</p>
            </div>
            <div>
              <p><span>Equipo:</span> {{ selectedWorkOrder!.CODIGOEQUIPO }} <a class="copy-operation pink_primary_font" (click)="openCopyDialog()">COPIAR OPERACIÓN</a></p>
            </div>
            <div>
              <p><span>Personal:</span><br>
                <span *ngFor="let item of getPersonal(selectedWorkOrder!.PERSONAL)">
                  <span style="margin-left: 8px;">Especialidad; {{ item.specialty }}</span><br>
                  <span style="margin-left: 8px;">Tipo: {{ item.type }}</span><br>
                  <span style="margin-left: 8px;">Personal:</span><br>
                  <span style="margin-left: 16px;" *ngFor="let pers of item.staff; let i = index">
                    <span>&bull; {{ pers }}</span><br *ngIf="i < item.staff.length - 1">
                  </span>
                </span>
              </p>
            </div>
            <div>
              <p><span>Clasificación:</span> {{ selectedWorkOrder!.CLASIFICACION }}</p>
            </div>
            <div>
              <p><span>Prioridad:</span> {{ getPriority(selectedWorkOrder!.PRIORIDAD) }}</p>
            </div>
            <div>
              <p><span>Documentación:</span>
                <span *ngIf="getDocumentation(selectedWorkOrder!.DOCUMENTACION).length == 0">Sin documentación</span>
                <span *ngIf="getDocumentation(selectedWorkOrder!.DOCUMENTACION).length > 0"></span>
              </p>
            </div>
            <div>
              <p><span>Estado:</span> {{ selectedWorkOrder!.ESTADO }}</p>
            </div>
            <div>
              <p><span>Usuario de última actualización:</span> {{ getUser(selectedWorkOrder!.USUARIOREGISTRA, selectedWorkOrder!.USUARIOMODIFICA) }}</p>
            </div>
            <div>
              <p><span>Fecha de última actualización:</span> {{ getDate(selectedWorkOrder!.FECHAREGISTRO, selectedWorkOrder!.FECHAMODIFICACION) }}</p>
            </div>
          </div>
        </div>
        <div class="event-displayed-actions animated fadeIn" *ngIf="selectedOrder > 0">
          <button mat-flat-button class="white_font indigo_primary_background ml-8 mb-8" (click)="executeOrder()" [disabled]="!actionsEnabled">
            Ejecutar orden
          </button>
          <button mat-flat-button class="white_font blue_primary_background mb-8" (click)="editOrder()">
            Editar orden
          </button>
          <button mat-flat-button class="white_font red_primary_background ml-8" (click)="deleteOrder()">
            Eliminar orden
          </button>
          <button mat-flat-button class="white_font orange_primary_background" (click)="cancelOrder()" [disabled]="!actionsEnabled">
            Cancelar ejecución
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button mat-dialog-close="new">Añadir orden de trabajo</button>
</mat-dialog-actions>-->