<%@ page session="false" %>
<section class="main signin">
    <div class="logo" ng-include src="'/html/header.html'"></div>
    <div class="title">
        <h1>SIGN IN</h1>
    </div>
    <div class="signinContent">
    <form name="emailSigninForm" ng-controller="userCtrl" class="transbox" ng-login-submit novalidate>
        <div class="messageBox">
            <div class="errorMsg" ng-show="attemptedSignIn && (invalid ||
                (emailSigninForm.email.$error.required && emailSigninForm.email.$dirty) ||
                (!emailSigninForm.email.$error.required && emailSigninForm.email.$error.email && emailSigninForm.email.$dirty) ||
                (emailSigninForm.password.$error.required && emailSigninForm.password.$dirty))">
                <span class="fadeInLeft animated" ng-show="attemptedSignIn && invalid">{{message}}</span>
                <span class="fadeInLeft animated" ng-show="attemptedSignIn && ((emailSigninForm.email.$error.required && emailSigninForm.email.$dirty) ||
                                (!emailSigninForm.email.$error.required && emailSigninForm.email.$error.email && emailSigninForm.email.$dirty) ||
                                (emailSigninForm.password.$error.required && emailSigninForm.password.$dirty))">* Please check the following fields.</span>
            </div>
        </div>
        <div>
                <div class="formTextbox">
                    <input type="email" id="email" name="email" placeholder="Enter your email address" ng-keyup="invalid = false" ng-model="email" required />
                    <img src="../../img/alert.png" class="alertIcon"  popover="Invalid email" popover-trigger="mouseenter"  ng-show="attemptedSignIn && ((emailSigninForm.email.$error.required && emailSigninForm.email.$dirty) || (!emailSigninForm.email.$error.required && emailSigninForm.email.$error.email && emailSigninForm.email.$dirty))">
                </div>
                <div class="formTextbox">
                    <input type="password" id="password" name="password" placeholder="Enter password" ng-keyup="invalid = false" ng-model="password" required />
                    <img src="../../img/alert.png" class="alertIcon" popover="Password required" popover-trigger="mouseenter"
                        ng-show="(attemptedSignIn && emailSigninForm.password.$error.required && emailSigninForm.password.$dirty)">
                </div>
                <div class="buttonbox">
                    <div class="mindink-checkbox">
                        <input type="checkbox" id="mindink-checkbox" name="check" ng-model="rememberMe" checked >
                        <label for="mindink-checkbox"></label>
                        <span>Remember me</span>
                        <p class="forgotPassword"><a href="/forgotpassword" >Forgot password</a>
                    </div>
                    <div class="fadeInLeft animated">
                        <input type="submit" class="mindinkButton floatRight" ng-show="!inProgress" ng-disabled="email == undefined || email == '' || password == undefined || password == ''" ng-click="emailSignin()" value="SIGN IN">
                        <div class="loadingIcon" ng-show="inProgress"><img src="../img/loading.gif"></div>
                    </div>
                </div>
        </div>

    </form>
    </div>
    <div class="footer" ng-include src="'/html/footer.html'"></div>
</section>
