<%# Signup/Register page %>

<%- include("../partials/header") -%>
<%- include("../partials/navigationPublic") -%>

<%# Javscript to flash %>
<script>

    $(document).ready(function () {
        $("#password-req").hide();
        $("#signupPassword").focus(function() {
            $("#password-req").show(100);
        });
        $("#signupPassword").blur(function() {
            window.setTimeout(function() {
                $("#password-req").hide(100);
            }, 1000);
        });

        $("#username-characters").hide();
        $("#ign").focus(function() {
            $("#username-characters").show(100);
        });
        $("#ign").blur(function() {
            window.setTimeout(function() {
                $("#username-characters").hide(100);
            }, 1000);
        });

        $("submitButton").click(function() {
            gtag_report_conversion();
        });
    });

</script>

<h1 class="my-5 container">Sign up for Mutorials!</h1>

<div class="jumbotron container">
    <%- include("../partials/flashes") -%>

    <p class="container mb-3">Already have an account? <a href="/signin">Sign in</a></p>

    <form action="/register" method="post">

        <div class="form-group">
            <input type="text" class="form-control" id="ign" placeholder="Username" name="ign">
            <p class="container mb-3 mt-1" id="username-characters">You may use only <strong>letters</strong>, <strong>numbers</strong>, underscore (_), hyphen (-), period (.), and tilde (~) in your username.</p>
        </div>
        <div class="form-group">
            <input type="email" class="form-control" id="signupEmail" placeholder="Email Address" name="username">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="signupPassword" placeholder="Password" name="password">
            <p class="container mb-3 mt-1" id="password-req">A valid password must have a minimum of <strong>7 characters</strong> which includes at least <strong>1 letter</strong> and at least <strong>1 number</strong></p>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="signupConfirmPassword" placeholder="Confirm Password" name="confirmPassword">
        </div>
        <div class="form-group">
            <input type="number" class="form-control" id="yob" name="yob" placeholder="Year of Birth">
        </div>
        <div class="form-group">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="agreeTOS" name="agreeTOS" value="agreeAge">
                <label class="form-check-label" for="agreeTOS">I have read and agree to the <a href='/termsOfService#terms-of-service'>Terms of Service</a> and <a href='/termsOfService#privacy-policy'>Privacy Policy</a>.</label><br>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="agreeAge" name="agreeAge" value="agreeAge">
                <label class="form-check-label" for="agreeAge">I am at least 13 years old, or I have permission from my parent, guardian, teacher, or school to use Mutorials.</label><br>
            </div>
        </div>

        <div class="mt-4 ms-1">
            <a class="btn btn-secondary" id="cancel" href="/">Cancel</a>
            <input class="btn btn-primary" type="submit" id="submitButton" value="Sign Up">
        </div>
    </form>
</div>


<%- include("../partials/footer") -%>
