<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>{{"CreateNewDriver" | localize}}</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-grid  kt-wizard-v2 kt-wizard-v2--white" id="kt_wizard2" 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-layer"></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-confetti"></i>
                                                    </div>
                                                    <div class="kt-wizard-v2__nav-label">
                                                        <div class="kt-wizard-v2__nav-label-title">
                                                            {{'Summary' | localize}}
                                                        </div>
                                                        <div class="kt-wizard-v2__nav-label-desc">
                                                            {{'ReviewAndSubmit' | localize}}
                                                        </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 #driverCreateForm="ngForm" class="kt-form" id="kt_form2" (submit)="save()">
                                        <!--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">{{"Enter_Account_Details" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    <div class="form-group">
                                                        <label for="NameDriver">{{"FirstName" | localize}} *</label>
                                                        <input id="NameDriver" #nameInput="ngModel" class="form-control" type="text" name="Name" [(ngModel)]="driver.name" required maxlength="32">
                                                        <validation-messages [formCtrl]="nameInput"></validation-messages>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="SurnameDriver">{{"LastName" | localize}} *</label>
                                                        <input id="SurnameDriver" #surnameInput="ngModel" type="text" name="Surname" class="form-control" [(ngModel)]="driver.surname" required maxlength="32">
                                                        <validation-messages [formCtrl]="surnameInput"></validation-messages>
                                                    </div>        
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="PhoneNumberDriver">{{"PhoneNumber" | localize}}</label>
                                                                <input id="PhoneNumberDriver" type="text" name="PhoneNumber" class="form-control" [(ngModel)]="driver.phoneNumber" maxlength="24">
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-6">
                                                            <div class="form-group">
                                                                <label for="EmailAddressDriver">{{"EmailAddress" | localize}} *</label>
                                                                <input id="EmailAddressDriver" #emailAddressInput="ngModel" type="email" name="EmailAddress" class="form-control" [(ngModel)]="driver.emailAddress" required maxlength="256" email />
                                                                <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
                                                            </div>
                                                        </div>
                                                    </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)]="driver.userName" required maxlength="32">
                                                        <span class="help-block" *ngIf="!canChangeUserName">{{"CanNotChangeAdminUserName" | localize}}</span>
                                                        <validation-messages [formCtrl]="userNameInput"></validation-messages>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <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)]="driver.password" [required]="!driver.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 || driverCreateForm.form.valid || driverCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="driverCreateForm.controls['Password'] && driverCreateForm.controls['Password'].errors">
                                                                    <li [hidden]="!driverCreateForm.controls['Password'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.controls['Password'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.controls['Password'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.controls['Password'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.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="PasswordRepeat">{{"PasswordRepeat" | localize}} *</label>
                                                                    <input id="PasswordRepeat" type="password" name="PasswordRepeat" #PasswordRepeat="ngModel" class="form-control" [(ngModel)]="driver.passwordRepeat" [required]="!driver.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 || driverCreateForm.form.valid || driverCreateForm.form.pristine">
                                                                <ul class="help-block text-danger" *ngIf="driverCreateForm.controls['PasswordRepeat'] && driverCreateForm.controls['PasswordRepeat'].errors">
                                                                    <li [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                                                    <li [hidden]="!driverCreateForm.controls['PasswordRepeat'].errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                                                                    <li [hidden]="driverCreateForm.controls['PasswordRepeat'].valid">{{"PasswordsDontMatch" | localize}}</li>
                                                                </ul>
                                                            </div>  
                                                        </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">{{"AddressInformation" | localize}}</div>
                                            <div class="kt-form__section kt-form__section--first">
                                                <div class="kt-wizard-v2__form">
                                                    <div class="form-group">
                                                        <label for="Country">{{"Location" | localize}} *</label>
                                                        <br>
                                                        <select id = "locationSelectInput" multiple = "multiple" data-placeholder="Select Location" style="width:100%;" class="form-control kt-select2" name="locationSelectInput">
                                                            <option></option>
                                                            <option *ngFor="let location of filteredLocations" value= {{location.id}}>
                                                                {{location.name}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <input type="checkbox" id="addressCheckbox"/><label> Show Address Form? </label>
                                                    <br>
                                                    <div id="address">
                                                        <div class="form-group" >
                                                            <label for="address1Input">{{"AddressLine1" | localize}} *</label>
                                                            <input [required]="requiredState" id = "address1" style="border: 1px solid #a6a6a6;" #address1Input="ngModel" type="text" name="Address1" class="form-control"  [(ngModel)]="address.addressLine1">
                                                            <validation-messages [formCtrl] = "address1Input"></validation-messages>
                                                        </div>   
                                                            <div class="row">
                                                                    <div class="col-xl-6">
                                                                            <div class="form-group">
                                                                                <label for="PostalCode">{{"PostalCode" | localize}} *</label>
                                                                                <br>
                                                                                <select id = "postalSelectInput2" data-placeholder="Select Postal Code" style="width:100%;" class="form-control kt-select2" name="postalSelectInput2" tabindex="-1" aria-hidden="true">
                                                                                    <option value="" selected disabled>Select Postal Code</option>
                                                                                    <option *ngFor="let postal of filteredPostal" value= {{postal.id}}>
                                                                                        {{postal.value}}
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-xl-6">
                                                                        <div class="form-group" [ngClass]="(filteredChange) ? 'active' : 'inactive' ">
                                                                            <label for="countrySelectInput2">{{"Country" | localize}} *</label>
                                                                            <select class="kt-select2 form-control " style="width: 100%;" data-placeholder="Select Country" id="countrySelectInput2" name="countrySelectInput2" tabindex="-1" aria-hidden="true">
                                                                                <!-- {{id == '' ? '<option></option>' : ''}} -->
                                                                                <option  *ngFor="let country of filteredCountries" value="{{country.id}}" [selected]="country.id ===  defaultCountry">{{country.country}}</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-xl-6">
                                                                    <div class="form-group" [ngClass]="(filteredChange) ? 'active' : 'inactive' ">
                                                                        <label for="States">{{"State" | localize}} *</label>
                                                                        <br>
                                                                        <select id = "stateSelectInput2" data-placeholder="Select State" style="width:100%;" class="form-control kt-select2" name="stateSelectInput2" >
                                                                            <!-- <option></option> -->
                                                                            <option *ngFor="let state of filteredStates" value= {{state.id}}>
                                                                                {{state.state}}
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xl-6">
                                                                    <div class="form-group" [ngClass]="(filteredChange) ? 'active' : 'inactive' ">
                                                                        <label for="Cities">{{"City" | localize}} *</label>
                                                                        <br>
                                                                        <select id = "citySelectInput2" data-placeholder="Select City" class="form-control kt-select2" style="width:100%;" name="citySelectInput2"  >
                                                                            <!-- <option></option> -->
                                                                            <option *ngFor="let city of filteredCities" value= {{city.id}}>
                                                                                {{city.city}}
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="AddressType">{{"AddressType" | localize}}</label>
                                                                <br>
                                                                <select id = "addressTypeSelectInputDriver" data-placeholder="Select Address Type" style="width:100%;" class="form-control kt-select2" name="addressTypeSelectInput">
                                                                    <option value="null">None</option>
                                                                    <option *ngFor="let addressType of filteredAddressType" value= {{addressType.id}}>
                                                                        {{addressType.name}}
                                                                    </option>
                                                                </select>
                                                            </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">{{"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">
                                                        {{ driver.name +" "+driver.surname}}<br>
                                                        {{"PhoneNumber"  | localize}} : {{ driver.phoneNumber }}<br>
                                                        {{"EmailAddress" | localize}} : {{ driver.emailAddress }}                                                                                                                                                       
                                                        </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">
                                                        <span id="selectedLocation2">{{ selectedLocation }}</span><br>
                                                        {{ address.addressLine1 }}<br>
                                                        
                                                        <span id="selectedCity2">{{ selectedCity }}</span><span> , </span>
                                                        <span id="selectedPostalCode2">{{ selectedPostalCode }}</span><span> , </span>
                                                        <span id="selectedState2">{{ selectedState }}</span><span> , </span>
                                                        <span id="selectedCountry2">{{ selectedCountry }}</span><br />
                                                        <span id="selectedAddressType2">{{ selectedAddressType }}</span>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                                
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 3-->
                                    <!--begin: Form Actions -->
                                    <div class="kt-form__actions">
                                        <button class="btn btn-secondary btn-md btn-pill" data-ktwizard-type="action-prev">
                                            {{'Previous' | localize}}
                                        </button> 

                                        <button class="btn btn-brand btn-md  btn-pill" data-ktwizard-type="action-submit" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot' | localize)">
                                            {{'Submit' | localize}}
                                        </button>
                                        <button class="btn btn-brand btn-md btn-pill" data-ktwizard-type="action-next">
                                            {{'NextStep' | localize}}
                                        </button>
                                    </div>
                                    <!--end: Form Actions -->
                                </form>
                                <!--end: Form Wizard Form-->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                    
                        </div>
                
            </div>
        </div>
    </div>