<a name="att{{block.attachmentIndex}}"></a>
<div id="attachmentDiv{{block.attachmentIndex}}">

<div style="
    background-color: {{ pass.backgroundColorName }};
    color: {{ pass.foregroundColorName }};
    padding:12px;
    border-radius:10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 332px;
">
<!-- header -->
<div>
    <table style="border-collapse: collapse;">
        <tr>
            <td rowspan="2" style="vertical-align:center;">
            {% if pass.logoUrl %}
                <img src="{{ pass.logoUrl }}" style="max-width:160px; max-height:50px;"/>
            {% endif %}
            </td>
            <td rowspan="2" style="vertical-align:center; font-size:150%; font-weight:bold; width:100%;">{{ pass.logoText }}</td>
        {% for field in pass.headerFields %}
            <td style="white-space: nowrap; color: {{ pass.labelColorName }}; padding-bottom:0px;">{{ field.label }}</td>
        {% endfor %}
        </tr><tr>
        {% for field in pass.headerFields %}
            <td style="font-size: 150%; padding-top:0px;">{{ field.valueDisplayString }}</td>
        {% endfor %}
        </tr>
    </table>
</div>
<!-- primary fields -->
<hr/>
<div>
    <table style="width:100%; border-collapse: collapse;">
        <tr>
            <td style="width:50%; white-space: nowrap; color: {{ pass.labelColorName }}; padding-bottom:0px;">{{ pass.primaryFields.0.label }}</td>
            <td></td>
            <td style="width:50%; white-space: nowrap; text-align:right; color: {{ pass.labelColorName }}; padding-bottom:0px;">{{ pass.primaryFields.1.label }}</td>
        </tr><tr style="font-size: 200%;">
            <td style="vertical-align:top; padding-top:0px;">{{ pass.primaryFields.0.valueDisplayString }}</td>
            <td style="color: {{ pass.labelColorName }}; padding-top:0px;">
                {% if pass.transitType == pass.Air %}
                    &#9992;
                {% elif pass.transitType == pass.Bus %} <!-- the Unicode characters for the other transport type are not widely available -->
                    &rarr;
                {% elif pass.transitType == pass.Boat %}
                    &rarr;
                {% elif pass.transitType == pass.Train %}
                    &rarr;
                {% else %}
                    &rarr;
                {% endif %}
            </td>
            <td style="text-align:right; vertical-align:top; padding-top:0px;">{{ pass.primaryFields.1.valueDisplayString }}</td>
        </tr>
    </table>
</div>
<!-- auxiliaryFields fields -->
<div style="padding-top:4px;">
    <table style="width:100%; border-collapse: collapse;">
        <tr>
        {% for field in pass.auxiliaryFields %}
            <td style="white-space: nowrap; color: {{ pass.labelColorName }}; padding-bottom:0px;{% if field.textAlignment == 2 %}text-align:right;{% endif %}">{{ field.label }}</td>
        {% endfor %}
        </tr><tr style="font-size: 150%;">
        {% for field in pass.auxiliaryFields %}
            <td style="vertical-align:top; padding-top:0px;{% if field.textAlignment == 2 %}text-align:right;{% endif %}">{{ field.valueDisplayString }}</td>
        {% endfor %}
        </tr>
    </table>
</div>
<!-- secondary fields -->
<div style="padding-top:4px;">
    <table style="width:100%; border-collapse: collapse;">
        <tr>
        {% for field in pass.secondaryFields %}
            <td style="white-space: nowrap; color: {{ pass.labelColorName }}; padding-bottom:0px;{% if field.textAlignment == 2 %}text-align:right;{% endif %}">{{ field.label }}</td>
        {% endfor %}
        </tr><tr style="font-size: 150%;">
        {% for field in pass.secondaryFields %}
            <td style="vertical-align:top; padding-top:0px;{% if field.textAlignment == 2 %}text-align:right;{% endif %}">{{ field.valueDisplayString }}</td>
        {% endfor %}
        </tr>
    </table>
</div>
<!-- footer -->
{% if pass.footerUrl %}
<div style="margin-top: 10px;">
    <center><img src="{{ pass.footerUrl }}" style="max-width: 100%;"/></center>
</div>
{% endif %}
<!-- barcode -->
{% include "org.kde.messageviewer/pkpass/barcode.html" %}
<!-- back fields -->
<hr/>
{% for field in pass.backFields %}
    <div style="color: {{ pass.labelColorName }};">{{ field.label }}</div>
    <div>{{ field.valueDisplayString|safe|linebreaksbr }}</div>
{% endfor %}
</div> <!-- boarding pass -->

</div> <!-- attachment container -->
