<h1 mat-dialog-title class="prevent-select">Detalles del activador #{{ idActivator }}</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">
    <p><b>Prioridad: </b><span style="font-weight: 500;" [style.color]="activator!.PRIORIDAD_OBJ!.color">
      {{ activator!.PRIORIDAD_OBJ!.label }}
    </span></p>
    <p><b>Tipo de activador: </b>{{ activator!.TIPOACTIVADOR }}</p>
    <p><b>Contador relacionado: </b>Contador #{{ activator!.CONTADOR }}</p>
    <p class="m-0"><b>Condiciones de activación: </b></p>
    <ul class="m-0">
      <li *ngFor="let condition of activator!.CONDICIONES_ARR" [ngClass]="{ hidden: condition.value == undefined }">
        <b>{{ condition.key }}: </b>{{ condition.value }} <div *ngIf="condition.key == 'Color'" class="color-circle" [style.background]="condition.value"></div>
      </li>
    </ul>
    <p class="mt-12"><b>Estado: </b>{{ activator!.ESTADO }}</p>
    <p><b>Usuario que registró: </b>{{ activator!.USRREG }}</p>
    <p><b>Fecha de registro: </b>{{ activator!.FECREG }}</p>
    <p><b>Usuario que modificó: </b>{{ activator!.USRMOD == null ? '-' : activator!.USRMOD }}</p>
    <p><b>Fecha de modificación: </b>{{ activator!.FECMOD == null ? '-' : activator!.FECMOD }}</p>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>