<%@ page session="false" %>
<section class="main signin">
    <div class="logo" ng-include src="'/html/header.html'"></div>
    <div class="title">
        <h1>Forgot password</h1>
    </div>
    <div class="signinContent">
        <form name="forgotPasswordForm" class="transbox">
            <div class="messageBox">
                <div class="errorMsg" ng-show="invalid ||
                    (forgotPasswordForm.email.$error.required && forgotPasswordForm.email.$dirty) ||
                    (!forgotPasswordForm.email.$error.required && forgotPasswordForm.email.$error.email && forgotPasswordForm.email.$dirty)">
                    <span class="fadeInLeft animated" ng-show="invalid">{{message}}</span>
                    <span class="fadeInLeft animated" ng-show="(forgotPasswordForm.email.$error.required && forgotPasswordForm.email.$dirty) ||
                        (!forgotPasswordForm.email.$error.required && forgotPasswordForm.email.$error.email && forgotPasswordForm.email.$dirty)">* Please check the following fields.</span>
                </div>
            </div>
            <div>
                <div class="formTextbox">
                    <input type="email" id="email" ng-model="email" placeholder="Enter your email address" ng-keyup="invalid = false" required/>
                    <img src="../../img/alert.png" class="alertIcon"  popover="Invalid email" popover-trigger="mouseenter"
                        ng-show="(forgotPasswordForm.email.$error.required && forgotPasswordForm.email.$dirty)">
                </div>
                <div class="fadeInLeft animated">
                    <input type="submit" ng-show="!inProgress" ng-click="requestNewPassword()" ng-disabled="!forgotPasswordForm.$valid" class="mindinkButton floatRight" value="SUBMIT" >
                    <div class="loadingIcon" ng-show="inProgress"><img src="../img/loading.gif"></div>
                </div>
            </div>
        </form>
    </div>
    <div class="footer" ng-include src="'/html/footer.html'"></div>
</section>