<div>
  <h1 mat-dialog-title class="centre">Cambio de contraseña</h1>
  <div mat-dialog-content>
    <form [formGroup]="formGroup">
      <mat-form-field appearance="standard">
        <mat-label>Nombre Completo</mat-label>
        <input matInput formControlName="nombre" />
        <mat-icon matSuffix>tag</mat-icon>
      </mat-form-field>

      <mat-form-field appearance="legacy">
        <mat-label>Contraseña</mat-label>
        <input
          #input
          matInput
          pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
          [type]="hide1 ? 'password' : 'text'"
          formControlName="password1"
          autocomplete="on"
          minlength="8"
        />
        <button
          class="mat-form-field"
          mat-icon-button
          matSuffix
          (click)="hide1 = !hide1"
          [attr.aria-label]="'Hide password'"
          [attr.aria-pressed]="hide1"
        >
          <mat-icon>{{ hide1 ? "visibility_off" : "visibility" }}</mat-icon>
        </button>

        <mat-error *ngIf="password1!.invalid">
          {{
            password1!.hasError("minlength")
              ? "Mínimo 8 caracteres"
              : "Debe tener al menos una minúscula, mayúscula, un dígito y un caracter especial"
          }}
        </mat-error>
      </mat-form-field>

      <mat-form-field appearance="legacy">
        <mat-label>Repita Contraseña</mat-label>
        <input
          matInput
          pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
          [type]="hide2 ? 'password' : 'text'"
          formControlName="password2"
          autocomplete="on"
        />
        <button
          class="mat-form-field"
          mat-icon-button
          matSuffix
          (click)="hide2 = !hide2"
          [attr.aria-label]="'Hide password'"
          [attr.aria-pressed]="hide2"
        >
          <mat-icon>{{ hide2 ? "visibility_off" : "visibility" }}</mat-icon>
        </button>
        <mat-error *ngIf="password2!.invalid">
          {{
            password2!.hasError("minlength")
              ? "Mínimo 8 caracteres"
              : "Debe tener al menos una minúscula, mayúscula, un dígito y un caracter especial"
          }}
        </mat-error>
      </mat-form-field>
    </form>

    <div class="centre" style="margin-top: 10px">
      <a mat-raised-button class="mr-3" color="warn" mat-dialog-close>
        Cancelar
      </a>
      <a mat-raised-button class="mr-3 secondary" (click)="generatePassword()">
        Generar contraseña
      </a>
      <a
        mat-raised-button
        class="success"
        [mat-dialog-close]="password1?.value"
        [disabled]="
          password1?.invalid ||
          password2?.invalid ||
          password1?.value != password2?.value
        "
      >
        Confirmar
      </a>
    </div>
  </div>
</div>
