<div>
    <div class="{% if showBorder %}border{% endif %} p-3 h-100 d-flex flex-column justify-content-between ">
        {% if avatarMode == "image" %}
            <div class="avatar-img m-auto w-50 ">
                <img src="{% if avatar.image_url is not empty %}{{avatar.image_url}}{% else %}{{defaultimglink}}{% endif %}" alt="{{avatar.title}}" class="img-fluid"/>
            </div>
        {% elseif avatarMode == "gif" %}
            <div class="avatar-img my-auto">
                <img src="{% if avatar.gif_url is not empty %}{{avatar.gif_url}}{% endif %}" alt="{{avatar.title}}" class="img-fluid"/>
            </div>
        {% endif %}
        {% if showAvatarTitle %}
            <h4 class="text-center mb-4">{{avatar.title}}</h4>
        {% endif %}
        <input type="hidden" id="select-avatar-id" value="{{avatar.id}}">
        {% if editAvatarURL is not empty %}
            <a href="{{editAvatarURL}}" class="btn btn-secondary mx-auto col-sm-8 col-md-6 hyphens-auto" id="edit-avatar-button"><i class="fas fa-pen mr-2"></i>bearbeiten</a> 
        {% endif %}
    </div>
</div>