{% extends 'base.html.twig' %}

{% block title %}Create your account
{% endblock %}

{% block body %}
    <div class="box register">

        {{ form_start(registrationForm, {'attr' : {'id' : 'registration_form', 'class' : 'needs-validation', 'novalidate' : 'novalidate', 'autocomplete' : 'false'}}) }}
        <h1 class="title">Register</h1>
        <div class="box-body pb-4">
            <p>Please inform your data to create an account</p>

            <div class="form-group">
                {{ form_label(registrationForm.fullname, registrationForm.fullname.vars.label, {'label_attr': {'class': 'sr-only'}}) }}
                {{ form_widget(registrationForm.fullname, {'attr' : {'class' : 'form-control form-control-lg', 'required' : 'require', 'placeholder' : registrationForm.fullname.vars.label} }) }}
                <div class="invalid-feedback">
                    {% if registrationForm.fullname.vars.errors|length %}
                        {{ form_errors(registrationForm.fullname) }}
                    {% else %}
                        This field is required.
                    {% endif %}
                </div>
            </div>
            <div class="form-group">
                {{ form_label(registrationForm.email, registrationForm.email.vars.label, {'label_attr': {'class': 'sr-only'}}) }}
                {{ form_widget(registrationForm.email, {'attr' : {'class' : 'form-control form-control-lg', 'required' : 'require', 'placeholder' : registrationForm.email.vars.label} }) }}
                {% if registrationForm.email.vars.errors|length %}
                    <div class="backend-feedback">
                        {{ form_errors(registrationForm.email) }}
                    </div>
                {% endif %}
                <div class="invalid-feedback">
                    Please fill a valid email address.
                </div>
            </div>
            {% for passwordField in registrationForm.plainPassword %}
                <div class="form-group">
                    {{ form_label(passwordField, passwordField.vars.label, {'label_attr': {'class': 'sr-only'}}) }}
                    {{ form_widget(passwordField, {'attr' : {'class' : 'form-control form-control-lg', 'required' : 'require', 'placeholder' : passwordField.vars.label} }) }}
                    {% if passwordField.vars.errors|length %}
                        <div class="backend-feedback">
                            {{ form_errors(passwordField) }}
                        </div>
                    {% endif %}
                    <div class="invalid-feedback">
                        The password fields must match.
                    </div>
                </div>

            {% endfor %}

            <div class="row text-center pt-3">
                <div class="column col-sm-6 pl-5">
                    <a href="{{path('app_login')}}" class="btn btn-lg btn-light">
                        Login
                    </a>
                </div>
                <div class="column col-sm-6 pr-5">
                    <button class="btn btn-lg btn-primary" type="submit">
                        Sign up
                    </button>
                </div>
            </div>
        </div>

        {{ form_end(registrationForm) }}
    </div>
    <script>
        var oForm = document.getElementById('registration_form');
        oForm.oninput = function () {
            var password = document.getElementById('registration_form_plainPassword_first');
            var password2 = document.getElementById('registration_form_plainPassword_second');
            password2.setCustomValidity(password2.value != password.value ? "The password fields must match." : "")
        }
    </script>
{% endblock %}