<table style="width:100%;">
    <tr>
        <td style="font-size:120%; width:33;">
            {{ trip.departureBusStop.name }}
            {% if trip.departurePlatform %}
                [{{ trip.departurePlatform }}]
            {% endif %}
            {% with trip.departureBusStop as location %}{% include "org.kde.messageviewer/itinerary/location.html" %}{% endwith %}
        </td>
        <td style="font-size:120%; width:33%; text-align:center;">
        {% if elem.reservations.0.reservation.reservationStatus == 1 %}
            {% icon "dialog-cancel" sizesmallmedium _("Reservation canceled.") %}
        {% else %}
            &rarr;
        {% endif %}
        </td>
        <td style="font-size:120%; width:33%;">
            {{ trip.arrivalBusStop.name }}
            {% if trip.arrivalPlatform %}
                [{{ trip.arrivalPlatform }}]
            {% endif %}
            {% with trip.arrivalBusStop as location %}{% include "org.kde.messageviewer/itinerary/location.html" %}{% endwith %}
        </td>
    </tr>
    <tr>
        <td>{{ trip.departureTime|formatDateTime }}</td>
        <td style="white-space: nowrap; text-align:center;">
            {% if trip.busName and trip.busNumber %}
                {{ trip.busName }} <br> {{ trip.busNumber }}
            {% else %}
                {{ trip.busName }} {{ trip.busNumber }}
            {% endif %}
        </td>
        <td>{{ trip.arrivalTime|formatDateTime }}</td>
    </tr>
    <tr><td colspan="3">
        <div style="float:left">
        {% if elem.reservations.0.ticketToken %}
            <a href="x-kmail:/bodypart/0//semanticExpand?{{ forloop.counter0 }}">
            {% if elem.state.expanded %}
                <img src="{{ style.collapseIcon }}" style="margin-right: 4px;"/>
            {% else %}
                <img src="{{ style.expandIcon }}" style="margin-right: 4px;"/>
            {% endif %}
            </a>
        {% endif %}

        {% if res.reservedTicket.ticketedSeat.seatNumber %}
            {% i18n "Seat: %1" res.reservedTicket.ticketedSeat.seatNumber %}
        {% endif %}
        </div>
        {% include "org.kde.messageviewer/itinerary/actions.html" %}
    </td></tr>
</table>

{% if elem.state.expanded %}
    <div style="text-align:center;">
        <div style="background-color: #ffffff; display: inline-block; padding: 4px;">
        <img src="{{ elem.reservations.0.ticketToken }}"/>
        </div>
    </div>
{% endif %}
