<ion-content padding class="theme_background" *ngIf="log_status==1">
    <ion-card>
        <form [formGroup]="signupForm">
            <ion-list>
                <div class="logo_div">
                    <img src="assets/imgs/logo.png">
                </div>
                <ion-item>
                    <ion-input type="text" placeholder="{{'common.Username' | translate}}" formControlName="username"></ion-input>
                </ion-item>
                <div class="alert error" *ngIf="signupForm.controls.username.invalid && (signupForm.get('username').dirty || signupForm.get('username').touched)">
                    {{'common.Username_is_required' | translate}}
                </div>
                <ion-item>
                    <ion-input type="text" placeholder="{{'common.Email_ID' | translate}}" formControlName="email_id"></ion-input>
                </ion-item>
                <div class="alert error" *ngIf="signupForm.controls.email_id.invalid && (signupForm.get('email_id').dirty || signupForm.get('email_id').touched)">
                    {{'common.Enter_a_valid_Email' | translate}}
                </div>
                <ion-item>
                    <ion-input type="text" placeholder=" {{'common.Phone_No' | translate}}" formControlName="{{'common.Phone_No' | translate}}"></ion-input>
                </ion-item>
                <div class="alert error" *ngIf="signupForm.controls.phone_no.invalid && (signupForm.get('phone_no').dirty || signupForm.get('phone_no').touched)">
                    {{'common.Enter_a_valid_Phone_no' | translate}}
                </div>
                <ion-item>
                    <ion-input type="password" placeholder="{{'common.Password' | translate}}" formControlName="password"></ion-input>
                </ion-item>
                <div class="alert error" *ngIf="signupForm.controls.password.invalid && (signupForm.get('password').dirty || signupForm.get('password').touched)">
                    {{'common.Password_length_is_6_character' | translate}}
                </div>
                <ion-item>
                    <ion-input type="password" placeholder="{{'common.Confirm_Password' | translate}}" formControlName="confirm"></ion-input>
                </ion-item>
                <div class="alert error" *ngIf="signupForm.controls.confirm.invalid && (signupForm.get('confirm').dirty || signupForm.get('confirm').touched)">
                    {{'common.Password_Mismatch' | translate}}
                </div>
                <ion-item style="width:100% !important;">
                    <ion-label>
                        <p>{{'common.I_accept_terms_&_condition' | translate}}</p>
                    </ion-label>
                    <ion-checkbox formControlName="terms"></ion-checkbox>
                </ion-item>
                <div class="alert error" *ngIf="signupForm.controls.terms.invalid && (signupForm.get('terms').dirty || signupForm.get('terms').touched)">
                    {{'common.Please_accept_condition' | translate}}
                </div>
            </ion-list>
        </form>
        <button ion-button class="login_btn" (click)="register()" [disabled]="signupForm.invalid">{{'common.Sign_Up' | translate}}</button>
        <p (click)="signin()">{{'common.Already_had_an_account?' | translate}} <strong>{{'common.Sign_in' | translate}}</strong></p>
    </ion-card>

</ion-content>
<ion-content padding class="theme_background" *ngIf="log_status==0">
    <ion-card>
        <form [formGroup]="loginForm">
            <ion-list>
                <div class="logo_div">
                    <img src="assets/imgs/logo.png">
                </div>
                <ion-item>
                    <ion-input formControlName="username" type="text" placeholder="{{'common.User_Credential' | translate}}"></ion-input>

                </ion-item>
                <div class="alert error" *ngIf="loginForm.controls.username.invalid && (loginForm.get('username').dirty || loginForm.get('username').touched)">
                    {{'common.Invalid_Credential' | translate}}
                </div>
                <div class="clear"></div>

                <ion-item>
                    <ion-input formControlName="password" type="password" placeholder="{{'common.Password' | translate}}"></ion-input>
                </ion-item>
                <div class="alert error" *ngIf="loginForm.controls.password.invalid && (loginForm.get('password').dirty || loginForm.get('password').touched)">
                    {{'common.Minimum_6_characters_required' | translate}}
                </div>
                <div class="clear"></div>
            </ion-list>
        </form>
        <button ion-button class="login_btn" (click)="login()" [disabled]="loginForm.invalid">{{'common.Login' | translate}}</button>
        <br>
    <p (click)="signup()">{{'common.Are_you_new_to_VMig?' | translate}} <strong> {{'common.Click_here' | translate}}</strong></p>
    <p (click)="forgot()">{{'common.Forgot_Password?' | translate}}</p>
    </ion-card>
    
</ion-content>