<li class="d-sm-flex list-unstyled mb-4 {% if showBorder %}border {% if avatar.selected %}highlight-border-color{% endif %}{% endif %} p-2">
    <div class="row ">
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
            <img class="mb-0 mr-3 img-fluid"
                src="{% if avatar.image_url is not empty%}{{avatar.image_url}}{% else %}{{defaultimglink}}{% endif %}"
                alt="{{avatar.title}}" />
        </div>
        {% if showAvatarTitle %}
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 my-auto">
            <h4 class="mb-0 mt-0">{{avatar.title}}</h4>
        </div>
        {% endif %}
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 my-auto">
            <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>
</li>