<div bsModal #modalCreate="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span></span>
                    </h4>
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="kt-portlet__body kt-portlet__body--fit">
                        <div class="kt-grid  kt-wizard-v2 kt-wizard-v2--white" id="kt_wizard_v4" data-ktwizard-state="first">
                                <div class="kt-grid__item kt-wizard-v2__aside">
                                    <!--begin: Form Wizard Nav -->
                                    <div class="kt-wizard-v2__nav">
                                        <div class="kt-wizard-v2__nav-items">
                                            <!--doc: Replace A tag with SPAN tag to disable the step link click -->
                                            <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="current">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon-user"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'AccountSettings' | localize}}
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            <!-- Setup Your Account Details -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            <!-- <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="pending">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon-settings"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'Roles' | localize}}
                                                        </div> 
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </a> -->
                                            <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="pending">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon2-map"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'SetupLocations' | localize}}
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            <!-- Choose Your Location Map -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                            <a class="kt-wizard-v2__nav-item" data-ktwizard-type="step" data-ktwizard-state="pending">
                                                <div class="kt-wizard-v2__nav-body">
                                                    <div class="kt-wizard-v2__nav-icon">
                                                        <i class="flaticon-clipboard"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            Summary
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            Review and Submit
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end: Form Wizard Nav -->
                    
                                </div>
                                <div class="kt-grid__item kt-grid__item--fluid kt-wizard-v2__wrapper">
                                    <!--begin: Form Wizard Form-->
                                    <form #contactCreateForm="ngForm" class="kt-form" id="kt_form3" (submit)="save()" autocomplete="false">
                                        <!--begin: Form Wizard Step 1-->
                                        <div class="kt-wizard-v2__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
                                            <div class="kt-heading kt-heading--md">{{"Account  Details" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">

                                                    <contactForm #contactForm></contactForm>

                                                    <div class="form-group">
                                                        <label for="UserName2">{{"UserName" | localize}} </label>
                                                        <input id="UserName2" #userNameInput="ngModel" type="text" [disabled]="!canChangeUserName" name="UserName" class="form-control" [(ngModel)]="user.userName" maxlength="32">
                                                        <span class="help-block" *ngIf="!canChangeUserName">{{"CanNotChangeAdminUserName" | localize}}</span>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group" *ngIf="!setRandomPassword">
                                                                <div class="right">
                                                                    <label for="Password2">{{"Password" | localize}} </label>
                                                                    <input id="Password2" type="password" name="Password" #Password2="ngModel" class="form-control" [(ngModel)]="user.password" [required]="!contact.id" maxlength="32"
                                                                            [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                                                                            [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                                                                            validateEqual="2" reverse="true">
                                                                </div>
                                                            </div>
                                                            <div [hidden]="setRandomPassword || contactCreateForm.form.valid || contactCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="contactCreateForm.controls['Password'] && contactCreateForm.controls['Password'].errors">
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['Password'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group" *ngIf="!setRandomPassword">
                                                                <div class="right">
                                                                    <label for="PasswordRepeat2">{{"PasswordRepeat" | localize}} </label>
                                                                    <input id="PasswordRepeat2" type="password" name="PasswordRepeat" #PasswordRepeat2="ngModel" class="form-control" [(ngModel)]="user.passwordRepeat" [required]="!contact.id && !setRandomPassword" maxlength="32"
                                                                            [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                                                                            [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                                                                            validateEqual="Password" reverse="false">
                                                                </div>
                                                            </div>
                                                            <div [hidden]="setRandomPassword || contactCreateForm.form.valid || contactCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="contactCreateForm.controls['PasswordRepeat'] && contactCreateForm.controls['PasswordRepeat'].errors">
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!contactCreateForm.controls['PasswordRepeat'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                                                    <li [hidden]="contactCreateForm.controls['PasswordRepeat'].valid">{{"PasswordsDontMatch" | localize}}</li>
                                                                </ul>
                                                            </div>  
                                                        </div>

                                                    </div> 
                                                    <div class="form-group">
                                                        <label for="Roles">{{"Roles" | localize}} </label>
                                                        <div class="kt-checkbox-list">
                                                            <label class="kt-checkbox" attr.for="{{role.roleName}}" *ngFor="let role of roles">
                                                                <input id="{{role.roleName}}" type="checkbox" name="{{role.roleName}}" [(ngModel)]="role.isAssigned">
                                                                {{role.roleDisplayName}}
                                                                <span></span>
                                                            </label>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 1-->

                                        <!--begin: Form Wizard Step 2-->
                                    <!--  <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                            <div class="kt-heading kt-heading--md">{{"Roles" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    <div class="form-group">
                                                        
                                                        <div class="kt-checkbox-list">
                                                            <label class="kt-checkbox" attr.for="{{role.roleName}}" *ngFor="let role of roles">
                                                                <input id="{{role.roleName}}" type="checkbox" name="{{role.roleName}}" [(ngModel)]="role.isAssigned">
                                                                {{role.roleDisplayName}}
                                                                <span></span>
                                                            </label>
                                                        </div>




                                                    
                                                        
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                        <!--end: Form Wizard Step 2-->
                    
                                        <!--begin: Form Wizard Step 3-->
                                        <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                            <div class="kt-heading kt-heading--md">{{"AddressInformation" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    
                                                    <addressForm #addressForm></addressForm>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 3-->
                                        <!-- begin: Form Wizard Step 4-->
                                        <div class="kt-wizard-v2__content" data-ktwizard-type="step-content">
                                                <div class="kt-heading kt-heading--md">{{"Review_Your_Details_Submit" | localize}}</div>
                                                <div class="kt-form__section kt-form__section--first">
                                                        <div class="kt-wizard-v2__review">
                                                            <div class="kt-wizard-v2__review-item">
                                                                <div class="kt-wizard-v2__review-title">
                                                                    {{"AccountSettings" | localize}}
                                                                </div>
                                                                <div class="kt-wizard-v2__review-content">
                                                                {{ contactForm.fName +" "+contactForm.sName}}<br>
                                                                {{"PhoneNumber"  | localize}} : {{ contactForm.pNumber }}<br>
                                                                {{"EmailAddress" | localize}} : {{ contactForm.emailAddress }}<br>
                                                                
                                                                
                                                                <span *ngFor="let role of roles">
                                                                
                                                                    <span *ngIf="role.isAssigned == true">{{role.roleDisplayName}}, </span>
                                                                </span>
                                                                
                                                                </div>
                                                                
                                                            </div>
                                                            <div class="kt-wizard-v2__review-item">
                                                                <div class="kt-wizard-v2__review-title">
                                                                    {{"AddressInformation" | localize}}
                                                                </div>
                                                                <div class="kt-wizard-v2__review-content">
                                                                {{ address.addressLine1 }}<br>
                                                                {{ address.addressLine2 }}<br>
                                                                <span id="selectedCityContacts">{{ selectedCity }}</span><span> , </span>
                                                                <span id="selectedPostalCodeContacts">{{ selectedPostalCode }}</span><span> , </span>
                                                                <span id="selectedStateContacts">{{ selectedState }}</span><span> , </span>
                                                                <span id="selectedCountryContacts">{{ selectedCountry }}</span><br />
                                                                <span id="selectedAddressTypeContacts">{{ selectedAddressType }}</span>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                    
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 4-->
                                        <!--begin: Form Actions -->
                                        <div class="kt-form__actions">
                                            <button class="btn btn-secondary btn-md btn-pill" data-ktwizard-type="action-prev">
                                                Previous
                                            </button>
                                            <button class="btn btn-brand btn-md  btn-pill" data-ktwizard-type="action-submit" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot' | localize)">
                                                Submit
                                            </button>
                                            <button class="btn btn-brand btn-md btn-pill" data-ktwizard-type="action-next" id="#next">
                                                Next Step
                                            </button>
                                        </div>
                                        <!--end: Form Actions -->
                                    </form>
                                    <!--end: Form Wizard Form-->
                                </div>
                            </div>
                </div> 
                    
                </div>
                <div class="modal-footer">
                   
                </div>
        </div>
    </div>
</div>