<h1 mat-dialog-title class="prevent-select">Editar contraseña del SCADA</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" *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="form-column" [formGroup]="scadaPasswordFormGroup">
      <div class="form-row">
        <div class="form-cell C12">
          <mat-form-field appearance="outline" class="w-100 mt-8">
            <mat-label>Contraseña actual</mat-label>
            <input matInput placeholder="Ingrese la contraseña actual del SCADA" [type]="showLastPassword ? 'text' : 'password'" 
            formControlName="lastPaswordControl" (paste)="avoidPaste()">
            <button mat-icon-button matSuffix (click)="showLastPassword = !showLastPassword">
              <mat-icon>{{ showLastPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
            </button>
            <mat-error *ngIf="scadaPasswordFormGroup.invalid">{{ getErrorMessage("lastPaswordControl") }}</mat-error>
          </mat-form-field>
        </div>
        <div class="form-cell C12">
          <mat-form-field appearance="outline" class="w-100 mt-8">
            <mat-label>Contraseña nueva</mat-label>
            <input matInput placeholder="Ingrese la nueva contraseña del SCADA" [type]="showNewPassword ? 'text' : 'password'" 
            formControlName="newPasswordControl" [errorStateMatcher]="generalMatcher!">
            <button mat-icon-button matSuffix (click)="showNewPassword = !showNewPassword">
              <mat-icon>{{ showNewPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
            </button>
            <mat-error *ngIf="scadaPasswordFormGroup.invalid">{{ getErrorMessage("newPasswordControl") }}</mat-error>
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close cdkFocusInitial>Cancelar</button>
  <button mat-button (click)="savePassword()" [disabled]="scadaPasswordFormGroup.invalid || samePasswords">Guardar cambios</button>
</div>