{% for subOrder in subOrders %}
<div style="margin-bottom: 20px;">
    <h2>{{ subOrder.orderNr }}</h2>
    <table style="font-family: Arial, Helvetica, sans-serif;max-width: 750px; width: 100%; border-collapse: collapse;">
        <thead>
        <tr>
            <th style="text-align: left;
        border-bottom: 1px solid #eee;
        padding: 15px;">{{ 'Produkt' | trans }}</th>
            <th style="text-align: left;
        border-bottom: 1px solid #eee;
        padding: 15px;">{{ 'Storlek' | trans }}</th>
            <th style="text-align: right;
        border-bottom: 1px solid #eee;
        padding: 15px;">{{ 'Antal' | trans }}</th>
        </tr>
        </thead>
        <tbody>
        {% for item in subOrder.items %}
            <tr>
                <td style="text-align: left;
        border-bottom: 1px solid #eee;
        padding: 15px;">
                    {{ item.productName }}
                    <br/>{{ item.productSku }}
                    {% set texts = item.getArrayTexts() %}
                    {% if texts is not empty %}
                        {% for text in texts %}
                            <br/>- <span style="font-size: 8px;">{{ text | raw }}</span>
                        {% endfor %}
                    {% endif %}
                    {% if item.addOnText is not empty %}
                        <br/>- <span style="font-size: 8px;">{{ item.addOnText | raw }}</span>
                    {% endif %}
                </td>
                <td style="text-align: left;
        border-bottom: 1px solid #eee;
        padding: 15px;">{{ item.productSizeText }}</td>
                <td style="text-align: right;
        border-bottom: 1px solid #eee;
        padding: 15px;">{{ item.quantity }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endfor %}