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

    //title
    pagebuilder.AddTitleParts(Loc["Title.PasswordRecovery"]);
}
<div class="page password-recovery-page">
    <h1 class="generalTitle h2">@Loc["Account.PasswordRecovery"]</h1>
    @if (!String.IsNullOrEmpty(Model.Result))
    {
        <div class="result alert alert-info mt-3">
            @Model.Result
        </div>
    }
    @if (!Model.Send)
    {
        <validation-observer v-slot="{ handleSubmit }">
            <form asp-route="PasswordRecovery" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
                <input type="hidden" asp-for="DisplayCaptcha" />
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                <div class="form-group">
                    <validation-provider tag="div" rules="required|email" name="Email" v-slot="{ errors, classes }">
                        <label asp-for="Email" class="col-form-label">@Loc["Account.PasswordRecovery.Email"]:</label>
                        <input asp-for="Email" v-model="passwordrecovery.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>
                @if (Model.DisplayCaptcha)
                {
                    <div class="form-group">
                        <div class="captcha-box">
                            <captcha />
                        </div>
                    </div>
                }
                <div class="row text-xs-center">
                    <div class="col-12">
                        <button class="btn btn-secondary password-recovery-button">@Loc["Account.PasswordRecovery.RecoverButton"]</button>
                    </div>
                </div>

                <div class="alert-info mt-3 alert">
                    @Loc["Account.PasswordRecovery.Tooltip"]
                </div>
            </form>
        </validation-observer>
    }
</div>
<script asp-location="Footer" asp-order="300">
    var passwordrecovery = new Vue({
        data: () => ({
            Email: '',
        })
    });
</script>