<%@ page session="false" %>
<section class="main signin">
    <div class="logo" ng-include src="'/html/header.html'"></div>
    <div class="title">
        <h1>JOIN</h1>
    </div>
    <div class="signinContent">
        <form name="registerForm" class="transbox" novalidate>
            <div class="messageBox">
                <div class="errorMsg" ng-show="attemptedRegister && (invalid ||
                        (registerForm.firstName.$error.required && registerForm.firstName.$dirty) ||
                        (registerForm.lastName.$error.required && registerForm.lastName.$dirty) ||
                        (registerForm.email.$error.required && registerForm.email.$dirty) ||
                        (!registerForm.email.$error.required && registerForm.email.$error.email && registerForm.email.$dirty) ||
                        (registerForm.password.$error.required && registerForm.password.$dirty) ||
                        (!registerForm.password.$error.required && (registerForm.password.$error.minlength || registerForm.password.$error.maxlength) && registerForm.password.$dirty) ||
                        (!registerForm.password.$error.required && !registerForm.password.$error.minlength && !registerForm.password.$error.maxlength && registerForm.password.$error.pattern && registerForm.password.$dirty) ||
                        (registerForm.password_c.$error.required && registerForm.password_c.$dirty) ||
                        (!registerForm.password_c.$error.required && registerForm.password_c.$error.noMatch && registerForm.password.$dirty))">
                    <span class="fadeInLeft animated" ng-show="attemptedRegister && invalid">{{message}}</span>
                    <span class="fadeInLeft animated" ng-show="attemptedRegister && ((registerForm.firstName.$error.required && registerForm.firstName.$dirty) ||
                                (registerForm.lastName.$error.required && registerForm.lastName.$dirty) ||
                                (registerForm.email.$error.required && registerForm.email.$dirty) ||
                                (!registerForm.email.$error.required && registerForm.email.$error.email && registerForm.email.$dirty) ||
                                (registerForm.password.$error.required && registerForm.password.$dirty) ||
                                (!registerForm.password.$error.required && (registerForm.password.$error.minlength || registerForm.password.$error.maxlength) && registerForm.password.$dirty) ||
                                (!registerForm.password.$error.required && !registerForm.password.$error.minlength && !registerForm.password.$error.maxlength && registerForm.password.$error.pattern && registerForm.password.$dirty) ||
                                (registerForm.password_c.$error.required && registerForm.password_c.$dirty) ||
                                (!registerForm.password_c.$error.required && registerForm.password_c.$error.noMatch && registerForm.password.$dirty))">* Please check the following fields.</span>
                </div>
            </div>
            <div class="formTextbox firstName">
                <input type="text" id="firstName" name="firstName" placeholder="Enter your first name" ng-model="firstName" ng-keyup="invalid = false" required  />
                <img src="../../img/alert.png" class="alertIcon" popover="Required first name" popover-trigger="mouseenter" ng-show="attemptedRegister && (registerForm.firstName.$error.required && registerForm.firstName.$dirty)">
            </div>
            <div class="formTextbox lastName">
                <input type="text" id="lastName" name="lastName" placeholder="Enter your last name" ng-model="lastName" ng-keyup="invalid = false" required  />
                <img src="../../img/alert.png" class="alertIcon" popover="Required last name" popover-trigger="mouseenter" ng-show="attemptedRegister && (registerForm.lastName.$error.required && registerForm.lastName.$dirty)">
            </div>
            <div class="formTextbox">
                <input type="email" id="email" name="email"  placeholder="Enter your email address" ng-model="email" ng-keyup="invalid = false" required/>
                <img src="../../img/alert.png" class="alertIcon" popover="Invalid email" popover-trigger="mouseenter"
                    ng-show="((registerForm.email.$error.required && registerForm.email.$dirty) || (!registerForm.email.$error.required && registerForm.email.$error.email && registerForm.email.$dirty))">
            </div>
            <div class="formTextbox password">
                <input type="password" id="password" name="password" placeholder="Create password" ng-model="password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" ng-keyup="invalid = false" required  />
                <img src="../../img/alert.png" class="alertIcon" popover="Invalid password" popover-trigger="mouseenter"
                    ng-show="(attemptedRegister && password == undefined) || (registerForm.password.$error.required && registerForm.password.$dirty) || (!registerForm.password.$error.required && (registerForm.password.$error.minlength || registerForm.password.$error.maxlength) && registerForm.password.$dirty) || (!registerForm.password.$error.required && !registerForm.password.$error.minlength && !registerForm.password.$error.maxlength && registerForm.password.$error.pattern && registerForm.password.$dirty)">
            </div>
            <div class="formTextbox confirmPw">
                <input type="password" id="password_c" name="password_c" placeholder="Repeat password" ng-model="password_c"  ng-keyup="invalid = false" valid-password-c required  />
                <img src="../../img/alert.png" class="alertIcon" popover="Invalid confirm password" popover-trigger="mouseenter"
                    ng-show="passwordNoMatch || (registerForm.password_c.$error.required && registerForm.password_c.$dirty) || (!registerForm.password_c.$error.required && registerForm.password_c.$error.noMatch && registerForm.password.$dirty)">
            </div>
            <div class="resetPasswordCaution" style="color:white;">
                <span>Passwords must be between 8 and 20 characters, contain one lower and uppercase letter and a number or symbol.</span>
            </div>
            <div class="fadeInLeft animated"  id="joinBtn">
                <input type="submit" class="mindinkButton floatRight" ng-keyup="invalid = false" ng-show="!inProgress" ng-disabled="firstName == undefined || lastName == undefined || email == undefined" ng-click="registerEmailUser()" value="JOIN" >
                <div class="loadingIcon" ng-show="inProgress"><img src="../img/loading.gif"></div>
            </div>
        </form>
    </div>
    <div class="footer" ng-include src="'/html/footer.html'"></div>
</section>