
<div class="row">
    <div class="col-sm">
        <div id="profile_avatar" class="center-block">

            {%if profil_avatar == '' %}

            {{avatar | raw}}
            <small><a class="avatar_uploader" href="javascript:void(0)">Change Avatar</a></small>
            {% else %}

            <img class="avatar avatar-100 photo img-responsive img-circle" width="100" height="100" src="{{profil_avatar}}" alt="">
            <small><a class="avatar_uploader" href="javascript:void(0)">Change Avatar</a></small>

            {%endif%}
        </div>
    </div>

    <!-------------User Profil---->

    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="well well-sm">
            <div class="row">
                <div class="col-sm-6 col-md-8">
                    <h4>
                        {{firstname}} {{lastname}} </h4>
                    <p> Alter: {{age}}</p>
                    <p> Geschlecht: {{gender}}</p>
                    <p> Ort: {{place}}</p>
                    <p>
                        {% if not hideMails %}<i class="fas fa-envelope"></i>{{email}}{% endif %}
                        <br />
                        {% for comp in company %}
                        <i class="fas fa-briefcase"></i></i>{{comp.title}}
                        <br/>
                        {% endfor %}

                </div>
            </div>
        </div>
    </div>




</div>
</div>


<style>


    body{padding-top:30px;}

    .glyphicon {  margin-bottom: 10px;margin-right: 10px;}

    small {
        display: block;
        line-height: 1.428571429;
        color: #999;
    }
</style>