<style type="text/css">
/** all values taken from the Breeze QStyle */
a.itineraryButton {
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 0px 1px 1px 0px;
    display:inline-block !important;
    cursor: default;
    user-select: none;
    vertical-align: top;
}
a.itineraryButton span {
    border-radius:2px;
    border: 1px solid;
    border-color:{% colorMix style.palette.button style.palette.buttonText 0.3 %};
    background: linear-gradient({{ style.palette.button|colorLighter:101|colorHexRgb }}, {{ style.palette.button|colorDarker:103|colorHexRgb }});
    padding: 6px;
    box-shadow: 1px 1px 1px {{ style.palette.shadow|colorSetAlpha:38|colorCssRgba }};
    color:{{ style.palette.buttonText|colorHexRgb }};
}
a.itineraryButton span img {
    vertical-align: sub;
    display:inline-block !important;
}
a.itineraryButton:hover span {
    border-color: {% colorMix style.viewScheme.hoverColor palette.buttonText 0.15 %};
}
a.itineraryButton:active span {
    {% colorMix style.palette.button style.palette.buttonText 0.2 as activeButtonBackground %}
    background: linear-gradient({{ activeButtonBackground|colorLighter:101|colorHexRgb }}, {{ activeButtonBackground|colorDarker:103|colorHexRgb }});
}
a.itineraryButton:active {
    padding: 1px 0px 0px 1px;
}
</style>
<div class="inlineMessageInformation" style="position:relative;">
{% 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/itinerary/flightreservation.html" %}
    {% elif res.className == "LodgingReservation" %}
        {% include "org.kde.messageviewer/itinerary/lodgingreservation.html" %}
    {% elif res.className == "TrainReservation" %}
        {% include "org.kde.messageviewer/itinerary/trainreservation.html" %}
    {% elif res.className == "BusReservation" %}
        {% include "org.kde.messageviewer/itinerary/busreservation.html" %}
    {% elif res.className == "BoatReservation" %}
        {% include "org.kde.messageviewer/itinerary/boatreservation.html" %}
    {% elif res.className == "EventReservation" %}
        {% include "org.kde.messageviewer/itinerary/event.html" %}
    {% elif res.className == "FoodEstablishmentReservation" %}
        {% include "org.kde.messageviewer/itinerary/foodestablishmentreservation.html" %}
    {% elif res.className == "RentalCarReservation" %}
        {% include "org.kde.messageviewer/itinerary/rentalcarreservation.html" %}
    {% elif res.className == "TaxiReservation" %}
        {% include "org.kde.messageviewer/itinerary/taxireservation.html" %}
    {% endif %}

    <hr/>
    {% endwith %}
    {% endwith %}
{% endfor %}
<div style="text-align:right">
    {% if actionState.canShowCalendar %}
        <a href="x-kmail:/bodypart/0//showCalendar" class="itineraryButton" draggable="false"><span>{% icon "view-calendar" small %}{% i18n "Show Calendar" %}</span></a>
    {% endif %}
    {% if actionState.canAddToCalendar %}
        <a href="x-kmail:/bodypart/0//addToCalendar" class="itineraryButton" draggable="false"><span>{% icon "appointment-new" small %}{% i18n "Add to Calendar" %}</span></a>
    {% endif %}
    {% if actionState.hasItineraryApp %}
        <a href="x-kmail:/bodypart/0//import" class="itineraryButton" draggable="false"><span>{% icon "map-globe" small %}{% i18n "Add to KDE Itinerary" %}</span></a>
    {% endif %}
    {% if actionState.canSendToDevice %}
        {% if actionState.defaultDeviceName %}
            <a href="x-kmail:/bodypart/0//sendToDevice-{{ actionState.defaultDeviceId }}" class="itineraryButton" draggable="false"><span>{% icon "kdeconnect" small %}{% i18n "Send to %1" actionState.defaultDeviceName %}</span></a>
        {% else %}
            <a href="x-kmail:/bodypart/0//sendToDeviceList" class="itineraryButton" draggable="false"><span>{% icon "kdeconnect" small %}{% i18n "Send to Device..." %}</span></a>
        {% endif %}
    {% endif %}
</div>
</div>
