<div style="margin:40px 40px 0 40px; padding-top: 80px">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 651px;">
        <tbody>
        <tr>
            <td colspan="3" style="width: 445px;">
                    <span style="font-size: 32px;">
                        <strong>INVOICE</strong>
                    </span><br/>
                <span style="font-size: 24px;">#{{ invoice.number }}</span>
            </td>
            <td rowspan="2" style="width: 193px;"><img alt="" src="{{ templatesettings.logoLocation }}"/></td>
        </tr>
        <tr>
            <td style="width: 80px;">Invoice date:<br/>
                <strong>{{ invoice.date|date("jS F Y") }}</strong>
            </td>
            <td style="width: 80px;">Customer Name:<br/>
                <strong>{{ invoice.clientContact.name }}</strong>
            </td>
            <td style="width: 80px;">Animal Name:<br/>
                <strong>{{ invoice.animal.name }}</strong>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<style>
    type="text/css"
    th,
    td {
        text-align: left;
        padding: 6px;
        font-size: 14px
    }
    .lines tr:nth-child(even) {
        background-color: #eee;
    }
    .summary tr:nth-child(1) td {
        padding-top: 20px;
    }
    .summary tr:last-child td {
        padding-bottom: 20px;
    }
</style>
<div style="margin: 0 40px;">
    <table style="width: 1041px;">
        <thead>
        <tr style="background-color: #00BFA5;">
            <td style="text-align: left; float: left; width: 205px; height: 40px; color:#000000; padding-left: 10px">
                    <span style="font-size:14px;">
                        <b>Description</b>
                    </span>
            </td>
            <td style="text-align: left; float: left; width: 130px;color:#000000;">
                    <span style="font-size:14px;">
                        <b>Staff Member</b>
                    </span>
            </td>
            <td style="text-align: left; float: left; width: 65px;color:#000000;">
                    <span style="font-size:14px;">
                        <b>Qty</b>
                    </span>
            </td>
            {% if invoice.hasDiscounts %}
                <td style="text-align: left; float: left; width: 80px;color:#000000;">
                        <span style="font-size:14px;">
                            <b>Price</b>
                        </span>
                </td>
                <td style="text-align: left; float: left; width: 80px;color:#000000;">
                        <span style="font-size:14px;">
                            <b>Discount</b>
                        </span>
                </td>
                <td style="text-align: left; float: left; width: 80px;color:#000000;">
                        <span style="font-size:14px;">
                            <b>Discount (%)</b>
                        </span>
                </td>
            {% endif %}
            <td style="text-align: right; float: left; width: 100px; color: rgb(0, 0, 0); padding-right: 10px;">
                    <span style="font-size:14px;">
                        <b>Total</b>
                    </span>
            </td>
        </tr>
        </thead>
        <tbody class="lines">
        {% for invoiceline in invoice.lineItems %}
            {% if invoiceline.isHeaderLine and not invoiceline.hasHeaderLine %}
                <tr>
                    <td>{{ invoiceline.product.name }}</td>
                    <td>{{ invoiceline.salesPerson.name }}</td>
                    <td>{{ invoiceline.quantity }}</td>
                    {% if invoice.hasDiscounts %}
                        <td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
                        {% if invoiceline.totalDiscount(true) > 0 %}
                            <td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
                            <td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
                        {% else %}
                            <td></td>
                            <td></td>
                        {% endif %}
                    {% endif %}
                    <td style=" text-align: right; width: 223px;">{{ invoiceline.total(true)|moneyformat }}</td>
                </tr>
                {% if invoiceline.printContained %}
                    {% for subinvoiceline in invoiceline.nestedLines %}
                        <tr>
                            <td style="font-style: italic; color:#555;">&nbsp; &nbsp; &nbsp;&nbsp;{{ subinvoiceline.product.name }}</td>
                            <td style="font-style: italic; color:#555;">{{ subinvoiceline.salesPerson.name }}</td>
                            <td style="font-style: italic; color:#555;">{{ subinvoiceline.quantity }}</td>
                            {% if invoiceline.printContainedPrices %}
                                {% if invoice.hasDiscounts %}
                                    <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
                                    {% if subinvoiceline.totalDiscount(true) > 0 %}
                                        <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscount(true)|moneyformat }}</td>
                                        <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscountPercent|round(2) }}%</td>
                                    {% else %}
                                        <td style="font-style: italic; color:#555;"></td>
                                        <td style="font-style: italic; color:#555;"></td>
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                            <td style="text-align:right;font-style: italic; color:#555;">
                                {% if invoiceline.printContainedPrices %}
                                    {{ subinvoiceline.total(true)|moneyformat }}
                                {% endif %}
                            </td>
                        </tr>
                        {% if subinvoiceline.isHeaderline %}
                            {% if subinvoiceline.printContained %}
                                {% for subsubinvoiceline in subinvoiceline.nestedLines %}
                                    <tr>
                                        <td style="font-style: italic; color:#555;">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;{{ subsubinvoiceline.product.name }}</td>
                                        <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.salesPerson.name }}</td>
                                        <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.quantity }}</td>
                                        {% if subinvoiceline.printContainedPrices %}
                                            {% if invoice.hasDiscounts %}
                                                <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
                                                {% if subsubinvoiceline.totalDiscount(true) > 0 %}
                                                    <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscount(true)|moneyformat }}</td>
                                                    <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscountPercent|round(2) }}%</td>
                                                {% else %}
                                                    <td style="font-style: italic; color:#555;"></td>
                                                    <td style="font-style: italic; color:#555;"></td>
                                                {% endif %}
                                            {% endif %}
                                        {% endif %}
                                        <td style="text-align:right;font-style: italic; color:#555;">
                                            {% if subinvoiceline.printContainedPrices %}
                                                {{ subsubinvoiceline.total(true)|moneyformat }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% if subsubinvoiceline.isHeaderline %}
                                        {% if subsubinvoiceline.printContained %}
                                            {% for subsubsubinvoiceline in subsubinvoiceline.nestedLines %}
                                                <tr>
                                                    <td style="font-style: italic; color:#555;">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;{{ subsubsubinvoiceline.product.name }}</td>
                                                    <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.salesPerson.name }}</td>
                                                    <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.quantity }}</td>
                                                    {% if subsubinvoiceline.printContainedPrices %}
                                                        {% if invoice.hasDiscounts %}
                                                            <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
                                                            {% if subsubsubinvoiceline.totalDiscount(true) > 0 %}
                                                                <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscount(true)|moneyformat }}</td>
                                                                <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscountPercent|round(2) }}%</td>
                                                            {% else %}
                                                                <td style="font-style: italic; color:#555;"></td>
                                                                <td style="font-style: italic; color:#555;"></td>
                                                            {% endif %}
                                                        {% endif %}
                                                    {% endif %}
                                                    <td style="text-align:right;font-style: italic; color:#555;">
                                                        {% if subsubinvoiceline.printContainedPrices %}
                                                            {{ subsubsubinvoiceline.total(true)|moneyformat }}
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% elseif not invoiceline.hasHeaderLine %}
                <tr>
                    <td>{{ invoiceline.product.name }}</td>
                    <td>{{ invoiceline.salesPerson.name }}</td>
                    <td>{{ invoiceline.quantity }}</td>
                    {% if invoice.hasDiscounts %}
                        <td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
                        {% if invoiceline.totalDiscount(true) > 0 %}
                            <td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
                            <td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
                        {% else %}
                            <td></td>
                            <td></td>
                        {% endif %}
                    {% endif %}
                    <td style="text-align:right;">{{ invoiceline.total(true)|moneyformat }}</td>
                </tr>
            {% endif %}
        {% endfor %}
        </tbody>
    </table>
    <table border="0" cellpadding="0" cellspacing="5" style="border-top: 3px solid #ccc; border-bottom: 3px solid #ccc; margin-left: auto; width: 200px;">
        <tbody class="summary">
        <tr>
            <td style="width: 105px; padding-top: 20px;">Subtotal:</td>
            <td style="width: 68px; text-align: right; padding-right: 15px; padding-top: 20px;">
                <strong>{{ invoice.subTotal|moneyformat }}</strong>
            </td>
        </tr>
        {% if invoice.includesTax %}
            <tr>
                <td style="width: 105px;">Including tax:</td>
                <td style="width: 68px; text-align: right; padding-right: 15px;">
                    <strong>{{ invoice.total|moneyformat }}</strong>
                </td>
            </tr>
        {% endif %}
        {% if invoice.hasDiscounts %}
            <tr>
                <td style="width: 105px;">Discount:</td>
                <td style="width: 68px; text-align: right; padding-right: 15px;">
                    <strong>{{ invoice.totalDiscountAmountIncTax|moneyformat }}</strong>
                </td>
            </tr>
        {% endif %}
        <tr>
            <td style="width: 105px; padding-bottom: 20px;">Total:</td>
            <td style="width: 68px; text-align: right; padding-right: 15px; padding-bottom: 20px;">
                <strong>{{ invoice.total|moneyformat }}</strong>
            </td>
        </tr>
        </tbody>
    </table>
    <table border="0" cellpadding="0" cellspacing="5" style="margin-left: auto; width: 200px;">
        <tbody class="summary">
        {% if invoice.paymentMethods %}
            <tr>
                <td style="width: 105px;">Payment method:</td>
                <td style="width: 68px; text-align: right; padding-right: 15px;">
                    <strong>{{ invoice.paymentMethods }}</strong>
                </td>
            </tr>
        {% endif %}
        <tr>
            <td style="width: 105px;">Amount paid:</td>
            <td style="width: 68px; text-align: right; padding-right: 15px;">
                <strong>{{ invoice.paid|moneyformat }}</strong>
            </td>
        </tr>
        <tr>{% set balance = invoice.total - invoice.paid %}
            <td style="width: 105px; padding-bottom: 30px;">Balance:</td>
            <td style="width: 68px; text-align: right; padding-right: 15px; padding-bottom: 30px;">
                <strong>{{ balance|moneyformat }}</strong>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div style="background-color: #00BFA5; color:#fff; padding: 20px 40px 60px 20px;">
    <table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 720px;">
        <tbody>
        <tr>
            <td style="width: 652px;">
                    <span style="color:#ffffff;">
                        <span style="font-size:24px;">
                            <strong>THANK YOU FOR CHOOSING
                                {{ business.name }}</strong>
                        </span>
                    </span>
            </td>
        </tr>
        <tr>
            <td style="width: 652px;">
                    <span style="color:#ffffff;">
                        <span style="font-size:14px;">{{ business.postalAddress.addressText(false, true) }}&nbsp;&bull;
                            {{ business.phoneNumber }}&nbsp;&bull;
                            {{ business.businessEmail }}</span>
                    </span>
            </td>
        </tr>
        </tbody>
    </table>
</div>