<div class="row">
    {% if title is not empty %}
        <div class="col-12">
            <h1 class="text-center mb-5">{{ title }}</h1>
        </div>
    {% endif %}
    <div class="col-12">
        {% if results is not empty %}
        <ul class="list-group ">
            {% for event in results %}
                <li class="list-group-item d-flex align-items-stretch">
                    <div class="header image col-2 flex-lg-shrink-1 px-0 d-flex align-items-center justify-content-start">
                        {% if event.isFontAwesome() %}
                        <div class="ts-fas-wrapper d-flex border border-dark">
                            <i class="h2 mb-0 m-auto  {{ event.fontAwesome }}"></i>
                        </div>
                        {% else %} 
                            <img src="{% if event.isImageUrl() %}{{ event.imageUrl }}{% else %}{{ defaultimage }}{% endif %}" class="image-responsive img-fluid">
                        {% endif %}
                    </div>
                    <div class="d-flex flex-column flex-grow-1 mx-2 justify-content-between w-100">
                        <div class="w-100">
                            <h6 class="mb-1 mt-0">{{ event.title|raw }}</h6>
                        </div>
                        {% if event.subtitle is not empty and not hidesubtitles %}
                            <p class="mb-1 w-100">{{ event.subtitle }}</p>
                        {% endif %}
                        <small class="text-muted w-100">{{ event.date|date("d.m.Y H:i") }} Uhr</small>
                    </div>
                    <div class="col-1 pr-0 d-flex align-items-stretch justify-content-end">
                        {% if event.url is not empty %}
                            <a href="{{ event.url }}" class="btn btn-secondary d-flex align-items-center justify-content-center my-auto" {% if newpage %}target="_blank"{% endif %}><i class="fas fa-share"></i></a>
                        {% endif %}
                    </div>
                </li>
            {% endfor %}
        </ul>
        {% else %}
            <div class="alert alert-info" role="alert">
                <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                <p>
                    Sie haben noch keine Aktivitäten.
                </p>
            </div>
        {% endif %}
    </div>
</div>