<table style="width:100%;">
    <tr>
        {% if trip.departureAirport.iataCode %}
            <td style="font-size:200%; width:33%;" title="{{ trip.departureAirport.name }}">
            {{ trip.departureAirport.iataCode }}
            </td>
        {% else %}
            <td style="font-size:120%; width:33%;">{{ trip.departureAirport.name }}</td>
        {% endif %}
        <td style="font-size:200%; width:33%; text-align:center;">&#9992;</td>
        {% if trip.arrivalAirport.iataCode %}
            <td style="font-size:200%; width:33%;" title="{{ trip.arrivalAirport.name }}">
            {{ trip.arrivalAirport.iataCode }}
            </td>
        {% else %}
            <td style="font-size:120%; width:33%;">{{ trip.arrivalAirport.name }}</td>
        {% endif %}
    </tr>
    <tr>
        <td>{{ trip.departureTime|formatDateTime }}</td>
        <td style="white-space: nowrap; text-align:center;" title="{{ trip.airline.name }}">{{ trip.airline.iataCode }} {{ trip.flightNumber }}</td>
        <td>{{ trip.arrivalTime|formatDateTime }}</td>
    </tr>
    <tr><td colspan="3">
        <div style="float:left">
        {% if elem.reservations.0.ticketToken or elem.reservations.size > 1 %}
            <a href="x-kmail:/bodypart/0//semanticExpand?{{ elem.groupId }}">
            {% 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 trip.departureGate %}
            {% i18n "Gate: %1" trip.departureGate %}
        {% endif %}

        {% if trip.boardingTime %}
            {% i18n "Boarding: %1" trip.boardingTime|formatTime %}
        {% endif %}

        {% if res.boardingGroup and elem.reservations.size == 1 and not elem.state.expanded %}
            {% i18n "Group: %1" res.boardingGroup %}
        {% endif %}

        {% if res.airplaneSeat and elem.reservations.size == 1 and not elem.state.expanded %}
            {% i18n "Seat: %1" res.airplaneSeat %}
        {% endif %}
        </div>
        {% if elem.reservations.size == 1 %}
            {% include ":/org.kde.messageviewer/semantic/actions.html" %}
        {% endif %}
    </td></tr>
</table>

{% if elem.state.expanded %}
    {% for d in elem.reservations %}
        {% with d.reservation as res %}
        {% if res.underName.name %}
            <div>{{ res.underName.name }}</div>
        {% endif %}
        <div>
        {% if res.boardingGroup %} {% i18n "Group: %1" res.boardingGroup %} {% endif %}
        {% if res.airplaneSeat %} {% i18n "Seat: %1" res.airplaneSeat %} {% endif %}
        </div>
        {% if d.ticketToken %}
            <div style="text-align:center;">
                <div style="background-color: #ffffff; display: inline-block; padding: 4px;">
                <img src="{{ d.ticketToken }}"/>
                </div>
            </div>
        {% endif %}
        {% if elem.reservations.size > 1 %}
            {% include ":/org.kde.messageviewer/semantic/actions.html" %}
        {% endif %}
        {% endwith %}
    {% endfor %}
{% endif %}
