{% 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','id':'profileForm'}}) }}
        <div class="edit-form">
            <div class="row">
                <div class="col-xs-6">
                    <div class="col-xs-12">
                        {{form_label(edit_form.firstname,'bsh.user.profile.name'|trans({},"USBSHBundle"),{'label_attr':{'class':'text-left'}} ) }}
                    </div>
                    <div class="col-xs-12">
                        {{form_widget(edit_form.firstname) }}
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="col-xs-12">
                        {{form_label(edit_form.lastname,'bsh.user.profile.lastnames'|trans({},"USBSHBundle"),{'label_attr':{'class':'text-left'}} ) }}
                    </div>
                    <div class="col-xs-12">
                        {{form_widget(edit_form.lastname) }}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="col-xs-12">
                        {{form_label(edit_form.phone,'bsh.user.profile.phone'|trans({},"USBSHBundle"),{'label_attr':{'class':'text-left'}} ) }}
                    </div>
                    <div class="col-xs-12">
                        {{form_widget(edit_form.phone) }}
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="col-xs-12">
                        {{form_label(edit_form.mobile_phone,'bsh.user.profile.optionalphone'|trans({},"USBSHBundle"),{'label_attr':{'class':'text-left'}} ) }}
                    </div>
                    <div class="col-xs-12">
                        {{form_widget(edit_form.mobile_phone) }}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="col-xs-12">
                        <img id="image" src ="/{{entity.userFile}}" style="width: 50px;margin-top: 25px;">
                        {{form_label(edit_form.userFile,'Imagen',{'label_attr':{'class':'text-left','style':'margin-top: -20px;'}} ) }}
                    </div>
                    <div class="col-xs-12">
                        <button type="button" class="button-select-image">{{'bsh.user.profile.select'|trans({},"USBSHBundle")}}</button>
                        {{form_widget(edit_form.userFile, {'attr':{'class':'input-select-image'}}) }}
                    </div>
                </div>
            </div>

            <div class="col-xs-12">
                {{ form_widget(edit_form.submit, {'attr':{'class':'col-xs-12 save-form'}} ) }}
            </div>
            
            <div class="clearfix"></div>
        </div>
        {{ form_end(edit_form) }}
        
        <script>
            $(".input-select-image").css("display", "none");
            $(".button-select-image").css("display", "block");
            $(".button-select-image").click(function()
            {
                $(".input-select-image").trigger("click");
            });
            $(function() {
                 $("input:file").change(function (){
                    var value = $('#us_userbundle_user_userFile').val();
                    console.log(value);
                   //¿AJAX que meta obtenga el dato del form?
                   $("#image").attr("src",value);
                 });
              });
        </script>
    {% endblock %}