<div bsModal #createModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createModal"
     aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <form #userCreateForm="ngForm" role="form" novalidate class="form-validation" *ngIf="active" (submit)="save()">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span>{{"CreateNewUser" | localize}}</span>
                    </h5>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                  <tabset class="tab-container tabbable-line">
                    <tab heading="{{'UserInformation' | localize}}" customClass="m-tabs__item">         
                         
                        <div class="form-group">
                            <label for="Name">{{"Name" | localize}} *</label>
                            <input id="Name" #nameInput="ngModel" class="form-control" type="text" name="Name" [(ngModel)]="user.name" required maxlength="32">
                            <validation-messages [formCtrl]="nameInput"></validation-messages>
                        </div>

                        <div class="form-group">
                            <label for="Surname">{{"Surname" | localize}} *</label>
                            <input id="Surname" #surnameInput="ngModel" type="text" name="Surname" class="form-control" [(ngModel)]="user.surname" required maxlength="32">
                            <validation-messages [formCtrl]="surnameInput"></validation-messages>
                        </div>
                     
                        <div class="form-group">
                            <label for="EmailAddress">{{"EmailAddress" | localize}} *</label>
                            <input id="EmailAddress" #emailAddressInput="ngModel" type="email" name="EmailAddress" class="form-control" [(ngModel)]="user.emailAddress" required maxlength="256" email />
                            <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
                        </div>

                        <div class="form-group">
                            <label for="PhoneNumber">{{"PhoneNumber" | localize}}</label>
                            <input id="PhoneNumber" type="text" name="PhoneNumber" class="form-control" [(ngModel)]="user.phoneNumber" maxlength="24">
                        </div>

                        <div class="form-group">
                            <label for="UserName">{{"UserName" | localize}} *</label>
                            <input id="UserName" #userNameInput="ngModel" type="text" [disabled]="!canChangeUserName" name="UserName" class="form-control" [(ngModel)]="user.userName" required maxlength="32">
                            <span class="help-block" *ngIf="!canChangeUserName">{{"CanNotChangeAdminUserName" | localize}}</span>
                            <validation-messages [formCtrl]="userNameInput"></validation-messages>
                        </div>
                        
                        <div class="form-group" *ngIf="!setRandomPassword">
                            <div class="right">
                                <label for="Password">{{"Password" | localize}} *</label>
                                <input id="Password" type="password" name="Password" #Password="ngModel" id="Password" class="form-control" [(ngModel)]="user.password" [required]="!user.id && !setRandomPassword" maxlength="32"
                                       [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                                       [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                                       validateEqual="PasswordRepeat" reverse="true">
                            </div>
                        </div>
                        <div [hidden]="setRandomPassword || userCreateForm.form.valid || userCreateForm.form.pristine">
                            <ul class="help-block text-danger" *ngIf="userCreateForm.controls['Password'] && userCreateForm.controls['Password'].errors">
                                <li [hidden]="!userCreateForm.controls['Password'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['Password'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['Password'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['Password'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['Password'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                            </ul>
                        </div>
                       
                        <div class="form-group" *ngIf="!setRandomPassword">
                            <div class="right">
                                <label for="PasswordRepeat">{{"PasswordRepeat" | localize}} *</label>
                                <input id="PasswordRepeat" type="password" name="PasswordRepeat" #PasswordRepeat="ngModel" class="form-control" [(ngModel)]="user.passwordRepeat" [required]="!user.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 || userCreateForm.form.valid || userCreateForm.form.pristine">
                            <ul class="help-block text-danger" *ngIf="userCreateForm.controls['PasswordRepeat'] && userCreateForm.controls['PasswordRepeat'].errors">
                                <li [hidden]="!userCreateForm.controls['PasswordRepeat'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['PasswordRepeat'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['PasswordRepeat'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['PasswordRepeat'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                <li [hidden]="!userCreateForm.controls['PasswordRepeat'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                <li [hidden]="userCreateForm.controls['PasswordRepeat'].valid">{{"PasswordsDontMatch" | localize}}</li>
                            </ul>
                        </div>              
                    </tab>
                    <tab heading="{{'Roles' | localize}}" customClass="m-tabs__item">
                        <ng-template tabHeading>
                            <span class="badge badge-primary">{{getAssignedRoleCount()}}</span>
                        </ng-template>
                        <div class="m-checkbox-list">
                            <label attr.for="EditUser_{{role.roleName}}" class="m-checkbox" *ngFor="let role of roles">
                                <input id="EditUser_{{role.roleName}}" type="checkbox" name="{{role.roleName}}" [(ngModel)]="role.isAssigned">
                                {{role.roleDisplayName}}
                                <span></span>
                            </label>
                        </div>
                    </tab>
                    <tab heading="{{'AddressInformation' | localize}}" customClass="m-tabs__item">
                        <div class="form-group">
                            <label for="address1Input">{{"Address1" | localize}} *</label>
                            <input id="address1Input" style="border: 1px solid #a6a6a6;" #address1Input="ngModel" type="text" name="Address1" class="form-control"  [(ngModel)]="address.addressLine1" required>
                            <validation-messages [formCtrl]="address1Input"></validation-messages>
                        </div>
                        <div class="form-group">
                            <label for="address2Input">{{"Address2" | localize}} </label>
                            <input id="address2Input" style="border: 1px solid #a6a6a6;" #address2Input="ngModel" type="text" name="Address2" class="form-control"  [(ngModel)]="address.addressLine2" >
                            <validation-messages [formCtrl]="address2Input"></validation-messages>
                        </div>
                        <div class="form-group">
                            <label for="countryInput">{{"Country" | localize}} *</label>
                            <p-autoComplete [(ngModel)]="country"
                                            required
                                            id="CountrySelectInput"
                                            [suggestions]="filteredCountries"
                                            (completeMethod)="filterCountries($event)"
                                            field="name"
                                            placeholder="Enter Country"
                                            [minLength]="1"
                                            name="CountrySelectInput"
                                            styleClass="width-percent-100"
                                            [style]="{'width':'100%'}"
                                            [inputStyle]="{'width':'95%','height':'33px'}"
                                            [dropdown]="true">
                                            
                            </p-autoComplete>
                            <!-- <validation-messages [formCtrl]="CountrySelectInput"></validation-messages> -->
                        </div>
                          <div class="form-group">
                              <label for="postalInput">{{"PostalCode" | localize}} *</label>
                              <p-autoComplete [(ngModel)]="postal"
                                              required
                                              id="PostalselectInput"
                                              [suggestions]="filteredPostal"
                                              (completeMethod)="filterPostal($event)"
                                              field="name"
                                              placeholder="Enter Postal Code"
                                              [minLength]="1"
                                              name="PostalselectInput"
                                              styleClass="width-percent-100"
                                              [style]="{'width':'100%'}"
                                              [inputStyle]="{'width':'95%','height':'33px'}"
                                              [dropdown]="true">
                                              
                              </p-autoComplete>
                              <!-- <validation-messages [formCtrl]="PostalselectInput"></validation-messages> -->
                          </div>
                          <div class="form-group">
                              <label for="stateInput">{{"States" | localize}} *</label>
                              <p-autoComplete [(ngModel)]="state"
                                              required
                                              id="StateSelectInput"
                                              [suggestions]="filteredStates"
                                              (completeMethod)="filterStates($event)"
                                              field="name"
                                              placeholder="Enter State"
                                              [minLength]="1"
                                              name="StateSelectInput"
                                              styleClass="width-percent-100"
                                              [style]="{'width':'100%'}"
                                              [inputStyle]="{'width':'95%','height':'33px'}"
                                              [dropdown]="true">
                                              
                              </p-autoComplete>
                              <!-- <validation-messages [formCtrl]="StateSelectInput"></validation-messages> -->
                          </div>
                          <div class="form-group">
                              <label for="cityInput">{{"Cities" | localize}} *</label>
                              <p-autoComplete [(ngModel)]="city"
                                              required
                                              id="CitySelectInput"
                                              [suggestions]="filteredCities"
                                              (completeMethod)="filterCities($event)"
                                              field="name"
                                              placeholder="Enter City"
                                              [minLength]="1"
                                              name="CitySelectInput"
                                              styleClass="width-percent-100"
                                              [style]="{'width':'100%'}"
                                              [inputStyle]="{'width':'95%','height':'33px'}"
                                              [dropdown]="true">
                                              
                              </p-autoComplete>
                              <!-- <validation-messages [formCtrl]="CitySelectInput"></validation-messages> -->
                          </div>
                          <div class="form-group">
                            <label for="addressTypeInput">{{"AddressType" | localize}} *</label>
                            <p-autoComplete [(ngModel)]="addressType"
                                            required
                                            id="AddressTypeSelectInput"
                                            [suggestions]="filteredAddressType"
                                            (completeMethod)="filterAddressType($event)"
                                            field="name"
                                            placeholder="Enter AddressType"
                                            [minLength]="1"
                                            name="AddressTypeSelectInput"
                                            styleClass="width-percent-100"
                                            [style]="{'width':'100%'}"
                                            [inputStyle]="{'width':'95%','height':'33px'}"
                                            [dropdown]="true">
                                            
                            </p-autoComplete>
                            <!-- <validation-messages [formCtrl]="CitySelectInput"></validation-messages> -->
                        </div>
                    </tab>
                  </tabset>


                </div>
                <div class="modal-footer">
                    <button type="button" [disabled]="saving" class="btn btn-secondary" (click)="close()">{{"Cancel" | localize}}</button>
                    <button type="submit" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')" class="btn btn-primary btn-brand btn-pill" [disabled]="!userCreateForm.form.valid || saving"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
                </div>
            </form>
        </div>
    </div>
</div>
