@model ChangePasswordModel
@using Grand.Web.Models.Customer;
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(Loc["Title.Account"]);
}
@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.ChangePassword })
}
<validation-observer v-slot="{ handleSubmit }">
    <form asp-route="CustomerChangePassword" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
        <section class="page account-page change-password-page pl-lg-3 pt-3 pt-lg-0">
            <h1 class="h2 generalTitle">@Loc["Account.ChangePassword"]</h1>
            @if (!String.IsNullOrEmpty(Model.Result))
            {
                <section class="result alert alert-info">
                    @Model.Result
                </section>
            }
            <div asp-validation-summary="ModelOnly" class="message-error"></div>

            <fieldset>
                <div class="form-fields">
                    <fieldset class="form-group">
                        <validation-provider tag="div" rules="required" name="OldPassword" v-slot="{ errors, classes }">
                            <label asp-for="OldPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.OldPassword"]:</label>
                            <input asp-for="OldPassword" v-model="changepassword.OldPassword" v-bind:class="[classes , 'form-control']" autofocus="autofocus" autocomplete="off" />
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="OldPassword"></span>
                        </validation-provider>
                    </fieldset>
                    <fieldset class="form-group">
                        <validation-provider tag="div" vid="changepassword.NewPassword" rules="required" v-slot="{ errors, classes }">
                            <label asp-for="NewPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.NewPassword"]:</label>
                            <input asp-for="NewPassword" v-model="changepassword.NewPassword" v-bind:class="[classes , 'form-control']" autofocus="autofocus" autocomplete="off" />
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="NewPassword"></span>
                        </validation-provider>
                    </fieldset>
                    <fieldset class="form-group">
                        <validation-provider tag="div" vid="changepassword.ConfirmNewPassword" rules="required|confirmed:@@changepassword.NewPassword" v-slot="{ errors, classes }">
                            <label asp-for="ConfirmNewPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.ConfirmNewPassword"]:</label>
                            <input asp-for="ConfirmNewPassword" v-model="changepassword.ConfirmNewPassword" v-bind:class="[classes , 'form-control']" autofocus="autofocus" autocomplete="off" />
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="ConfirmNewPassword"></span>
                        </validation-provider>
                    </fieldset>
                </div>
            </fieldset>
            <div class="text-xs-center">
                <input type="submit" class="btn btn-info change-password-button" value="@Loc["Account.ChangePassword.Button"]" />
            </div>
        </section>
    </form>
</validation-observer>
<script asp-location="Footer" asp-order="300">
    var changepassword = new Vue({
        data: () => ({
            OldPassword: '',
            NewPassword: '',
            ConfirmNewPassword: '',
        })
    });
</script>