<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 mb-5">
    <div class="{% if showBorder %}border {% if avatar.selected %}highlight-border-color border-3{% endif %}{% endif %} p-3 h-100 d-flex flex-column justify-content-between ">
        <div class="avatar-img my-auto">
            <img src="{% if avatar.image_url is not empty %}{{avatar.image_url}}{% else %}{{defaultimglink}}{% endif %}" alt="{{avatar.title}}" class="img-fluid"/>
        </div>
        {% if showAvatarTitle %}<h4 class="text-center mb-4">{{avatar.title}}</h4>{% endif %}
        <input type="hidden" id="select-avatar-id" value="{{avatar.id}}">
        <button class="btn btn-secondary mx-4" id="select-avatar-button" {% if avatar.selected %}disabled="disabled"{% endif %}>{% if avatar.selected %}ausgewählt {% else %} auswählen {% endif %}</button> 
    </div>
</div>