extends ../../../templates/base.pug
block content
    .row
        .col
        .col
            if signupFailed !== undefined
                .alert.alert-danger #{signupFailed}

            form(method="POST", action=getUrl("signupTarget"))
                .form-group
                    input.form-control(type='text', name='username', placeholder='Username', autofocus='')
                .form-group
                    input#email.form-control(type='email', name='email', placeholder='E-mail address')
                .form-group
                    input#pass1.form-control(type='password', name='password', placeholder='Password')
                .form-group
                    input#pass2.form-control(type='password', placeholder='Retype your password')
                .form-group
                    input.btn.btn-primary.form-control(type='submit', value='Log in')
        .col

block extrajs
    script.
        var mail = document.getElementById('email'),
            pass = document.getElementById('pass1'),
            pass2 = document.getElementById('pass2');

        function validatePasswords() {
            if (pass1.value === pass2.value) {
                pass2.setCustomValidity('');
            } else {
                pass2.setCustomValidity("Passwords don't match");
            }
        }

        pass1.addEventListener('change', validatePasswords);
        pass2.addEventListener('keyup', validatePasswords);