{# Order Top Summary #}
<!-- Summary -->
<tr>
    <td colspan="3">
        <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"
               bgcolor="#fff" style="{{ order_section_styles }} {{ font_family }}margin:0 auto;"
        >
            <tr>
                <td>
                    <table width="{{ inner_wrapper_width }}" align="center" border="0" cellspacing="0"
                           cellpadding="0" style="{{ font_family }}margin:0 auto;"
                    >

                        <tr>
                            <td height="30"></td>
                        </tr>

                        <tr>
                            <td class="twoColumn" style="text-align: left;font-size: 0;">



                                <!--[if (gte mso 9)|(IE)]>
                                </td>
                                <td width="50%" valign="top">
                                <![endif]-->

                                <div class="column"
                                     style="width: 50%;max-width:320px;display:inline-block;vertical-align:top;"
                                >
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>
                                                <table width="100%" align="center" border="0" cellspacing="0"
                                                       cellpadding="0" style="{{ main_body_text }}margin:0 auto;"
                                                >

                                                    <tr>
                                                        <td>
                                                            <p style="{{ text_reset }}">
                                                                Your order will be delivered to:
                                                            </p>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td height="10"></td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <p style="{{ small_body_text }}line-height:19px;">
                                                                <strong>
                                                                    {{ order.address.shipping.title ~ ' ' ~
                                                                    order.address.shipping.firstname ~ ' ' ~
                                                                    order.address.shipping.lastname }}
                                                                </strong>

                                                                <br />

                                                                {% if order.info['email'] is not empty %}
                                                                    <a href="mailto:{{ order.info['email'] }}" style="{{ link_styles }}font-weight:bold;">{{ order.info['email'] }}</a>
                                                                    <br />
                                                                {% endif %}

                                                                {{ order.address.shipping.address1 }}

                                                                <br />

                                                                {% if order.address.shipping.address2 is not empty %}
                                                                    {{ order.address.shipping.address2 }}
                                                                    <br />
                                                                {% endif %}

                                                                {% if state_list[order.address.shipping.country] is defined %}
                                                                    {{ state_list[order.address.shipping.country][order.address.shipping.state] }}
                                                                    <br />
                                                                {% endif %}

                                                                {{ countries[order.address.shipping.country] }}

                                                                <br />

                                                                {{ order.address.shipping.postcode }}
                                                            </p>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td height="30"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <!--[if (gte mso 9)|(IE)]>
                                        </td>
                                    </tr>
                                </table>
                                <![endif]-->

                                <!--[if (gte mso 9)|(IE)]>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="50%" valign="top">
                                <![endif]-->

                                <div class="column"
                                     style="width: 50%;max-width:320px;display:inline-block;vertical-align:top;"
                                >
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>
                                                <table width="100%" align="center" border="0" cellspacing="0"
                                                       cellpadding="0" style="{{ main_body_text }}margin:0 auto; text-align: right;"
                                                >

                                                    <tr>
                                                        <td>
                                                            <p style="{{ text_reset }}">
                                                                Order number:
                                                                <a href="" style="{{ link_styles }}">
                                                                    <strong>
                                                                        #{{ order.id }}
                                                                    </strong>
                                                                </a>
                                                            </p>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td height="30"></td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <table width="58%" align="left" border="0" cellspacing="0"
                                                                   cellpadding="0" style="{{ small_body_text }} text-align: right; float: right;"
                                                            >
                                                                <tr>
                                                                    <td align="left" style="padding-right:20px;">
                                                                        <p style="{{ text_reset }}">
                                                                            Subtotal
                                                                        </p>
                                                                    </td>

                                                                    <td align="right">
                                                                        <p style="{{ text_reset }}">
                                                                            {{ order_subtotal|currency_format(2) }}
                                                                        </p>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td height="5"></td>
                                                                </tr>

                                                                {% if settings.COUPON_ENABLED and order.coupon_deduct is not empty %}

                                                                    <tr>
                                                                        <td align="left">
                                                                            <p style="{{ text_reset }}">
                                                                                Coupon Discount
                                                                            </p>
                                                                        </td>

                                                                        <td align="right">
                                                                            <p style="{{ text_reset }}">
                                                                                {{ order.coupon_deduct|currency_format(2) }}
                                                                            </p>
                                                                        </td>
                                                                    </tr>

                                                                    <tr>
                                                                        <td height="5"></td>
                                                                    </tr>

                                                                {% endif %}

                                                                <tr>
                                                                    <td align="left">
                                                                        <p style="{{ text_reset }}">
                                                                            Delivery
                                                                        </p>
                                                                    </td>

                                                                    <td align="right">
                                                                        <p style="{{ text_reset }}">
                                                                            {% if delivery_cost > 0 %}
                                                                                {{ delivery_cost|currency_format(2) }}
                                                                            {% else %}
                                                                                FREE
                                                                            {% endif %}
                                                                        </p>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td height="15"></td>
                                                                </tr>

                                                                <tr>
                                                                    <td align="left" style="{{ total_text }}">
                                                                        <p style="{{ text_reset }}">
                                                                            <strong>
                                                                                Total
                                                                            </strong>
                                                                        </p>
                                                                    </td>

                                                                    <td align="right" style="{{ total_text }}">
                                                                        <p style="{{ text_reset }}">
                                                                            <strong>
                                                                                {{ order_total|currency_format(2) }}
                                                                            </strong>
                                                                        </p>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td height="30"></td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

<tr>
    <td colspan="3" height="40"></td>
</tr>

{# Order items #}

<tr>
    <td colspan="3" width="100%" align="center">
        <table width="{{ inner_wrapper_width }}" align="center" border="0" cellspacing="0"
                        cellpadding="0" style="{{ font_family }}{{ main_body_text }}margin:0 auto;{{ separator }}"
            >

            {% for line_item in line_items %}

                <tr>
                    {% if line_item.item_image is not empty %}
                        <td class="itemImage" align="left" width="72" height="60" colspan="1">
                            <img src="{{ line_item.item_image }}" alt="{{ item.name|striptags }}"
                                 style="{{ image_reset }}" width="60" height="60">
                        </td>
                    {% endif %}

                    <td align="left" colspan="3">
                        <p style="{{ link_styles }}font-size:14px;{{ text_reset }}{% if line_item.refund_amount > 0 %}color:#CCC;{% endif %}">
                            <strong>
                                {{ line_item.item_name }}

                                {# Load item additionals #}
                                {% if line_item.additional %}
                                    {% for addition in line_item.additional %}
                                        {% if addition.template is not empty %}
                                            {% include addition.template with addition.options %}
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            </strong>
                        </p>

                        <p style="{{ small_body_text }}{{ text_reset }}{% if line_item.refund_amount > 0 %}color:#CCC;{% endif %}">
                            <strong>

                                {% if line_item.size is not empty %}
                                    {{ line_item.size }}
                                {% endif %}

                                {% if line_item.colour is not empty %}
                                    {{ line_item.colour }}
                                {% endif %}

                                {% if line_item.epos_code is not empty %}
                                    {{ line_item.epos_code }}
                                {% endif %}


                                Qty x{{ line_item.quantity }}
                            </strong>
                        </p>
                        {% if line_item.refund_amount > 0 %}
                            <p style="{{ small_body_text }}{{ text_reset }} color:#F00; font-weight: bold;">
                                REFUNDED
                            </p>
                        {% endif %}
                    </td>

                    <td align="right" colspan="1">
                        <p style="{{ text_reset }}{% if line_item.refund_amount > 0 %}color:#CCC;{% endif %}">
                            <strong>
                                {{ line_item.line_total|currency_format(2) }}
                            </strong>
                        </p>
                    </td>
                </tr>

                {% if not loop.last %}
                    <tr>
                        <td height="20"></td>
                    </tr>
                {% endif %}

            {% endfor %}

            <tr>
                <td height="30"></td>
            </tr>
        </table>
    </td>
</tr>

<tr>
    <td colspan="3" height="25"></td>
</tr>

{# After Order Items Summary #}

<tr>
    <td colspan="3">
        <table width="100%" align="center" border="0" cellspacing="0"
               cellpadding="0" style="{{ font_family }}{{ main_body_text }}margin:0 auto;"
        >
            <tr>

                <td>
                    <table width="{{ inner_wrapper_width }}" align="center" border="0" cellspacing="0"
                           cellpadding="0" style="{{ font_family }}{{ main_body_text }}margin:0 auto;"
                    >
                        <tr>
                            <td align="right">
                                <table width="50%" align="right" border="0" cellspacing="0"
                                       cellpadding="0" style="{{ font_family }}{{ main_body_text }}"
                                >
                                    <tr>
                                        <td>
                                            <p style="{{ text_reset }}">
                                                Subtotal
                                            </p>
                                        </td>

                                        <td align="right">
                                            <p style="{{ text_reset }}">
                                                {{ order_subtotal|currency_format(2) }}
                                            </p>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td height="15"></td>
                                    </tr>

                                    {% if settings.COUPON_ENABLED and order.coupon_deduct is not empty %}
                                        <tr>
                                            <td>
                                                <p style="{{ text_reset }}">
                                                    Coupon Discount
                                                </p>
                                            </td>

                                            <td align="right">
                                                <p style="{{ text_reset }}">
                                                    {{ order.coupon_deduct|currency_format(2) }}
                                                </p>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td height="15"></td>
                                        </tr>
                                    {% endif %}

                                    <tr>
                                        <td>
                                            <p style="{{ text_reset }}">
                                                Delivery

                                                <br />

                                                <span style="font-size:12px;">
                                                    {% if order.coupon_freedelivery %}
                                                        FREE
                                                    {% else %}
                                                        {{ delivery_name }}
                                                    {% endif %}
                                                </span>
                                            </p>
                                        </td>

                                        <td align="right">
                                            <p style="{{ text_reset }}">
                                                {% if delivery_cost > 0 %}
                                                    {{ delivery_cost|currency_format(2) }}
                                                {% else %}
                                                    FREE
                                                {% endif %}
                                            </p>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td height="15"></td>
                                    </tr>

                                    {% if settings.BASKET_SHOW_VAT %}
                                        <tr>
                                            <td>
                                                <p style="{{ text_reset }}">
                                                    VAT {% if order.type is not empty %} (inclusive) {% endif %} at
                                                    {{ settings.VAT_RATE}}%
                                                </p>
                                            </td>

                                            <td align="right">
                                                <p style="{{ text_reset }}">
                                                    {% if vat_cost > 0 %}
                                                        {{ vat_cost|currency_format(2) }}
                                                    {% else %}
                                                        NO VAT
                                                    {% endif %}
                                                </p>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td height="15"></td>
                                        </tr>
                                    {% endif %}
                                    {% if order.refundAmount > 0 %}

                                        <tr>
                                            <td>
                                                <p style="{{ text_reset }} color:#F00;">
                                                    Amount Refunded
                                                </p>
                                            </td>

                                            <td align="right">
                                                <p style="{{ text_reset }} color:#F00;">
                                                    -{{ order.refundAmount|currency_format(2) }}
                                                </p>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td height="15"></td>
                                        </tr>
                                    {% endif %}

                                    <tr>
                                        <td style="{{ total_text }}">
                                            <p style="{{ text_reset }}">
                                                <strong>
                                                    Total
                                                </strong>
                                            </p>
                                        </td>

                                        <td align="right" style="{{ total_text }}">
                                            <p style="{{ text_reset }}">
                                                <strong>
                                                    {% if order.refundAmount > 0 %}
                                                        {{ (order_total - order.refundAmount)|currency_format(2) }}
                                                    {% else %}
                                                        {{ order_total|currency_format(2) }}
                                                    {% endif %}
                                                </strong>
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

<tr>
    <td colspan="3" height="40"></td>
</tr>


{# Order Bottom Information #}

</table>



<table
        width="100%"
        align="center"
        border="0"
        cellspacing="0"
        bgcolor="{{ light_background_color }}"
        cellpadding="0"
        style="{{ font_family }}{{ small_body_text }}"
>
    <tr>
        <td height="30"></td>
    </tr>

    <tr>
        <td>
            <table width="656" align="center" border="0" cellspacing="0" style="margin:0 auto;">
                <tr>
                    <td class="threeColumn" style="text-align: left;font-size: 0;">

                        <!--[if (gte mso 9)|(IE)]>
                        <table width="100%">
                            <tr>
                                <td width="170" valign="top">
                        <![endif]-->

                        <div class="column" style="width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
                            <table width="170" align="left" border="0" cellspacing="0"
                                   cellpadding="0" style="{{ font_family }}{{ main_body_text }}margin:0 auto;"
                            >
                                <tr>
                                    <td>
                                        <p style="{{ text_reset }}font-size:14px;">
                                            Delivery information
                                        </p>
                                    </td>
                                </tr>

                                <tr>
                                    <td height="20"></td>
                                </tr>

                                <tr>
                                    <td style="{{ small_body_text }}padding-right:15px;">
                                        <p style="{{ text_reset }}">
                                            For more information about delivery estimates please visit our
                                            <a href="{{ settings.SITE_URL }}/customer-care/delivery/" style="{{ link_styles }}"><strong>Delivery Information</strong></a> page
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </div> <!-- .column -->

                        <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="170" valign="top">
                        <![endif]-->

                        <div class="column" style="width: 100%;max-width: 200px;display: inline-block;vertical-align: top;">
                            <table width="170" align="left" border="0" cellspacing="0"
                                   cellpadding="0" style="{{ font_family }}{{ main_body_text }}margin:0 auto;"
                            >
                                <tr>
                                    <td height="40"></td>
                                </tr>

                                <tr>
                                    <td style="{{ small_body_text }}">
                                        <p style="{{ text_reset }}">
                                            During bank holidays please add <strong>2 working days</strong>
                                            to your order dispatch time.
                                        </p>
                                    </td>
                                </tr>

                                <tr>
                                    <td height="35"></td>
                                </tr>
                            </table>
                        </div> <!-- .column -->

                        <!--[if (gte mso 9)|(IE)]>
                        </td>
                        <td width="170" valign="top">
                        <![endif]-->

                        <div class="column" style="width: 100%;max-width: 170px;display: inline-block;vertical-align: top;">
                            <table width="170" align="left" border="0" cellspacing="0"
                                   cellpadding="0" style="{{ font_family }}{{ main_body_text }}margin:0 auto;"
                            >
                                <tr>
                                    <td>
                                        <p style="{{ text_reset }}font-size:14px;">
                                            Any Questions?
                                        </p>
                                    </td>
                                </tr>

                                <tr>
                                    <td height="20"></td>
                                </tr>

                                <tr>
                                    <td style="{{ small_body_text }}">
                                        <p style="{{ text_reset }}">
                                            Or if you have any questions please
                                            <a href="{{ settings.SITE_URL }}/contact/"
                                               style="{{ link_styles }}"><strong>Contact Us</strong>
                                            </a> and we'll be happy to help!
                                        </p>
                                    </td>
                                </tr>

                                <tr>
                                    <td height="35"></td>
                                </tr>
                            </table>
                        </div> <!-- .column -->

                        <!--[if (gte mso 9)|(IE)]>
                                </td>
                            </tr>
                        </table>
                        <![endif]-->

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table>

