<form method="POST" class="form-default tab-content"
    onsubmit="return submitValidation(event)"
    {{ attr(form_attr) }}
>
    {{ formInput(form.pass, {}, 'Ancien mot de passe' | trad) }}
    {{ formInput(form.new_pass, {}, 'Nouveau mot de passe' | trad) }}
    {{ inputAdvance('PASSWORD', {
        titre: 'Confirmation' | trad,
        name: 'new_pass_confirm',
        inputAttr: {onchange: 'validatePasswordDoubleCheck(event)'},
        obligatoire: true,
    }) }}
    <script>
        var formPassword_errorMessage = {{ 'Le nouveau mot de passe et le mot de passe de confirmation ne correspondent pas.' | json }};
        function submitValidation(event) {
            if (! isPasswordSame()) {
                // Display error
                showInputError(
                    document.querySelector('[name=new_pass_confirm]'),
                    formPassword_errorMessage
                );
                return false;
            }
            return ajaxSubmit(event);
        }
        function validatePasswordDoubleCheck(event) {
            let target = event.target;
            if (! isPasswordSame()) {
                // Display error
                showInputError(target, {{ '' | json }});
            }
            return false;
        }
        function isPasswordSame() {
            let ref = document.querySelector('[name=new_pass]');
            let repeat = document.querySelector('[name=new_pass_confirm]');
            return repeat.value == ref.value;
        }
        function showInputError(input, errorLabel) {
            input.classList.add('error','white-tooltip');
            input.setAttribute('data-original-title', errorLabel);
        }
    </script>
    <div class="text-right">
        {# TODO : special submit ?#}
        <button type="submit" class="button principal m-0">
            {{- 'Enregistrer mon mot de passe' | trad -}}
        </button>
    </div>
</form>


