@{
    Layout = "~/Views/Shared/_LayoutThemed.cshtml";
}

@section styles {
    @*<link rel="stylesheet" href="..."/>*@

    @*<style></style>*@
}

<article class="article gradient-2">
    <h2 class="title container text-center">ART FIND</h2>
    <section class="form-section">
        <div class="section-inner container text-center">
            <div class="row">
                <div class="col-md-10 col-sm-12 col-xs-12 col-md-push-1 col-sm-push-0 col-xs-push-0">
                    <h3 class="subtitle titleArea">Login</h3>
                    <div class="content">
                        <div class="form-container col-md-10 col-sm-12 col-xs-12 col-md-push-1 col-sm-push-0 col-xs-push-0">
                            <form id="loginForm" class="contact-form form">
                                <div class="contact-form-inner">
                                    <h3 class="subtitle"></h3>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 col-xs-12 form-group">
                                            <label class="sr-only" for="inputUsername">Username</label>
                                            <input type="text" class="form-control inputUsername" name="inputUsername" placeholder="Username" minlength="2" required>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12 form-group">
                                            <label class="sr-only" for="inputPassword">Password</label>
                                            <input type="password" class="form-control inputPassword" name="inputPassword" placeholder="Password" minlength="2" required>
                                        </div>

                                        <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                                            <button type="submit" class="btn btn-block btn-cta btn-cta-primary loginBtn">Login</button>
                                        </div>
                                    </div><!--//row-->
                                </div>
                                <div id="form-messages"></div>
                            </form><!--//contact-form-->
                        </div>
                        <a href="/Users/Create" class="btn btn-primary createBtn" role="button">New to Art Find? Click here to sign up!</a>
                    </div><!--//content-->
                </div>
            </div><!--//row-->
        </div>
    </section>
</article>

@section scripts {
    @*<script></script>*@

    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/artfind/services/artfind.services.users.js"></script>

    <script type="text/javascript">
        artfind.page.startUp = function () {
            console.log("page startup");
            artfind.page.initializeValidation();
            $(".loginBtn").on("click", artfind.page.handlers.loginUser);

        };

        artfind.page.initializeValidation = function () {
            jQuery.validator.setDefaults({

            });
            $("#loginForm").validate({
                rules: {
                    inputUsername: {
                        required: true
                    },
                    inputPassword: {
                        required: true
                    }
                }
            });
        };


        artfind.page.handlers.loginUser = function (event) {
            event.preventDefault();
            if ($("#loginForm").valid()) {

                var loginUser = {
                    username: $(".inputUsername").val(),
                    password: $(".inputPassword").val()
                };
                artfind.services.users.login(loginUser, artfind.page.handlers.loginSuccess, artfind.page.handlers.loginError);

            };
        };

        artfind.page.handlers.loginSuccess = function (response) {
			$(".titleArea").text("Login Successful!")
			artfind.services.notifications.success("Login successful!");
        };

		artfind.page.handlers.loginError = function (response) {
			artfind.services.notifications.error(response.responseJSON.message);
        };



    </script>



}