<ion-header class="theme_dark_bg" [ngClass]="lang=='ar' ? 'ar' : ''">
    <button class="nav_btn theme_color floatLeft" menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
        {{'changepass.Change Password'|translate}}
    </div>
    <div class="clear"></div>
</ion-header>
<ion-content padding class="themelogin_background" [ngClass]="lang=='ar' ? 'ar' : ''">
    <div class="login_wrapper">
        <ion-card>
            <ion-card-content>
                <form [formGroup]="pswdForm">
                    <ion-list>
                        <ion-item>
                            <ion-input type="password" placeholder="{{'changepass.Current password'|translate}}" formControlName="current"></ion-input>
                        </ion-item>
                        <div class="er_req" *ngIf="pswdForm.controls.current.invalid && (pswdForm.get('current').dirty || pswdForm.get('current').touched)">
                            {{'changepass.Minimum 6 characters'|translate}}
                        </div>
                        <ion-item>
                            <ion-input type="password" placeholder="{{'changepass.New password'|translate}}" formControlName="new"></ion-input>
                        </ion-item>
                        <div class="er_req" *ngIf="pswdForm.controls.new.invalid && (pswdForm.get('new').dirty || pswdForm.get('new').touched)">
                            {{'changepass.Minimum 6 characters'|translate}}
                        </div>
                        <ion-item>
                            <ion-input type="password" placeholder="{{'changepass.Confirm password'|translate}}" formControlName="confirm"></ion-input>
                        </ion-item>
                        <div class="er_req" *ngIf="pswdForm.controls.confirm.invalid && (pswdForm.get('confirm').dirty || pswdForm.get('confirm').touched)">
                            {{'changepass.Password mismatches'|translate}}
                        </div>
                        <button ion-button class="cab_sign_btn" (click)="change()">{{'changepass.Proceed'|translate}}</button>
                    </ion-list>
                </form>
            </ion-card-content>
        </ion-card>
    </div>
</ion-content>