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

<div style="
    {% if pass.backgroundColorName %}
        background-color: {{ pass.backgroundColorName }};
    {% endif %}
    {% if pass.backgroundUrl %}
        background-image: url('{{ pass.backgroundUrl }}');
        background-repeat: repeat-y;
        background-position: center top;
    {% endif %}
    {% if pass.foregroundColorName %}
        color: {{ pass.foregroundColorName }};
    {% endif %}
    padding:12px;
    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:120%; 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: 120%; padding-top:0px;">{{ field.valueDisplayString }}</td>
        {% endfor %}
        </tr>
    </table>
</div>
<!-- strip image, if present -->
{% if pass.stripUrl %}
<div style="margin-top: 10px;">
    <center><img src="{{ pass.stripUrl }}" style="max-width: 100%;"/></center>
</div>
{% endif %}
<!-- primary fields TODO: in theory this should be on top of the strip image? -->
<div>
    <table style="width:100%; border-collapse: collapse;">
        <tr>
        {% for field in pass.primaryFields%}
            <td style="white-space: nowrap; color: {{ pass.labelColorName }}; padding-bottom:0px;">{{ field.label }}</td>
        {% endfor %}
        </tr><tr style="font-size: 120%;">
        {% for field in pass.primaryFields %}
            <td style="vertical-align:top; padding-top:0px;">{{ 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;">{{ field.label }}</td>
        {% endfor %}
        </tr><tr style="font-size: 120%;">
        {% for field in pass.secondaryFields %}
            <td style="vertical-align:top; padding-top:0px;">{{ field.valueDisplayString }}</td>
        {% endfor %}
        </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;">{{ field.label }}</td>
        {% endfor %}
        </tr><tr style="font-size: 120%;">
        {% for field in pass.auxiliaryFields %}
            <td style="vertical-align:top; padding-top:0px;">{{ field.valueDisplayString }}</td>
        {% endfor %}
        </tr>
    </table>
</div>
<!-- barcode -->
{% include "org.kde.messageviewer/pkpass/barcode.html" %}
<!-- footer -->
{% if pass.footerUrl %}
<div style="margin-top: 10px;">
    <center><img src="{{ pass.footerUrl }}"/></center>
</div>
{% endif %}
<!-- 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 -->
