{% extends "view/layout.html.twig" %}
{% block title %} Profil | CRM BIVTeam {% endblock %}
{% block body %}
    <div class="container-fluid mt-2">
        {% set titleHelp = "help.title"|trans %}
        {% include 'view/header/_help.html.twig' %}

        <!-- box -->
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <div class="content-box content-lighten" data-step="1" data-intro="{{ "help.user.profil.step1"|trans }}">
                    {{ form(formUser) }}
                </div>
            </div>
            <div class="col-sm-6 col-md-6">
                <div class="content-box content-lighten" data-step="2" data-intro="{{ "help.user.profil.step2"|trans }}">
                    <div class="container mb-5">
                        <div class="row">
                            <div class="col-md-6 img">
                                {% if app.user.imageName %}
                                    <img src="{{ asset('/images/user_images/') }}{{ app.user.imageName }}" class="imgUser rounded-circle" alt="imgUser">
                                {% else %}
                                    <img src="{{ asset('/images/user_images/defaultUser.png') }}" class="imgUser rounded-circle" alt="imgUser">
                                {% endif %}
                            </div>
                            <div class="col-md-6 details">
                                <blockquote>
                                    <h5>{{ app.user.lastname }} {{ app.user.firstname }}</h5>
                                    <small><cite title="Source Title"> <i class="icon-map-marker"></i></cite></small>
                                </blockquote>
                                <p>
                                    {{ app.user.mail }} <br>
                                    BIVTeam
                                </p>
                            </div>
                        </div>
                    </div>
                    {{ form(formProfilPicture) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        $(function () {
            $('[data-toggle="popover"]').popover()
        })

        $('.custom-file-input').on('change', function (event) {
            var inputFile = event.currentTarget;
            $(inputFile).parent()
                .find('.custom-file-label')
                .html(inputFile.files[0].name);
        });
    </script>
{% endblock %}