{% extends "base.html" %}

{% block title %}Register{% endblock %}
{% block headers %}

{% endblock %}


{% block content %}
    <h1>Login</h1>
    <form action="/api/user/register" method="POST">
        <div>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email">
            <span id="email_error" style="color:red; margin-left:5px;"></span>
        </div>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
            <span id="username_error" style="color:red; margin-left:5px;"></span>
        </div>
        <div>
            <label for="username">Password:</label>
            <input type="password" id="password" name="password">
            <span id="password_error" style="color:red; margin-left:5px;"></span>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password2">
            <span id="confirm_error" style="color:red; margin-left:5px;"></span>
        </div>
        <button type="submit" id="submit_btn">Register</button>
    </form>

    
    <script>
        const password = document.getElementById('password');
        const password2 = document.getElementById('password2');
        const submit_btn = document.getElementById('submit_btn');
        const username = document.getElementById('username');
        const email = document.getElementById('email');

        // const password_error = document.getElementById('password_error');
        // const password2_error = document.getElementById('confirm_error');

        function validate() {
            submit_btn.disabled = false;
            if (!(password.value && password2.value) || password.value !== password2.value) {
                submit_btn.disabled = true;
            } else {

            }
            if (password.length < 8) {
                submit_btn.disabled = true;
            }
            if (username.length < 3) {
                submit_btn.disabled = true;
            }
            if (email.length < 5) {
                submit_btn.disabled = true;
            }
        }

        // check on every key press
        password.addEventListener('input', validate);
        confirmPassword.addEventListener('input', validate);
        username.addEventListener("input", validate);
        email.addEventListener("input", validate);

    </script>
{% endblock %}