

<style>
    table {
        border: none;
    }
    table td {
        padding: 5px;
        border: none;
    }

    table table td {
        border-bottom: 1px solid #d5d5d5;
    }
    table table tr.with-dosage td {
        border-bottom:0;
        padding-bottom:0;
    }
    p {
        margin-bottom: 3px;
    }

    p.dosage {
        font-size: 10px;
    }

    .fs12 {
        font-size: 12px;
        line-height: 14px;
    }

    .fs10 {
        font-size: 10px;
        line-height: 12px;
    }

    .fs9 {
        font-size: 9px;
        line-height: 11px;
    }

    .right {
        text-align: right;
    }

    .uppercase {
        text-transform: uppercase;
    }
</style>
<table cellspacing="0" border="0" width="100%">

    <tr>
        <td colspan="2" align="left " valign="middle" width="40%">
            <img src="{{ site_config.SITE_URL ~ site_config.THEME_PATH }}/images/logo.png" alt="{{ site_config.SITE_NAME }}" class="logo" style="margin:0;"/>
        </td>
        <td colspan="3" class="fs9 right">
            <span class="fs10" style="display: block;"><strong>Order Invoice:</strong> #{{ order.order_ref }}</span>
            <br>
            <strong>Date of Order:</strong> {{ order_date|date('d/m/y') }}
            <br>
            <strong>Shipping:</strong> {{ order.delivery.name }}

        </td>
    </tr>

    <tr>

        <td colspan="3" class="fs10" style="border: none; width: 25%; vertical-align: top;">
            <p><strong>Customer</strong></p>
            {% if order.info.email is not empty %}
                Email: <br/>
                {{ order.info.email }}<br>
            {% endif %}
            {% if order.info.contact_no is not empty %}
                Phone: <br/>
                {{ order.info.contact_no }}
            {% endif %}
        </td>

        <td colspan="2" class="fs10" style="border: none; width: 25%; vertical-align: top;" align="right">
            <p><strong>Shipping Info</strong></p>
            {{ order.address.shipping.title ~ ' ' ~ order.address.shipping.firstname ~ ' ' ~ order.address.shipping.lastname }}<br />
            {{ order.address.shipping.address1 }}
            {% if order.address.shipping.address2 is not empty %}
                {{ order.address.shipping.address2 }}<br />
            {% endif %}
            {{ order.address.shipping.city }}<br/>
            {% if order.address.shipping.state is not empty %}
                {{ order.address.shipping.state }}<br />
            {% endif %}
            {{ basket_countries[order.address.shipping.country] }}<br/>
            <span class="uppercase">{{ order.address.shipping.postcode }}</span><br/>
        </td>
    </tr>


    {% if order.info.message is not empty %}
        <tr>
            <td colspan="5">
                Message: {{ order.info.message }}<br>
            </td>
        </tr>
    {% endif %}

    <tr>
        <td style="border:none;padding:0;" colspan="5">

            <table class="totals" width="100%">
                <tr class="fs10">
                    <td width="30%" align="left" valign="middle">
                        <p>Product</p>
                    </td>
                    <td width="30%" align="left" valign="middle">
                        <p>Size / Option</p>
                    </td>

                    <td width="10%" valign="middle" align="center">
                        <p>Qty</p>
                    </td>

                    <td width="15%" valign="middle" align="center">
                        <p>Unit Cost</p>
                    </td>

                    <td width="15%" valign="middle" align="right">
                        <p>Price</p>
                    </td>
                </tr>
                {% for line_item in line_items %}
                    <tr class="fs10 {% if line_item.dosage is not empty %} with-dosage{% endif %} ">
                        <td>
                            <p>
                                {{ line_item.item_name }}
                            </p>
                        </td> <!-- / product -->
                        <td>
                            <p>{% if line_item.size is not empty %}
                                    {{ line_item.size }}{% if line_item.colour is not empty %} / {{ line_item.colour }}{% endif %}
                                {% endif %}
                            </p>
                        </td>

                        <td valign="middle" align="center">
                            <p>{{ line_item.quantity }}</p>
                        </td>

                        <td valign="middle" align="center">
                            <p>{{ line_item.item_price|currency_format() }}</p>
                        </td>

                        <td valign="middle" align="right">
                            <p>{{ line_item.line_total|currency_format() }}</p>
                        </td>

                    </tr>
                    {% if line_item.dosage is not empty %}
                        <tr>
                            <td colspan="5">
                                <p class="dosage">Dosage: {{ line_item.dosage }}</p>
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                <tr>
                    <td colspan="4" align="right"><strong class="fs12">Subtotal</strong></td>
                    <td align="right" class="fs12">{{ order.getSubtotalCost()|currency_format() }}</td>
                </tr>
                <tr>
                    <td colspan="4" align="right"><strong class="fs12">Delivery (incl. VAT)</strong></td>
                    <td align="right" class="fs12">{{ order.getDelivery().cost|currency_format() }}</td>
                </tr>
                <tr>
                    <td colspan="4" align="right"><strong class="fs12">VAT</strong></td>
                    <td align="right" class="fs12">{{ order.getVatCost()|currency_format() }}</td>
                </tr>
                {% if order.amount_paid - order.getTotalCost() > 0 %}
                    <tr>
                        <td colspan="6" style="text-align: right;">Payment surcharges (incl. VAT)</td>
                        <td>{{ (order.amount_paid - order.getTotalCost())|currency_format() }}</td>
                    </tr>
                {% endif %}
                {% if order.coupon_deduct > 0 %}
                    <tr>
                        <td colspan="4" align="right"><strong class="fs12">Coupon deduct</strong></td>
                        <td align="right" class="fs12">-{{ order.coupon_deduct|currency_format() }}</td>
                    </tr>
                {% endif %}
                <tr>
                    <td colspan="4" align="right" style="border: none;"><span  class="fs12"><strong>Total</strong></span></td>
                    <td align="right" class="fs12" style="border: none;"><strong>{{ order.amount_paid|currency_format() }}</strong></td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td colspan="5" class="fs10" style="text-align: justify; padding-top:20px;" >
            <strong>Note:</strong> In the unlikely event you receive an incomplete, damaged or incorrect order,
            you must notify us within 24 hours of receipt. In the event of damage, you must retain all packaging.
            We may ask for photos in order to submit a claim to our carrier.<br /><br />
            If you need any help, advice or information about your treatment, symptoms or medical condition you can contact us by email or telephone to speak to a health professional. You can also find further information and re-order treatments from your account.
        </td>
    </tr>

</table>
