{% extends 'layouts/skeleton.twig' %}

{% block content %}
<div>
    <form action="/register" method="post" id="login-form">
        <div>
            <label for="name">Name<br>
            <input name="name" type="text" required>
        </div>
        <div>
            <label for="email">Email<br>
            <input name="email" type="text" required>
        </div>
        <div>
            <label for="password">Password<br>
            <input name="password" type="password" required>
        </div>
        <div>
            <label for="checked_password">Confirm Password<br>
            <input name="checked_password" type="password" required>
        </div>
        <div>
            <button type="submit">Register</button>
        </div>
    </form>
</div>
{% endblock %}

{% block body_js %}
<script type="javascript">
const form = document.getElementById("login-form");
form.addEventListener('submit', function (e) {
    e.preventDefault();

    // validate form
    const [p1] = document.querySelector('input[name="password"]');
    const [p2] = document.querySelector('input[name="checked_password"]'); 

    if (p1.getAttribute("value") == p2.getAttribute("value")) {
        return this.submit();
    }
});
</script>
{% endblock %}