{% for event, formatted_description in events %}
    <div class="card-body col-md-6">
        <div class="card bg-light mb-3">
            <div class="card-header bg-success text-white">
                <h2 class="card-title">{{ event.title }}</h2>
            </div>
            <div class="card-body bg-secondary">
                <p class="card-text"><strong>Datum Start:</strong> {{ event.date_start }}</p>
                <p class="card-text"><strong>Datum End:</strong> {{ event.date_end }}</p>
                <p class="card-text"><strong>Ort:</strong> {{ event.location }}</p>
                <p class="card-text"><strong>Beschreibung:</strong> <br><br> {{ formatted_description|safe }}</p>
            </div>
        </div>
    </div>
{% endfor %}

<div class="pagination mb-3 px-2">
    {% if events.has_previous %}
        <a href="#" onclick="loadEvents('future', {{ events.previous_page_number }})" class="btn btn-primary me-2">Previous</a>
    {% endif %}
    {% if events.has_next %}
        <a href="#" onclick="loadEvents('future', {{ events.next_page_number }})" class="btn btn-primary">Next</a>
    {% endif %}
</div>
