<h1>Sign up for
    <?php echo $SERVICE_NAME;?>
</h1>

<form class="needs-validation" novalidate action="" method="POST">
    <!-- Username input -->
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="form3Example3">Username*</label>
        <input pattern="[^\s]{<?php echo $VAL_USER->min_username.','.$VAL_USER->max_username;?>}" required
            title="At least 5 not whitespace characters" name="username" type="text" id="form3Example0"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['username'])){echo 'border-danger';}?>"
            placeholder="johndoe"
            value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" />
        <div class="invalid-feedback">
            Please choose a username with at least 5 not whitespace characters.
        </div>
    </div>
    <!-- 2 column grid layout with text inputs for the first and last names -->
    <div class="row mb-3">
        <div class="col">
            <div class="form-outline">
                <label class="form-label font-weight-bold" for="form3Example1">First name*</label>
                <input pattern="[^\s]{<?php echo $VAL_USER->min_first_name.','.$VAL_USER->max_first_name;?>}" required
                    title="At least 2 not whitespace characters" name="name" type="text" id="form3Example1"
                    class="form-control <?php if(isset($error) && $error && !isset($_POST['name'])){echo 'border-danger';}?>"
                    placeholder="John"
                    value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>" />
            </div>
            <div class="invalid-feedback">
                Please provide a first name with at least 2 not whitespace characters.
            </div>
        </div>
        <div class="col">
            <div class="form-outline">
                <label class="form-label font-weight-bold" for="form3Example2">Last name*</label>
                <input pattern="[^\s]{<?php echo $VAL_USER->min_last_name.','.$VAL_USER->max_last_name;?>}" required
                    title="At least 2 not whitespace characters" name="last_name" type="text" id="form3Example2"
                    class="form-control <?php if(isset($error) && $error && !isset($_POST['last_name'])){echo 'border-danger';}?>"
                    placeholder="Doe"
                    value="<?php echo isset($_POST['last_name']) ? htmlspecialchars($_POST['last_name']) : '' ?>" />
            </div>
            <div class="invalid-feedback">
                Please provide a last name with at least 2 not whitespace characters.
            </div>
        </div>
    </div>

    <!-- Email input -->
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="form3Example3">Email address*</label>
        <input required name="email" type="email" id="form3Example3"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['email'])){echo 'border-danger';}?>"
            placeholder="myemail@example.com"
            value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" />
            <div class="invalid-feedback">
                Please provide a valid email address.
            </div>
    </div>

    <!-- Password input -->
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="pw1">Password*</label>
        <input pattern="[^\s]{<?php echo $VAL_USER->min_password.','.$VAL_USER->max_password;?>}" required
            title="At least 8 not whitespace characters" name="password" type="password" id="pw1"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['password'])){echo 'border-danger';}?>"
            placeholder="********"
            value="<?php echo isset($_POST['password']) ? htmlspecialchars($_POST['password']) : '' ?>" />
    </div>
    <!-- Password input -->
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="pw2">Confirm your Password*</label>
        <input pattern="[^\s]{<?php echo $VAL_USER->min_password.','.$VAL_USER->max_password;?>}" required
            title="At least 8 not whitespace characters" name="password_confirm" type="password" id="pw2"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['password_confirm'])){echo 'border-danger';}?>"
            placeholder="********"
            oninput="validate_pw2(this)"
             />
    </div>
    <hr class="mt-2 mb-3" />
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="eula">End User License Agreement*</label>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="eula" required
                title="You need to agree to the EULA in order to proceed">
            <label class="form-check-label" for="eula">I have read and agree to to the
                <?php echo $SERVICE_NAME; ?> <a
                    href="https://www2.ids-mannheim.de/cosmas2/projekt/register/license_agreement.html">End User License
                    Agreement</a> and will use
                <?php echo $SERVICE_NAME; ?> only for academic and non-commercial purposes.
            </label>
            <div class="invalid-feedback">
                You need to agree to the EULA in order to proceed.
            </div>
        </div>
    </div>
    <hr class="mt-2 mb-3" />
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="privacy_policy">Privacy Policy*</label>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" name="privacy_policy" id="privacy_policy" required
                title="You need to agree to the privacy policy in order to proceed">
            <label class="form-check-label" for="privacy_policy">I have read and agree
                to to the
                <?php echo $SERVICE_NAME; ?> <a
                    href="https://www2.ids-mannheim.de/cosmas2/web-app/datenschutz.html">Privacy Policy</a>.
            </label>
            <div class="invalid-feedback">
                You need to agree to the privacy policy in order to proceed.
            </div>
        </div>
    </div>

    <hr class="mt-2 mb-3" />
    <!--captcha here-->
    <div class="form-outline mb-3">

        <label class="form-label font-weight-bold" for="form3Example4">Captcha:</label>
        <div class="container mb-2 offset-md-2">
            <img id="captcha" src="<?php echo $BASE_URL.'/captcha.php?token='.$_SESSION['captcha_token']; ?>" />
            <div id="reload_captcha">
                <button id="reload" class="btn btn-outline-info" type="button"> <span
                        class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
            </div>
        </div>
        <input pattern="[^\s]{<?php echo $CAPTCHA_LENGTH; ?>,}" required
            title="Please fill the captcha. It has 5 characters" name="captcha" type="text" id="form3Example6"
            class="form-control" placeholder="Type what you see on the image above" />
    </div>

    <!-- Submit button -->
    <button name="type" value="register" type="submit" class="btn btn-primary float-right btn-md">Sign up</button>

</form>
</div>

<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
        'use strict';
        window.addEventListener('load', function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
        function validate_pw2(pw2) {
            if (pw2.value !== $("#pw1").val()) {
                pw2.setCustomValidity("Passwords do not match");
            } else {
                pw2.setCustomValidity(""); // is valid
            }
        }
</script>