@page
@model CSR.WebUI.Pages.AuthModel
@{
    ViewData["Title"] = "Authenticate";
}

<div class="row" style="display: flex; flex-direction: row;">
    <div class="col-md-4">
        <form method="post">
            <h4>Login</h4>
            <hr />
            @if (Model.LoginErrorMessages != null && Model.LoginErrorMessages.Any())
            {
                <div asp-validation-summary="ModelOnly" class="text-danger" role="alert">
                    <ul>
                        @foreach (var error in Model.LoginErrorMessages)
                        {
                            <li>@error</li>
                        }
                    </ul>
                </div>
            }
            <div class="form-floating mb-3">
                <input asp-for="LoginInput.Username" class="form-control" autocomplete="username" aria-required="true" placeholder="username" />
                <label asp-for="LoginInput.Username">Username</label>
                <span asp-validation-for="LoginInput.Username" class="text-danger"></span>
            </div>
            <div class="form-floating mb-3">
                <input asp-for="LoginInput.Password" class="form-control" type="password" autocomplete="current-password" aria-required="true" placeholder="password" />
                <label asp-for="LoginInput.Password">Password</label>
                <span asp-validation-for="LoginInput.Password" class="text-danger"></span>
            </div>
            <div>
                <button type="submit" asp-page-handler="Login" class="w-100 btn btn-lg btn-secondary">Login</button>
            </div>
        </form>
    </div>
    <div class="col-md-4">
        <form method="post">
            <h4>Register</h4>
            <hr />
            @if (Model.RegisterErrorMessages != null && Model.RegisterErrorMessages.Any())
            {
                <div asp-validation-summary="ModelOnly" class="text-danger" role="alert">
                    <ul>
                        @foreach (var error in Model.RegisterErrorMessages)
                        {
                            <li>@error</li>
                        }
                    </ul>
                </div>
            }
            <div class="form-floating mb-3">
                <input asp-for="RegisterInput.Username" class="form-control" autocomplete="username" aria-required="true" placeholder="username" />
                <label asp-for="RegisterInput.Username">Username</label>
                <span asp-validation-for="RegisterInput.Username" class="text-danger"></span>
            </div>
            <div class="form-floating mb-3">
                <input asp-for="RegisterInput.Email" class="form-control" autocomplete="email" placeholder="name@example.com" />
                <label asp-for="RegisterInput.Email">Email</label>
                <span asp-validation-for="RegisterInput.Email" class="text-danger"></span>
            </div>
            <div class="form-floating mb-3">
                <input asp-for="RegisterInput.Password" class="form-control" type="password" autocomplete="current-password" aria-required="true" placeholder="password" />
                <label asp-for="RegisterInput.Password">Password</label>
                <span asp-validation-for="RegisterInput.Password" class="text-danger"></span>
            </div>
            <div>
                <button type="submit" asp-page-handler="Register" class="w-100 btn btn-lg btn-primary">Login</button>
            </div>
        </form>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        $(document).ready(function() {
            // when login button is clicked, remove validation from email field
            $("button[asp-page-handler='Login']").click(function() {
                $("#Input_Email").removeAttr("data-val");
                $("#Input_Email").removeAttr("data-val-required");
                // revalidate the form to clear error
                $("form").validate().element("#Input_Email");
                return true;
            });
        });
    </script>
}