{% extends '::layout.html.twig' %}

{% block content_class 'user edit-profile' %}
    {% block content -%}
        <style>
            .row-actions
            {
                margin-left: 0px;
            }
        </style>
        {{ form_start(edit_form,{'attr':{'class':'pt-30'}}) }}
        <div class="edit-form">
            <div class="row">
                <div class="col-xs-12">
                    <div class="col-xs-6">
                        {{form_label(edit_form.email.first,'bsh.user.new.email'|trans({},"USBSHBundle"),{'label_attr':{'class':'text-left'}} )}}
                    </div>
                    <div class="col-xs-6">
                        {{form_label(edit_form.email.second,'bsh.user.repeat.email'|trans({},"USBSHBundle"),{'label_attr':{'class':'text-left'}} )}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="col-xs-6">
                        {{form_widget(edit_form.email.first, {'attr':{'class':''}})}}
                        <p class="error" style="color:red;"></p>
                    </div>
                    <div class="col-xs-6">
                        {{form_widget(edit_form.email.second, {'attr':{'class':''}})}}
                    </div>
                    {{form_errors(edit_form.email)}}
                </div>
            </div>
            <div class="col-xs-12">
                {{form_widget(edit_form.submit, {'attr':{'class':'save-form'}})}}
            </div>
            <div class="clearfix"></div>
        </div>
        {{ form_end(edit_form) }}
        
         <script>
            //Validación de email
            $( ".pt-30" ).submit(function( event ) {
                var val1 = $( "#us_userbundle_user_password_email_first" ).val();
                var val2 = $( "#us_userbundle_user_password_email_second" ).val();
                if(val1 !== val2){
                    $( ".error").text('{{'bsh.user.wrong.email'|trans({},"USBSHBundle")}}');
                    event.preventDefault();
                }
            });
        </script>
        
        
    {% endblock %}