@page
@{
    ViewData["Title"] = "Login";
}

<div id="app" class="container-fluid" v-cloak>

    <div class="card-body login-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="input-group mb-3">
                <input id="Password"
                       name="Password"
                       type="password"
                       class="form-control"
                       placeholder="Password"
                       v-model="state.password"
                       v-on:input="state.errors.password = ''">
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fas fa-lock"></span>
                    </div>
                </div>
            </div>
            <label v-if="state.errors.password" class="text-danger">{{ state.errors.password }}</label>
            <div class="row">
                <div class="col-8">
                    <div class="icheck-primary">
                        <input type="checkbox">
                        <label for="remember">
                            Remember Me
                        </label>
                    </div>
                </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 ? '...' : 'Log In' }}</span>
                    </button>
                </div>
                <!-- /.col -->
            </div>
        </form>

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

        <p class="mb-1">
            <a asp-page="/Accounts/ForgotPassword">Forgot Password</a>
        </p>
        <p class="mb-0">
            <a asp-page="/Accounts/Register" class="text-center">Register a new membership</a>
        </p>
    </div>

</div>


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