<div style="margin: 0px 5%; padding: 10px; border: 2px solid {{ style.frameColor }}; margin-bottom:10px; position:relative;">
<div style="position: absolute; top: 4px; right: 4px;">
    <a href="x-kmail:/bodypart/0//semanticAction">{% icon "view-calendar" small _("Add reservation to calendar.") %}</a>
</div>
{% for elem in data %}
    {% with elem.reservations.0.reservation as res %}
    {% with elem.reservations.0.reservation.reservationFor as trip %}
    {% if res.className == "FlightReservation" %}
        {% include ":/org.kde.messageviewer/semantic/flightreservation.html" %}
    {% elif res.className == "LodgingReservation" %}
        {% include ":/org.kde.messageviewer/semantic/lodgingreservation.html" %}
    {% elif res.className == "TrainReservation" %}
        {% include ":/org.kde.messageviewer/semantic/trainreservation.html" %}
    {% elif res.className == "BusReservation" %}
        {% include ":/org.kde.messageviewer/semantic/busreservation.html" %}
    {% elif res.className == "EventReservation" %}
        {% include ":/org.kde.messageviewer/semantic/event.html" %}
    {% elif res.className == "FoodEstablishmentReservation" %}
        {% include ":/org.kde.messageviewer/semantic/foodestablishmentreservation.html" %}
    {% elif res.className == "RentalCarReservation" %}
        {% include ":/org.kde.messageviewer/semantic/rentalcarreservation.html" %}
    {% elif res.className == "TaxiReservation" %}
        {% include ":/org.kde.messageviewer/semantic/taxireservation.html" %}
    {% endif %}

    {% if not forloop.last %}
        <hr/>
    {% endif %}
    {% endwith %}
    {% endwith %}
{% endfor %}
</div>
