@model RegisterModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_SingleColumn";
    //title
    pagebuilder.AddTitleParts(Loc["Title.Register"]);
}
@if (Model.CountryEnabled && Model.StateProvinceEnabled)
{
    <script asp-location="Footer" asp-order="300">
            function @Html.IdFor(model => model.CountryId)_select_element(e) {
                    var selectedItem = e.value;
                    var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
                    axios({
                        method: 'get',
                        url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                        params: { "countryId": selectedItem, "addSelectStateItem": "true" },
                    }).then(function (response) {
                        ddlStates.innerHTML = '';
                        response.data.forEach(function (id, option) {
                            elChild = document.createElement('option');
                            elChild.setAttribute('value', id.id);
                            elChild.innerHTML = id.name;
                            ddlStates.appendChild(elChild);
                        });
                        customer.StateProvinceId = response.data[0].id;
                    }).then(function () {
                        ddlStates.classList.remove('is-valid');
                        ddlStates.classList.add('is-invalid');
                    }).catch(function (error) {
                        alert(error);
                    });
            }
            function @Html.IdFor(model => model.StateProvinceId)_select_element(e) {
                var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
                if (e.selectedIndex > 0) {
                    ddlStates.classList.remove('is-invalid');
                    ddlStates.classList.add('is-valid');
                } else {
                    ddlStates.classList.remove('is-valid');
                    ddlStates.classList.add('is-invalid');
                }
            }
    </script>
}

<script asp-location="Footer">
        toggleNewsletterCat();

    function toggleNewsletterCat() {
        var element = document.getElementById('@Html.IdFor(model => model.Newsletter)');
        if (element) {
                if (element.checked) {
                    if (document.querySelector('.register-category-newsletter')) {
                        document.querySelector('.register-category-newsletter').style.display = "block";
                    }
                }
                else {
                    if (document.querySelector('.register-category-newsletter')) {
                        document.querySelector('.register-category-newsletter').style.display = "none";
                    }
                }
            }
        }
</script>

<validation-observer v-slot="{ handleSubmit }">
    <form asp-route="Register" asp-route-returnurl="@Context.Request.Query["ReturnUrl"]" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
        <div class="page registration-page">
            <div asp-validation-summary="All" class="message-error"></div>
            <div class="card my-3">
                <div class="card-header">
                    <h3 class="h5 mb-0">@Loc["Account.YourPersonalDetails"]</h3>
                </div>
                <div class="card-body">
                    @if (Model.GenderEnabled)
                    {
                        <div class="row">
                            <div class="col-lg-3 col-sm-12">
                                <span>@Loc["Account.Fields.Gender"]:</span>
                            </div>
                        </div>
                        <fieldset class="gender px-3">
                            <legend class="sr-only">@Loc["Account.Fields.Gender"]</legend>
                            <div class="d-flex row">
                                <label class="male custom-control custom-radio">
                                    <input id="gender-male" name="Gender" type="radio" value="M" checked="@(Model.Gender == "M")" class="custom-control-input">
                                    <span class="custom-control-label"></span>
                                    <span class="forcheckbox custom-control-description">@Loc["Account.Fields.Gender.Male"]</span>
                                </label>
                                <label class="female custom-control custom-radio ml-2">
                                    <input id="gender-female" name="Gender" type="radio" value="F" checked="@(Model.Gender == "F")" class="custom-control-input">
                                    <span class="custom-control-label"></span>
                                    <span class="forcheckbox custom-control-description">@Loc["Account.Fields.Gender.Female"]</span>
                                </label>
                            </div>
                        </fieldset>
                    }
                    <div class="form-row">
                        <fieldset class="col-sm-6 col-12 form-group">
                            <legend class="sr-only">@Loc["account.fields.firstname"]</legend>
                            @if (Model.FirstLastNameRequired)
                            {
                                <validation-provider tag="div" rules="required" name="FirstName" v-slot="{ errors, classes }">
                                    <label asp-for="FirstName" class="col-form-label">@Loc["Account.Fields.FirstName"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="FirstName" v-model="customer.FirstName" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="FirstName"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="FirstName" class="col-form-label">@Loc["Account.Fields.FirstName"]:</label>
                                <input asp-for="FirstName" class="form-control" />
                            }
                        </fieldset>
                        <fieldset class="col-sm-6 col-12 form-group">
                            <legend class="sr-only">@Loc["account.fields.lastname"]</legend>
                            @if (Model.FirstLastNameRequired)
                            {
                                <validation-provider tag="div" rules="required" name="LastName" v-slot="{ errors, classes }">
                                    <label asp-for="LastName" class="col-form-label">@Loc["Account.Fields.LastName"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="LastName" v-model="customer.LastName" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="LastName"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="LastName" class="col-form-label">@Loc["Account.Fields.LastName"]:</label>
                                <input asp-for="LastName" class="form-control" />
                            }
                        </fieldset>
                    </div>

                    @if (Model.DateOfBirthEnabled)
                    {
                        <fieldset class="form-group date-of-birth col-sm-12">
                            <legend class="sr-only">@Loc["Account.Fields.DateOfBirth"]</legend>
                            <div class="row">
                                <span class="col-form-label col-12 py-0 px-0">@Loc["Account.Fields.DateOfBirth"]:<span class="required">*</span></span>
                                <date-picker-dropdown control-day="@Html.IdFor(x => x.DateOfBirthDay)"
                                                      control-month="@Html.IdFor(x => x.DateOfBirthMonth)"
                                                      control-year="@Html.IdFor(x => x.DateOfBirthYear)"
                                                      begin-year="@(DateTime.Now.Year - 100)"
                                                      end-year="DateTime.Now.Year"
                                                      selected-day="Model.DateOfBirthDay.HasValue ? Model.DateOfBirthDay.Value : 0"
                                                      selected-month="Model.DateOfBirthMonth.HasValue ? Model.DateOfBirthMonth.Value : 0"
                                                      selected-year="Model.DateOfBirthYear.HasValue ? Model.DateOfBirthYear.Value : 0"
                                                      PartialViewName="Partials/DatePickerDropDowns"
                                                      class="col-12 input-group px-0" />
                            </div>
                            <div class="row">
                                <span asp-validation-for="DateOfBirthDay"></span>
                                <span asp-validation-for="DateOfBirthMonth"></span>
                                <span asp-validation-for="DateOfBirthYear"></span>
                            </div>
                        </fieldset>
                    }
                    <fieldset class="form-group mail">
                        <legend class="sr-only">@Loc["account.fields.email"]</legend>
                        <validation-provider tag="div" rules="required" name="Email" v-slot="{ errors, classes }">
                            <label asp-for="Email" class="col-form-label">@Loc["Account.Fields.Email"]:</label>
                            <span class="required">*</span>
                            <input asp-for="Email" v-model="customer.Email" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="Email"></span>
                        </validation-provider>
                    </fieldset>

                    @if (Model.UsernamesEnabled)
                    {
                        <div class="form-group row">
                            <div class="col-12">
                                <label asp-for="Username" class="col-form-label">@Loc["Account.Fields.Username"]:</label>
                                <span class="required">*</span>
                            </div>
                            <div class="col-12">
                                <validation-provider tag="div" rules="required" name="Username" v-slot="{ errors, classes }">
                                    <input asp-for="Username" v-model="customer.Username" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="Username"></span>
                                </validation-provider>
                                @if (Model.CheckUsernameAvailabilityEnabled)
                                {
                                    <partial name="Partials/CheckUsernameAvailability" />
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>

            @if (Model.CompanyEnabled)
            {
                <div class="card mb-3" no-footer>
                    <div class="card-header">
                        <h3 class="h5 mb-0">@Loc["Account.CompanyDetails"]</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            @if (Model.CompanyRequired)
                            {
                                <validation-provider tag="div" rules="required" name="Company" v-slot="{ errors, classes }">
                                    <label asp-for="Company" class="col-form-label">@Loc["Account.Fields.Company"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="Company" v-model="customer.Company" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="Company"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="Company" class="col-form-label">@Loc["Account.Fields.Company"]:</label>
                                <input asp-for="Company" class="form-control" />
                                <span asp-validation-for="Company"></span>
                            }
                        </div>
                    </div>
                </div>
            }
            @if (Model.DisplayVatNumber)
            {
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="form-group">
                            <label asp-for="VatNumber" class="col-form-label">@Loc["Account.Fields.VatNumber"]:</label>
                            <input asp-for="VatNumber" class="form-control" />
                            <span class="vat-note"><em>@Loc["Account.Fields.VatNumber.Note"]</em></span>
                            <span asp-validation-for="VatNumber"></span>
                        </div>
                    </div>
                </div>
            }
            @if (Model.StreetAddressEnabled ||
           Model.StreetAddress2Enabled ||
           Model.ZipPostalCodeEnabled ||
           Model.CityEnabled ||
           Model.CountryEnabled)
            {
                <div class="card mb-3">
                    <div class="card-header">
                        <h3 class="h5 mb-0">
                            @Loc["Account.YourAddress"]
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row form-fields d-flex">
                            @if (Model.StreetAddressEnabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.streetaddress"]</legend>
                                    @if (Model.StreetAddressRequired)
                                    {
                                        <validation-provider tag="div" rules="required" name="StreetAddress" v-slot="{ errors, classes }">
                                            <label asp-for="StreetAddress" class="col-form-label">@Loc["Account.Fields.StreetAddress"]:</label>
                                            <span class="required">*</span>
                                            <input asp-for="StreetAddress" v-model="customer.StreetAddress" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                            <span class="field-validation-error">{{ errors[0] }}</span>
                                            <span asp-validation-for="StreetAddress"></span>
                                        </validation-provider>
                                    }
                                    else
                                    {
                                        <label asp-for="StreetAddress" class="col-form-label">@Loc["Account.Fields.StreetAddress"]:</label>
                                        <input asp-for="StreetAddress" class="form-control" />
                                        <span asp-validation-for="StreetAddress"></span>
                                    }
                                </fieldset>
                            }
                            @if (Model.StreetAddress2Enabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.streetaddress2"]</legend>
                                    @if (Model.StreetAddress2Required)
                                    {
                                        <validation-provider tag="div" rules="required" name="StreetAddress2" v-slot="{ errors, classes }">
                                            <label asp-for="StreetAddress2" class="col-form-label">@Loc["Account.Fields.StreetAddress2"]:</label>
                                            <span class="required">*</span>
                                            <input asp-for="StreetAddress2" v-model="customer.StreetAddress2" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                            <span class="field-validation-error">{{ errors[0] }}</span>
                                            <span asp-validation-for="StreetAddress2"></span>
                                        </validation-provider>
                                    }
                                    else
                                    {
                                        <label asp-for="StreetAddress2" class="col-form-label">@Loc["Account.Fields.StreetAddress2"]:</label>
                                        <input asp-for="StreetAddress2" class="form-control" />
                                        <span asp-validation-for="StreetAddress2"></span>
                                    }
                                </fieldset>
                            }
                            @if (Model.ZipPostalCodeEnabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.zippostalcode"]</legend>
                                    @if (Model.ZipPostalCodeRequired)
                                    {
                                        <validation-provider tag="div" rules="required" name="ZipPostalCode" v-slot="{ errors, classes }">
                                            <label asp-for="ZipPostalCode" class="col-form-label">@Loc["Account.Fields.ZipPostalCode"]:</label>
                                            <span class="required">*</span>
                                            <input asp-for="ZipPostalCode" v-model="customer.ZipPostalCode" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                            <span class="field-validation-error">{{ errors[0] }}</span>
                                            <span asp-validation-for="ZipPostalCode"></span>
                                        </validation-provider>
                                    }
                                    else
                                    {
                                        <label asp-for="ZipPostalCode" class="col-form-label">@Loc["Account.Fields.ZipPostalCode"]:</label>
                                        <input asp-for="ZipPostalCode" class="form-control" />
                                        <span asp-validation-for="ZipPostalCode"></span>
                                    }
                                </fieldset>
                            }
                            @if (Model.CityEnabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.city"]</legend>
                                    @if (Model.CityRequired)
                                    {
                                        <validation-provider tag="div" rules="required" name="City" v-slot="{ errors, classes }">
                                            <label asp-for="City" class="col-form-label">@Loc["Account.Fields.City"]:</label>
                                            <span class="required">*</span>
                                            <input asp-for="City" v-model="customer.City" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                            <span class="field-validation-error">{{ errors[0] }}</span>
                                            <span asp-validation-for="City"></span>
                                        </validation-provider>
                                    }
                                    else
                                    {
                                        <label asp-for="City" class="col-form-label">@Loc["Account.Fields.City"]:</label>
                                        <input asp-for="City" class="form-control" />
                                        <span asp-validation-for="City"></span>
                                    }
                                </fieldset>
                            }
                            @if (Model.CountryEnabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.country"]</legend>
                                    @if (Model.CountryRequired)
                                    {
                                        <validation-provider tag="div" rules="required" name="CountryId" v-slot="{ errors, classes }">
                                            <label asp-for="CountryId" class="col-form-label">@Loc["Account.Fields.Country"]:</label>
                                            <span class="required">*</span>
                                            <select asp-for="CountryId" asp-items="Model.AvailableCountries"
                                                    onchange="@Html.IdFor(model => model.CountryId)_select_element(this)" v-bind:class="[classes , 'form-control custom-select']" v-model="customer.CountryId"></select>
                                            <span class="field-validation-error">{{ errors[0] }}</span>
                                            <span asp-validation-for="CountryId"></span>
                                        </validation-provider>
                                    }
                                    else
                                    {
                                        <label asp-for="CountryId" class="col-form-label">@Loc["Account.Fields.Country"]:</label>
                                        <select asp-for="CountryId" class="custom-select form-control" asp-items="Model.AvailableCountries"></select>
                                        <span asp-validation-for="CountryId"></span>
                                    }
                                </fieldset>
                            }
                            @if (Model.CountryEnabled && Model.StateProvinceEnabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.stateprovince"]</legend>
                                    <validation-provider tag="div" rules="required" name="StateProvinceId" v-slot="{ errors, classes }">
                                        <label asp-for="StateProvinceId" class="col-form-label">@Loc["Account.Fields.StateProvince"]:</label>
                                        <span class="required">*</span>
                                        <select asp-for="StateProvinceId" data-val-required="@Loc["Address.Fields.StateProvince.Required"]" v-bind:class="[classes , 'form-control custom-select']"
                                                onchange="@Html.IdFor(model => model.StateProvinceId)_select_element(this)" asp-items="Model.AvailableStates" v-model="customer.StateProvinceId"></select>
                                        <span class="field-validation-error">{{ errors[0] }}</span>
                                        <span asp-validation-for="StateProvinceId"></span>
                                        <span id="states-loading-progress" style="display: none;" class="please-wait">@Loc["Common.Wait..."]</span>
                                    </validation-provider>
                                </fieldset>
                            }
                        </div>
                    </div>
                </div>
            }

            @if (Model.PhoneEnabled || Model.FaxEnabled)
            {
                <div class="card mb-3">
                    <div class="card-header">
                        <h3 class="h5 mb-0">@Loc["Account.YourContactInformation"]</h3>
                    </div>
                    <div class="card-body">
                        <div class="row d-flex">
                            @if (Model.PhoneEnabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.phone"]</legend>
                                    @if (Model.PhoneRequired)
                                    {
                                        <validation-provider tag="div" rules="required" name="Phone" v-slot="{ errors, classes }">
                                            <label asp-for="Phone" class="col-form-label">@Loc["Account.Fields.Phone"]:</label>
                                            <span class="required">*</span>
                                            <input asp-for="Phone" v-model="customer.Phone" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                            <span class="field-validation-error">{{ errors[0] }}</span>
                                            <span asp-validation-for="Phone"></span>
                                        </validation-provider>
                                    }
                                    else
                                    {
                                        <label asp-for="Phone" class="col-form-label">@Loc["Account.Fields.Phone"]:</label>
                                        <input asp-for="Phone" class="form-control" />
                                        <span asp-validation-for="Phone"></span>
                                    }
                                </fieldset>
                            }
                            @if (Model.FaxEnabled)
                            {
                                <fieldset class="form-group col-12 col-sm-6">
                                    <legend class="sr-only">@Loc["account.fields.fax"]</legend>
                                    @if (Model.FaxRequired)
                                    {
                                        <validation-provider tag="div" rules="required" name="Fax" v-slot="{ errors, classes }">
                                            <label asp-for="Fax" class="col-form-label">@Loc["Account.Fields.Fax"]:</label>
                                            <span class="required">*</span>
                                            <input asp-for="Fax" v-model="customer.Fax" v-bind:class="[classes , 'form-control']" autofocus="autofocus" />
                                            <span class="field-validation-error">{{ errors[0] }}</span>
                                            <span asp-validation-for="Fax"></span>
                                        </validation-provider>
                                    }
                                    else
                                    {
                                        <label asp-for="Fax" class="col-form-label">@Loc["Account.Fields.Fax"]:</label>
                                        <input asp-for="Fax" class="form-control" />
                                        <span asp-validation-for="Fax"></span>
                                    }
                                </fieldset>
                            }
                        </div>
                    </div>
                </div>
            }

            @if (Model.NewsletterEnabled || Model.CustomerAttributes.Any())
            {
                <div class="card mb-3">
                    <div class="card-header">
                        <h3 class="h5 mb-0">@Loc["Account.Options"]</h3>
                    </div>
                    <div class="card-body">
                        @if (Model.NewsletterEnabled)
                        {
                            <div class="form-group">
                                <label for="Newsletter" class="ml-1 custom-control custom-checkbox">
                                    <input class="custom-control-input" asp-for="Newsletter" onchange="toggleNewsletterCat()" />
                                    <span class="custom-control-label">@Loc["account.fields.newsletter"]</span>
                                    <span class="sr-only">@Loc["account.fields.newsletter"]</span>
                                </label>
                                <span asp-validation-for="Newsletter"></span>
                            </div>
                            <partial name="Partials/NewsLetterCategories" model="Model.NewsletterCategories" />
                        }
                        @if (Model.CustomerAttributes.Any())
                        {
                            <partial name="Partials/CustomerAttributes" model="Model.CustomerAttributes" />
                        }
                    </div>
                </div>
            }
            <div class="card mb-3">
                <div class="card-header">
                    <h3 class="h5 mb-0">@Loc["Account.YourPassword"]</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <validation-provider tag="div" vid="customer.Password" rules="required" v-slot="{ errors, classes }">
                            <label asp-for="Password" class="col-form-label">@Loc["Account.Fields.Password"]:</label>
                            <input asp-for="Password" v-model="customer.Password" v-bind:class="[classes , 'form-control']" autocomplete="off" />
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="Password"></span>
                        </validation-provider>
                    </div>
                    <div class="form-group">
                        <validation-provider tag="div" vid="customer.ConfirmPassword" rules="required|confirmed:@@customer.Password" v-slot="{ errors, classes }">
                            <label asp-for="ConfirmPassword" class="col-form-label">@Loc["Account.Fields.ConfirmPassword"]:</label>
                            <input asp-for="ConfirmPassword" v-model="customer.ConfirmPassword" v-bind:class="[classes , 'form-control']" autocomplete="off" />
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="ConfirmPassword"></span>
                        </validation-provider>
                    </div>
                    @if (Model.DisplayCaptcha)
                    {
                        <div class="captcha-box form-group">
                            <captcha />
                        </div>
                    }
                </div>
            </div>

            @if (Model.AcceptPrivacyPolicyEnabled)
            {

                <validation-provider tag="div" vid="customer.AcceptPrivacyPolicy" :rules="{ required: { allowFalse: false } }" v-slot="{ errors, classes }">
                    <div class="d-inline-flex">
                        <label class="custom-control custom-checkbox">
                            <input id="accept-privacy-policy" name="acceptprivacypolicy" v-model="customer.AcceptPrivacyPolicy" autofocus="autofocus" data-val="true" data-val-required="@Loc["account.fields.acceptprivacypolicy.required"]" type="checkbox" v-bind:class="[classes , 'custom-control-input']">
                            <span class="custom-control-label"></span>
                            <span class="custom-control-description">@Loc["Account.Fields.AcceptPrivacyPolicy"]</span>
                        </label>
                        <b-link class="read mx-2" onclick="window.open('@Url.RouteUrl("PagePopup", new { SystemName = "privacyinfo" })', 450, 500, true)">@Loc["Account.Fields.AcceptPrivacyPolicy.Read"]</b-link>
                    </div>
                    <span class="field-validation-error d-flex w-100">{{ errors[0] }}</span>
                </validation-provider>
            }
        </div>
        <input type="submit" id="register-button" class="btn btn-secondary register-next-step-button my-3" value="@Loc["Account.Register.Button"]" />
    </form>
</validation-observer>
<script asp-location="Footer" asp-order="300">
    var customer = new Vue({
            data: () => ({
                @{
                    <text>
                        FirstName: '@Html.Raw(Model.FirstName)',
                        LastName: '@Html.Raw(Model.LastName)',
                        Company: '@Html.Raw(Model.Company)',
                        StreetAddress: '@Html.Raw(Model.StreetAddress)',
                        StreetAddress2: '@Html.Raw(Model.StreetAddress2)',
                        ZipPostalCode: '@Html.Raw(Model.ZipPostalCode)',
                        City: '@Html.Raw(Model.City)',
                        CountryId: '@Model.CountryId',
                        StateProvinceId: '@Model.StateProvinceId',
                        Phone: '@Html.Raw(Model.Phone)',
                        Fax: '@Html.Raw(Model.Fax)',
                        Username: '@Html.Raw(Model.Username)',
                        Email: '@Html.Raw(Model.Email)',
                        Password: '',
                        ConfirmPassword: '',
                        AcceptPrivacyPolicy: false,
                        @foreach (var item in Model.CustomerAttributes)
                        {
                            @switch (item.AttributeControlType)
                            {
                                case AttributeControlType.DropdownList:
                                {
                                    @foreach (var itemValue in item.Values)
                                    {
                                        if (itemValue.IsPreSelected)
                                        {
                                            <text>customer_attribute_</text> @item.Id <text>: '@itemValue.Id',</text>
                                            break;
                                        } else {
                                            <text>customer_attribute_</text> @item.Id <text>: '',</text>
                                        }
                                    }
                                }
                                break;
                                case AttributeControlType.Checkboxes:
                                case AttributeControlType.RadioList:
                                case AttributeControlType.ReadonlyCheckboxes:
                                {
                                    <text>customer_attribute_</text> @item.Id <text>: [
                                        @foreach (var itemValue in item.Values)
                                        {
                                            if (itemValue.IsPreSelected)
                                            {
                                                <text>'@itemValue.Id',</text>
                                            }
                                        }
                                    ],</text>
                                }
                                break;
                                case AttributeControlType.TextBox:
                                case AttributeControlType.MultilineTextbox:
                                {
                                    <text>customer_attribute_</text> @item.Id <text>: @if (item.DefaultValue != null) { <text>'@item.DefaultValue'</text> } else { <text>''</text> },</text>
                                }
                                break;
                            }

                        }
                </text>
            }
        }),
        created() {
            document.addEventListener("DOMContentLoaded", function () {
                document.querySelectorAll("[data-checked='true']").forEach(function (element) {
                    element.checked = true;
                })
            });
        }
    });
</script>