<div class="close ">
    <button class="cerrar-b cursor-pointer" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>
<!--
    <div class="titulo-modal">
    </div>-->
<span class="center">Cambiar Contraseña</span>
<!-- --------------------------------------------------------------------------------- -->
<!-- form -->

<mat-dialog-content class="mat-typography space items-center">
    <form (ngSubmit)="enviarContra()" [formGroup]="form">

        <span class="input flex-row" style="font-size: 18px;">Cambio de contraseña para el registro con ID de Usuario:
            <mat-spinner *ngIf="isLoading" [diameter]="20">
            </mat-spinner>
            <strong *ngIf="!isLoading">
                {{ userID }}
            </strong>
        </span>

        <div class="mt-20 items-center flex-col">
            <mat-form-field class="input">
                <mat-label>Nueva Contraseña</mat-label>
                <input type="{{showPassword ? 'text' : 'password'}}" matInput maxlength="50" name="contrasena1"
                    formControlName="contrasena1" placeholder="Nueva Contraseña" style="padding-left: 0;">
                <mat-icon class="icon cursor-pointer" (click)="toggleVisibility()"
                    matSuffix>{{showPassword?'visibility_off':'visibility'}}</mat-icon>
                <mat-hint *ngIf="campoVacio('contrasena1')" class="is-invalid">El campo es obligatorio </mat-hint>
                <mat-hint *ngIf="campoVacio('contrasena1') && campoNoValido('contrasena1')" class="is-invalid"> |
                </mat-hint>
                <mat-hint *ngIf="campoNoValido('contrasena1')" class="is-invalid"> Contraseña no válida</mat-hint>
            </mat-form-field>

            <mat-form-field class="input">
                <mat-label>Repetir Contraseña</mat-label>
                <input type="{{showPassword ? 'text' : 'password'}}" matInput maxlength="50" name="contrasena2"
                    formControlName="contrasena2" placeholder="Repetir Contraseña" style="padding-left: 0;">
                <mat-icon class="icon cursor-pointer" (click)="toggleVisibility()"
                    matSuffix>{{showPassword?'visibility_off':'visibility'}}</mat-icon>
                <mat-hint *ngIf="campoVacio('contrasena2')" class="is-invalid">El campo es obligatorio </mat-hint>
                <mat-hint *ngIf="campoVacio('contrasena2') && contrasIguales()" class="is-invalid"> | </mat-hint>
                <mat-hint *ngIf="contrasIguales()" class="is-invalid"> Las contraseñas no coinciden</mat-hint>
            </mat-form-field>
        </div>

        <div class="align">
            <div class="align-items">
                <button type="button" class="yellow" (click)="enviarContra()">
                    Ingresar
                    <mat-icon class="icon" matSuffix>description</mat-icon>
                </button>
            </div>
            <div class="align-items">
                <button class="red" mat-dialog-close>
                    Cerrar
                    <mat-icon class="icon" matSuffix>cancel</mat-icon>
                </button>
            </div>
        </div>
    </form>

</mat-dialog-content>