@page
@{
    ViewData["Title"] = "Forgot Password";
}

<div class="container-fluid" id="app" v-cloak>
    <div class="card-body register-card-body">
        <p class="login-box-msg">@ViewData["Title"]</p>

        <form v-on:submit.prevent="handleSubmit">
            <div class="input-group mb-3">
                <input id="Email"
                       name="Email"
                       type="email"
                       class="form-control"
                       placeholder="name@example.com"
                       v-model="state.email"
                       v-on:input="state.errors.email = ''">
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fas fa-envelope"></span>
                    </div>
                </div>
            </div>
            <label v-if="state.errors.email" class="text-danger">{{ state.errors.email }}</label>
            <div class="row">
                <div class="col-8">
                </div>
                <!-- /.col -->
                <div class="col-4">
                    <button type="submit"
                            v-bind:disabled="state.isSubmitting"
                            class="btn btn-primary btn-block">
                        <span class="spinner-border spinner-border-sm me-2"
                              v-if="state.isSubmitting"
                              role="status"
                              aria-hidden="true"></span>
                        <span>{{ state.isSubmitting ? '...' : 'Reset' }}</span>
                    </button>
                </div>
                <!-- /.col -->
            </div>
        </form>

        <div class="social-auth-links text-center">
            <p>- OR -</p>
            <a href="#" class="btn btn-block btn-primary">
                <i class="fab fa-facebook mr-2"></i>
                Sign up using Facebook
            </a>
            <a href="#" class="btn btn-block btn-danger">
                <i class="fab fa-google-plus mr-2"></i>
                Sign up using Google+
            </a>
        </div>

        <p class="mb-1">
            <a asp-page="/Accounts/Login" class="text-center">I already have a membership</a>
        </p>
    </div>

</div>


@section scripts {
    <script src="~/FrontEnd/Pages/Accounts/ForgotPassword.cshtml.js"></script>
}