<h1 mat-dialog-title class="prevent-select">Detalles del contador #{{ idCounter }}</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="section-divider">Información del contador</div>
    <p><b>SCADA relacionado: </b>{{ counter!.SCADA }}</p>
    <p><b>Equipamiento relacionado: </b>{{ counter!.TIPO_EQUIPAMIENTO }} - {{ counter!.MODELO_EQUIPAMIENTO }}</p>
    <p><b>Intervalo de lectura: </b>{{ counter!.INTERVALO }} {{ getTimeUnit(counter!.UNIDAD_INTERVALO) }}</p>
    <p><b>Tolerancia del intervalo de lectura: </b>{{ counter!.TOLERANCIA_INTERVALO }} {{ getTimeUnit(counter!.UNIDAD_TOLERANCIA_INTERVALO) }}</p>
    <p><b>Estado: </b>{{ counter!.ESTADO }}</p>
    <p><b>Usuario registró: </b>{{ counter!.USRREG }}</p>
    <p><b>Fecha de registro: </b>{{ orderDate(counter!.FECREG) }}</p>
    <p><b>Usuario modificó: </b>{{ counter!.USRMOD == null ? '-' : counter!.USRMOD }}</p>
    <p><b>Fecha de modificación: </b>{{ counter!.FECMOD == null ? '-' : orderDate(counter!.FECMOD) }}</p>
    <div class="section-divider" *ngIf="includesActivator">Información del activador</div>
    <p *ngIf="includesActivator">
      <b>Prioridad: </b><span style="font-weight: 500;" [style.color]="activator!.PRIORIDAD_OBJ!.color">
        {{ activator!.PRIORIDAD_OBJ!.label }}
      </span>
    </p>
    <p *ngIf="includesActivator"><b>Tipo de activador: </b>{{ activator!.TIPOACTIVADOR }}</p>
    <p class="m-0" *ngIf="includesActivator"><b>Condiciones de activación: </b></p>
    <ul class="m-0" *ngIf="includesActivator">
      <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" *ngIf="includesActivator"><b>Estado: </b>{{ activator!.ESTADO }}</p>
    <p *ngIf="includesActivator"><b>Usuario que registró: </b>{{ activator!.USRREG }}</p>
    <p *ngIf="includesActivator"><b>Fecha de registro: </b>{{ activator!.FECREG }}</p>
    <p *ngIf="includesActivator"><b>Usuario que modificó: </b>{{ activator!.USRMOD == null ? '-' : activator!.USRMOD }}</p>
    <p *ngIf="includesActivator"><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>
