{% trans_default_domain 'FOSUserBundle' %}
{% trans_default_domain 'message' %}

<!------ Include the above in your HEAD tag ---------->


    <div class="row rowmain" >
        {{ form_start(form, { 'action': path('fos_user_profile_edit'), 'attr': { 'class': 'fos_user_profile_edit' } }) }}
        <div class="col-sm-12" >

            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">{{ 'header.profile'|trans }}</a>
                </li>
                <li class="breadcrumb-item active">{{ 'main.Edit'|trans }}</li>
            </ol>
        </div>

        <div class="col-sm-4"><!--left col-->


            <div class="text-center">
                {% if app.user.nomImage!=null %}

                    <img src="{{ asset('image/') }}{{ user.nomImage }} " class="avatar img-circle img-thumbnail" style="width: 10vw; height: 10vw; border-radius: 100%;"  alt="avatar">
                {% else %}
                    <img src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" class=" avatar img-circle img-thumbnail" style="width: 10vw; height: 10vw; border-radius: 100%;" alt="avatar">
                {% endif %}
                <h6>Upload a different photo...</h6>
                {{ form_widget(form.file,{'attr':{'class':'text-center center-block file-upload', 'placeholder':'username','value':'dd'}}) }}
                <b style="color: red">
                    {{ form_errors(form.file) }}
                </b>
            </div><hr><br>



        </div><!--/col-3-->
        <div class="col-sm-8">


            <div class="tab-content">
                <div class="tab-pane active" id="home">
                    <hr>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="email"><h4>{{ 'main.username'|trans }}</h4></label>
                                {{ form_widget(form.username,{'attr':{'class':'form-control', 'placeholder': 'main.username'|trans }}) }}
                                <b style="color: red">
                                    {{ form_errors(form.username) }}
                                </b>
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="email"><h4>{{ 'main.Email addresse'|trans }}</h4></label>
                                {{ form_widget(form.email,{'attr':{'class':'form-control', 'placeholder':'you@email.com'}}) }}
                                <b style="color: red">
                                    {{ form_errors(form.email) }}
                                </b>
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="first_name"><h4>{{ 'main.First name'|trans }}</h4></label>
                                {{ form_widget(form.prenom,{'attr':{'class':'form-control', 'placeholder':'main.First name'|trans}}) }}
                                <b style="color: red">
                                    {{ form_errors(form.prenom) }}
                                </b>
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="last_name"><h4>{{ 'main.Last name'|trans }}</h4></label>
                                {{ form_widget(form.nom,{'attr':{'class':'form-control', 'placeholder':'main.Last name'|trans}}) }}
                                <b style="color: red">
                                    {{ form_errors(form.nom) }}
                                </b>
                            </div>
                        </div>


                        <div class="form-group">

                            <div class="col-xs-6">
                                <label for="password"><h4>{{ 'main.Password'|trans }}</h4></label>
                                {{ form_widget(form.current_password,{'attr':{'class':'form-control', 'placeholder':'main.Password'|trans}}) }}
                                <b style="color: red">
                                    {{ form_errors(form.current_password) }}
                                </b>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12">
                                <br>
                                <b style="color: red">
                                    {{ form_errors(form) }}
                                </b>
                                {{ form_rest(form) }}
                                {{ form_widget(form) }}

                                <button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> {{ 'main.update'|trans }}</button>
                                <button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i>{{ 'main.Reset'|trans }} </button>
                            </div>
                        </div>

                    <hr>

                </div><!--/tab-pane-->


            </div><!--/tab-pane-->
        </div><!--/tab-content-->

        {{ form_end(form) }}
    </div><!--/col-9-->

<script>
    $(document).ready(function() {


        var readURL = function(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.avatar').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }


        $(".file-upload").on('change', function(){
            readURL(this);
        });
    });
</script>
<style>
    .custom-file-input::before {
        content: 'Select some files';}
</style>