<div class="tsp-avatar-over">
    <div class="tsp-avatar-mail">
        {% if not hideMails %}<span><b>{{user.user_email}}</b></span><br>{% endif %}
        <a href="{{profilurl}}">Profil</a><br><br>
    </div>
    <div class="tsp-avatar-img">
        <div class="tsp-avatar-img-border">
                {{avatarimg | raw}}
        </div>
    </div>
    <div class="tsp-avatar-body">
        {% if training.id != "" %} 
            <span>Aktuelles Training:</span>
            <a class="" href="
                                {% if training.url is empty %}
                                {{defaultimglink}}
                                {% else %}
                                {{training.url}}
                                {% endif %}">{{training.title}}</a><br><br>
                <span>Lektionen:</span>


                <ul class="list-group list-group-flush">
                    {% for lektion in training.lektionsliste %}
                    <li class="list-group-item  {% if lektion.id == tlektion.id %}disabled{% endif %}"> 
                        <a href="{{lektion.firstPageUrl}}">{{lektion.title}}</a>
                        <span class="badge badge-primary badge-pill">{{lektion.fin}}%</span>
                    </li>
                    {% endfor %}
                </ul>
            {% endif %}




            <div class="tsp-avatar-logout">
                    <a href="{{logouturl}}">abmelden</a>
                </div>

            
    </div>
    
</div>

<style>

.tsp-avatar-over .tsp-avatar-mail{
    width: 130px;
    float: left;
    display: none;
}
.tsp-avatar-logout{
    width: 220px;
}

    
.tsp-avatar-over .tsp-avatar-img{
    background-color: unset;
    float: left;
}

.tsp-avatar-over .tsp-avatar-img:hover{
    background-color: black;
}

.tsp-avatar-over .tsp-avatar-img img{
    margin: 3px;
    margin-bottom:unset;
}

.tsp-avatar-current-lektion {
    background-color: lightgray;
}

.tsp-avatar-over .tsp-avatar-body{
    float: left;
    display: none;
}

.tsp-avatar-over{
    /*width: 200px;*/
    width:50px;
    position: absolute;
    position: fixed;
    z-index: 999999999;
    background-color: white;
    border: black;
    box-shadow: 10px 10px 35px -10px rgba(0,0,0,0.75);
    background-color: #ffffff99;
    padding: 10px;
    display: inline-block;
    {% if display == 0 %}
    top: 10vh;
    {% elseif display == 1 %}
    bottom: 10vh;
    {% elseif display == 3 %}
    bottom: 10vh;
    right: 0;
    {% else %}
    top: 10vh;
    right: 0;
    {% endif %}
}

</style>

<script>
    var showfull=false;
    jQuery(".tsp-avatar-over .tsp-avatar-img").click(function(){
        showfull = !showfull;
        if(showfull){
            jQuery(".tsp-avatar-over").css("width","250px");
            jQuery(".tsp-avatar-over .tsp-avatar-body, .tsp-avatar-over .tsp-avatar-mail").css("display","block");
        }else{
            jQuery(".tsp-avatar-over").css("width","50px");
            jQuery(".tsp-avatar-over .tsp-avatar-body, .tsp-avatar-over .tsp-avatar-mail").css("display","none");
        }
    });






    var box = jQuery('.tsp-avatar-over');

/*box.offset({
    rigth: 10,
    top: 75
});*/

var drag = {
    elem: null,
    x: 0,
    y: 0,
    state: false
};
var delta = {
    x: 0,
    y: 0
};

box.mousedown(function(e) {
    if (!drag.state) {
        drag.elem = this;
        //this.style.backgroundColor = '#f00';
        drag.x = e.pageX;
        drag.y = e.pageY;
        drag.state = true;
    }
    return false;
});


jQuery(document).mousemove(function(e) {
    if (drag.state) {
        //drag.elem.style.backgroundColor = '#f0f';

        delta.x = e.pageX - drag.x;
        delta.y = e.pageY - drag.y;

        //jQuery('#log').text(e.pageX + ' ' + e.pageY + ' ' + delta.x + ' ' + delta.y);

        var cur_offset = jQuery(drag.elem).offset();

        jQuery(drag.elem).offset({
            left: (cur_offset.left + delta.x),
            top: (cur_offset.top + delta.y)
        });

        drag.x = e.pageX;
        drag.y = e.pageY;
    }
});

jQuery(document).mouseup(function() {
    if (drag.state) {
        //drag.elem.style.backgroundColor = '#808';
        drag.state = false;
    }
});

</script>