<div class="container navtop">

    <div class="row justify-content-center">

        <mat-card class="col-10 col-lg-7" style="border-radius:  30px;">
            <mat-progress-bar class="col-12" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
            <mat-card-content>

                <form [formGroup]="formGroup" (ngSubmit)="ResetPassword()">
                    <h1 class="row justify-content-center mt-2"><b>Réinitialiser votre mot de passe</b></h1>

                    <h3 class="text-center">Renseignez votre nouveau mot de passe ci-dessous.</h3>

                    <div class="row justify-content-center">
                        <mat-form-field class="col-10">
                            <input matInput placeholder="Nouveau mot de passe" type="password" formControlName="password" required>
                            <mat-error
                                *ngIf="!formGroup.controls['password'].valid || formGroup.controls['password'].touched">
                                {{ getErrorPassword() }}
                            </mat-error>
                        </mat-form-field>
                    </div>

                    <div class="row justify-content-center">
                        <mat-form-field class="col-10">
                            <input matInput placeholder="Confirmer votre mot de passe" type="password" formControlName="confirmPassword" required>
                            <mat-error
                            *ngIf="!formGroup.controls['password'].valid || formGroup.controls['password'].touched">
                            {{ getErrorConfirmPassword() }}
                        </mat-error>
                        </mat-form-field>
                    </div>

                    <div class="row justify-content-center my-3">
                        <button class="col-8 col-md-4 color-theme" mat-raised-button color="primary" type="submit">
                            Envoyer</button>
                    </div>

                </form>
            </mat-card-content>
        </mat-card>

    </div>

</div>