<div class="items-container animated fadeIn prevent-select" (window:resize)="onResize()">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Activación de órdenes en base a los contadores</div>
    </div>
  </div>
	<mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
    <mat-card-title style="text-align: center; margin: 15px 0;">Editar activador de la orden #{{ idOrder }}</mat-card-title>
		<mat-card-content>
      <div class="form-order-container" *ngIf="isLoading">
        <div class="is-loading animated fadeIn fast">
          <mat-spinner align="center"></mat-spinner>
          <h3>Cargando datos ...</h3>
        </div>
      </div>

      <div class="form-order-container" *ngIf="!isLoading && hasError">
        <div class="has-error animated fadeIn fast">
          <mat-icon class="red_primary_font mb-40" >error</mat-icon>
          <h3>{{ errorStr }}</h3>
        </div>
      </div>

			<div class="form-order-container" *ngIf="!isLoading && !hasError">
				<div class="order-activator-main-container">
					<div class="order-info-container">
						<div class="order-info-row">
							<div class="order-info-item order-info-bottom-border w-100">
								<span style="font-weight: 500;" class="mr-4">Equipamiento: </span>{{ preventiveOrder!.EQUIPAMIENTO }}
							</div>
						</div>
						<div class="order-info-row">
							<div class="order-info-item order-info-bottom-border w-100">
								<span style="font-weight: 500;" class="mr-4">Descripción:</span>{{ preventiveOrder!.DESCRIPCION }}
							</div>
						</div>
						<div class="order-info-row">
							<div class="order-info-item order-info-bottom-border w-100">
								<span style="font-weight: 500;">Instrucciones:</span><br>
								<span *ngFor="let item of getInstructions(preventiveOrder!.INSTRUCCIONES); let i = index" class="instruction-item w-100">
									{{ i + 1 }}.- {{ item }} <br *ngIf="i < getInstructions(preventiveOrder!.INSTRUCCIONES).length - 1">
								</span>
							</div>
						</div>
						<div class="order-info-row">
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_25: datesCols == 4, oii_50: datesCols == 2, oii_100: datesCols == 1, 
							order_info_right_border: datesCols > 1 }">
								<p class="item-label">
									<span style="font-weight: 500;" class="mr-4">Fecha inicial:</span>{{ getOrderStartDate(preventiveOrder!.FECHAINICIO) }}
								</p>
								<button mat-icon-button (click)="openCharacteristicDialog('date', preventiveOrder!.FECHAINICIO, 'start')">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_25: datesCols == 4, oii_50: datesCols == 2, oii_100: datesCols == 1, 
							order_info_right_border: datesCols > 2 }">
								<p class="item-label">
									<span style="font-weight: 500;" class="mr-4">Hora inicial:</span>{{ getOrderStartHour(preventiveOrder!.FECHAINICIO) }}
								</p>
								<button mat-icon-button (click)="openCharacteristicDialog('hour', preventiveOrder!.FECHAINICIO, 'start')">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_25: datesCols == 4, oii_50: datesCols == 2, oii_100: datesCols == 1, 
							order_info_right_border: datesCols > 1 }">
                <p class="item-label">
                  <span style="font-weight: 500;" class="mr-4">Fecha final:</span>{{ getOrderStartDate(preventiveOrder!.FECHAFINAL) }}
                </p>
								<button mat-icon-button (click)="openCharacteristicDialog('date', preventiveOrder!.FECHAFINAL, 'end')" *ngIf="canEditEndDate()">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_25: datesCols == 4, oii_50: datesCols == 2, oii_100: datesCols == 1 }">
                <p class="item-label">
                  <span style="font-weight: 500;" class="mr-4">Hora final:</span>{{ getOrderStartHour(preventiveOrder!.FECHAFINAL) }}
                </p>
								<button mat-icon-button (click)="openCharacteristicDialog('hour', preventiveOrder!.FECHAFINAL, 'end')" *ngIf="canEditEndDate()">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
						</div>
						<div class="order-info-row">
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_50: timesCols == 2, oii_100: timesCols == 1, 
							order_info_right_border: timesCols > 1 }">
								<span style="font-weight: 500;" class="mr-4">Tiempo de inmovilización estimado:</span>{{ preventiveOrder!.TIEINMEST }} h
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_50: timesCols == 2, oii_100: timesCols == 1 }">
								<span style="font-weight: 500;" class="mr-4">Tiempo total estimado:</span>{{ preventiveOrder!.TIETOTEST }} h
							</div>
						</div>
						<div class="order-info-row">
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_33: threeCols == 3, oii_100: threeCols < 3, order_info_right_border: threeCols == 3 }">
								<span style="font-weight: 500;" class="mr-4">Clasificación: </span>{{ preventiveOrder!.CLASIFICACION }}
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_33: threeCols == 3, oii_50: threeCols == 2, oii_100: threeCols == 1,
							order_info_right_border: threeCols > 1 }">
								<span style="font-weight: 500;" class="mr-4">Estado: </span>{{ getStateTxt(preventiveOrder!.ESTADO) }}
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_33: threeCols == 3, oii_50: threeCols == 2, oii_100: threeCols == 1 }">
								<p class="item-label">
									<span style="font-weight: 500;" class="mr-4">Activador:</span>#{{ preventiveOrder!.ACTIVADOR }}
								</p>
								<button mat-icon-button (click)="openCharacteristicDialog('activator', preventiveOrder!.ACTIVADOR, preventiveOrder!.TIPOACTIVADOR)">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
						</div>
						<div class="order-info-row">
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_33: threeCols == 3, oii_100: threeCols < 3, order_info_right_border: threeCols == 3 }">
								<p class="item-label">
									<span style="font-weight: 500;" class="mr-4">Tipo activador:</span>{{ preventiveOrder!.TIPOACTIVADOR }}
								</p>
								<button mat-icon-button (click)="openCharacteristicDialog('activatorType', preventiveOrder!.TIPOACTIVADOR, null)">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_33: threeCols == 3, oii_50: threeCols == 2, oii_100: threeCols == 1,
								order_info_right_border: threeCols > 1 }">
								<p class="item-label">
									<span style="font-weight: 500;" class="mr-4">Prioridad:</span>{{ getPriorityStr(preventiveOrder!.PRIORIDAD) }}
								</p>
								<button mat-icon-button (click)="openCharacteristicDialog('priority', preventiveOrder!.PRIORIDAD, null)">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
							<div class="order-info-item order-info-bottom-border" [ngClass]="{ oii_33: threeCols == 3, oii_50: threeCols == 2, oii_100: threeCols == 1 }">
								<p class="item-label-color">
									<span style="font-weight: 500;" class="mr-4">Color:</span>{{ activatorConfig.color }}
								</p>
								<div class="color-circle-perim ml-4"><div class="color-circle" [style.background]="activatorConfig.color"></div></div>
								<button mat-icon-button (click)="openCharacteristicDialog('color', activatorConfig.color, null)">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
						</div>
						<div class="order-info-row">
							<div class="order-info-item w-100">
								<p class="item-label-description">
									<span style="font-weight: 500;" class="mr-4">Configuración:</span>{{ getActivatorConfigStr() }}
								</p>
								<button mat-icon-button (click)="openCharacteristicDialog('config', activatorConfig, null)">
									<mat-icon>edit</mat-icon>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</mat-card-content>
		<mat-card-actions align="end">
			<button mat-button (click)="saveChanges()">Guardar cambios</button>
		</mat-card-actions>
	</mat-card>
</div>