@model SubAccountModel
@inject Grand.Domain.Customers.CustomerSettings customerSettings
@{
    var edit_email = !string.IsNullOrEmpty(Model.Id) && !customerSettings.AllowUsersToChangeEmail;
    var validPassword = string.IsNullOrEmpty(Model.Id) ? "'required|min:Password'" : "";
}
<input asp-for="Id" type="hidden" />
<div class="edit-subaccount row">
    <div class="form-group col-sm-12 col-md-6">
        <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="createorupdatesubaccount.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>
    </div>
    <div class="form-group col-sm-12 col-md-6">
        <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="createorupdatesubaccount.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>
    </div>
    <div class="form-group col-sm-12">
        <validation-provider tag="div" rules="required|email" 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="createorupdatesubaccount.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>
    </div>
    <div class="form-group col-sm-12">
        <validation-provider tag="div" rules="required" name="Password" v-slot="{ errors, classes }">
            <label asp-for="Password" class="col-form-label">@Loc["Account.Fields.Password"]:</label>
            <span class="required">*</span>
            <input asp-for="Password" v-model="createorupdatesubaccount.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 col-sm-12">
        <label asp-for="Active" class="col-form-label">@Loc["Account.Fields.Active"]:</label>
        <label class="custom-control custom-checkbox">
            <input asp-for="Active" class="form-control custom-control-input" />
            <span class="custom-control-label"></span>
        </label>
    </div>
</div>
<script asp-location="Footer" asp-order="300">
    var createorupdatesubaccount  = new Vue({
        data: () => ({
            FirstName: '@Html.Raw(Model.FirstName)',
            LastName: '@Html.Raw(Model.LastName)',
            Email: '@Html.Raw(Model.Email)',
            Password: '',
        })
    });
</script>