{% extends 'base.html' %}

{% block title %}Sign up{% endblock %}

{% block footer %}

    <script src="/js/hideShowPassword.min.js"></script>
    <script src="/js/app.js"></script>
    
    <script>
        $(document).ready(function () {

            // Validate the form
            $('#formSignup').validate({
                rules:{
                    name: 'required',
                    email: {
                        required: true,
                        email: true,
                        remote: '/account/validate-email'
                    },
                    password: {
                        required: true,
                        minlength: 6,
                        validPassword: true
                    },
                    // password_confirmation: {
                    //     equalTo: '#inputPassword'
                    // }
                },
                messages:{
                    email:{
                        remote: 'email already taken'
                    }
                }
            });

            // Show password toggle button
            $('#inputPassword').hideShowPassword({
                show: false,
                innerToggle: 'focus'
            });
        });
    </script>
    
{% endblock %}

{% block body %}

    <h1 class="fw-bold text-center w-50">Sign up</h1>

    {% if user.errors is not empty %}
        <p>Errors:</p>
        <ul>
            {% for error in user.errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    <form action="/signup/create" method="post" id="formSignup">
        <div class="mb-3 w-50">
            <label for="inputName" class="form-label fw-bold">Name</label>
            <input class="form-control" name="name" id="inputName" placeholder="Name" autofocus value="{{ user.name }}"
                required>
        </div>
        <div class="mb-3 w-50">
            <label for="inputEmail" class="form-label fw-bold">Email address</label>
            <input class="form-control" name="email" id="inputEmail" placeholder="email address" value="{{ user.email }}"
                required type="email" aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div class="mb-3 w-50">
            <label for="inputPassword" class="form-label fw-bold">Password</label>
            <input class="form-control" type="password" name="password" id="inputPassword" placeholder="Password" required>
        </div>
        <!-- <div>
            <label for="inputPasswordConfirmation">Repeat password</label>
            <input type="password" name="password_confirmation" id="inputPasswordConfirmation" placeholder="Repeat password" required>
        </div> -->

        <button type="submit" class="btn btn-dark">Sign up</button>
        
    </form>

{% endblock %}