<mat-card
  class="card-small mat-elevation-z8 animated fadeIn fast centre"
  oncopy="return false"
  onpaste="return false"
>
  <form [formGroup]="formGroup" autocomplete="off">
    <mat-grid-list cols="12" rowHeight="90px">
      <mat-grid-tile colspan="12">
        <mat-card-title>Cambio de contraseña</mat-card-title>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-form-field appearance="legacy">
          <mat-label>Contraseña actual</mat-label>
          <input
            matInput
            autocomplete="off"
            [type]="hideContrasenaPrevia ? 'password' : 'text'"
            formControlName="prev_password"
            placeholder="Ingrese su contraseña actual"
            required
          />

          <mat-error *ngIf="prev_password!.invalid">
            {{
              prev_password!.hasError("required") ? "Ingrese este campo" : ""
            }}
          </mat-error>

          <button
            mat-icon-button
            matSuffix
            (click)="hideContrasenaPrevia = !hideContrasenaPrevia"
            [attr.aria-pressed]="hideContrasenaPrevia"
          >
            <mat-icon>{{
              hideContrasenaPrevia ? "visibility_off" : "visibility"
            }}</mat-icon>
          </button>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-form-field appearance="legacy">
          <mat-label>Nueva contraseña</mat-label>
          <input
            matInput
            autocomplete="off"
            pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
            [type]="hideNuevaContrasena ? 'password' : 'text'"
            formControlName="new_password"
            placeholder="Ingrese la nueva contraseña"
            required
            minlength="8"
          />

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

          <button
            mat-icon-button
            matSuffix
            (click)="hideNuevaContrasena = !hideNuevaContrasena"
            [attr.aria-pressed]="hideNuevaContrasena"
          >
            <mat-icon>{{
              hideNuevaContrasena ? "visibility_off" : "visibility"
            }}</mat-icon>
          </button>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-form-field appearance="legacy">
          <mat-label>Confirmar nueva contraseña</mat-label>
          <input
            matInput
            autocomplete="off"
            pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
            [type]="hideConfirmarContrasena ? 'password' : 'text'"
            formControlName="new_password_confirmation"
            placeholder="Confirme la nueva contraseña"
            required
            minlength="8"
          />

          <mat-error *ngIf="new_password_confirmation!.invalid">
            {{
              new_password_confirmation!.hasError("minlength")
                ? "Mínimo 8 caracteres"
                : "Las contraseñas no coinciden"
            }}
          </mat-error>

          <button
            mat-icon-button
            matSuffix
            (click)="hideConfirmarContrasena = !hideConfirmarContrasena"
            [attr.aria-pressed]="hideConfirmarContrasena"
          >
            <mat-icon>{{
              hideConfirmarContrasena ? "visibility_off" : "visibility"
            }}</mat-icon>
          </button>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <a
          mat-raised-button
          class="secondary mr-3"
          (click)="generatePassword()"
        >
          Generar contraseña
        </a>
        <button
          mat-raised-button
          class="success"
          (click)="openDialogForm(formGroup.value)"
          [disabled]="
            formGroup.invalid ||
            new_password?.value != new_password_confirmation?.value
          "
        >
          Confirmar
        </button>
      </mat-grid-tile>
    </mat-grid-list>
  </form>
</mat-card>
