<div class="animated fadeIn prevent-select" (window:resize)="onResize()" [ngClass]="{ items_container: screenSize > 640, 
items_container_full_width: screenSize <= 640 }">
  <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">Gestión de contadores</div>
    </div>
  </div>
  <mat-card style="width: 100%; height: 100%;" [ngClass]="{ override_elevation_z8: screenSize > 640, override_elevation_z0: screenSize <= 640 }">
    <mat-card-title style="text-align: center; margin: 15px 0;">{{ action }} contador</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 animated fadeIn" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="counterFormGroup">
          <div class="section-divider">Selección del equipamiento</div>
          <div class="form-row animated fadeIn" *ngFor="let level of counterFormGroup.controls['arborescenceControl'].controls; let i = index">
            <div class="form-cell" [ngClass]="{ C10: screenSize > 1380, C12: screenSize <= 1380 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Equipamiento {{ i + 1 }}</mat-label>
                <mat-select [formControlName]="'equipment' + i + 'Control'" (valueChange)="equipmentChange(i, equipment.value)" #equipment>
                  <mat-option *ngFor="let equipment of equipments.get(i)" [value]="equipment.CODIGO">
                    {{ equipment.TIPO }} - {{ equipment.MODELO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="form-cell center_horizontal" [ngClass]="{ C02: screenSize > 1380, C12: screenSize <= 1380 }">
              <mat-checkbox [formControl]="level" class="mb-20" 
              (change)="searchChildren(i)">Seleccionar hijo</mat-checkbox>
            </div>
          </div>
          <div class="form-row animated fadeIn" *ngIf="loadingChildren">
            <div class="form-cell C12">
              <mat-progress-bar mode="indeterminate" class="w-100"></mat-progress-bar>
            </div>
          </div>
          <div class="section-divider">Configuración de parámetros</div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ C03: screenSize > 1380, C06: screenSize <= 1380 && screenSize > 720, C12: screenSize <= 720 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Intervalo de lectura</mat-label>
                <input matInput formControlName="readIntervalControl" #readInterval 
                (input)="validateNumber(readInterval.value, 'readIntervalControl', 'input')" 
                (blur)="validateNumber(readInterval.value, 'readIntervalControl', 'blur')">
                <mat-icon matSuffix>schedule</mat-icon>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C03: screenSize > 1380, C06: screenSize <= 1380 && screenSize > 720, C12: screenSize <= 720  }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Unidad de tiempo</mat-label>
                <mat-select formControlName="readIntervalTimeUnitControl">
                  <mat-option value="seg">Segundos - s</mat-option>
                  <mat-option value="min">Minutos - min</mat-option>
                  <mat-option value="hor">Horas - h</mat-option>
                  <mat-option value="dia">Días - día</mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C03: screenSize > 1380, C06: screenSize <= 1380 && screenSize > 720, C12: screenSize <= 720  }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tolerancia del intervalo</mat-label>
                <input matInput formControlName="toleranceIntervalControl" #toleranceInterval 
                (input)="validateNumber(toleranceInterval.value, 'toleranceIntervalControl', 'input')" 
                (blur)="validateNumber(toleranceInterval.value, 'toleranceIntervalControl', 'blur')">
                <mat-icon matSuffix>pending</mat-icon>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C03: screenSize > 1380, C06: screenSize <= 1380 && screenSize > 720, C12: screenSize <= 720  }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Unidad de tiempo</mat-label>
                <mat-select formControlName="toleranceIntervalTimeUnitControl">
                  <mat-option value="seg">Segundos - s</mat-option>
                  <mat-option value="min">Minutos - min</mat-option>
                  <mat-option value="hor">Horas - h</mat-option>
                  <mat-option value="dia">Días - día</mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>
          <div class="section-divider">Selección de SCADA</div>
          <div class="form-row">
            <div class="form-cell C12">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>SCADA relacionado</mat-label>
                <input matInput formControlName="scadaControl" [matAutocomplete]="completeSCADA">
                <mat-autocomplete autoActiveFirstOption #completeSCADA>
                  <mat-option *ngFor="let scada of filteredSCADAs | async" [value]="scada">
                    {{ scada }}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button [disabled]="counterFormGroup.invalid" (click)="registerCounter()">
        {{ isNew ? 'Registrar' : 'Guardar cambios' }}
      </button>
    </mat-card-actions>
  </mat-card>
</div>