<div class="overlay"></div>


<div class="flex align-items-center justify-content-center pt-7">
    <div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
        <div class="text-center mb-5">
            <img src="assets/images/home/logo_blue.png" alt="Image" height="50" class="mb-3">
            <div class="text-900 text-3xl font-medium mb-3">{{ 'CHANGEPASSWORD.TITLE' | translate }}</div>
        </div>

        <p-messages severity="warn" *ngIf="errorMessages && errorMessages.length > 0">
            <ng-template pTemplate>
                <div class="p-grid">
                    <div class="col-12" *ngFor="let message of errorMessages">
                        <span class="p-message-summary">{{message.name}}:</span>
                        <span class="p-message-detail">{{message.message}}</span>
                    </div>
                </div>

            </ng-template>
        </p-messages>

		<div class="field grid">
            <label for="oldpassword" class="block text-900 font-medium col-12 md:col-3"
            >{{ 'CHANGEPASSWORD.OLDPASSWORD' | translate }}*</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.oldpassword" id="oldpassword" type="password" 
                pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}" />
            </div>
        </div>

       
        <div class="field grid">
            <label for="password" class="block text-900 font-medium col-12 md:col-3"
            >{{ 'CHANGEPASSWORD.PASSWORD' | translate }}*</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.password" id="password" type="password" 
                pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}"/>
            </div>
        </div>

        <div class="field grid">
            <label for="repeatPassword" class="block text-900 font-medium col-12 md:col-3"
            >{{ 'CHANGEPASSWORD.REPEAT_PASSWORD' | translate }}*</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.passwordRepeat" id="repeatPassword" type="password" 
                pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}" />
            </div>
        </div>

       

        <div class="grid mt-4">
            <div class="col pb-0">
                <button
                        pButton
                        pRipple
                        class="w-full"
                        label="{{ 'CHANGEPASSWORD.ACTION' | translate }}"
                        icon="pi pi-user"
                        [loading]="loading"
                        (click)="update()">
                </button>
            </div>
        </div>
    </div>
</div>
