<style>
    type="text/css"
    th,
    td {
        padding: 5px font-size: 14px
    }
    .header tr:nth-child(1) td {
        background-color: #00BFA5;
        height: 80px
    }
    .header tr:nth-child(2) td {
        background-color: #00BFA5;
        height: 20px
    }
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
    <tbody class="header">
    <tr>
        <td colspan="2" style="width: 482px;"></td>
        <td style="width: 210px;"></td>
        <td style="width: 58px;"></td>
    </tr>
    <tr>
        <td colspan="2" style="width: 482px;"></td>
        <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 255); width: 210px; overflow: visible;"><img alt="" src="{{ templatesettings.logoLocation }}"/></td>
        <td style="width: 58px;"></td>
    </tr>
    <tr>
        <td rowspan="2" style="width: 40px;"></td>
        <td rowspan="2" style="width: 441px;">
                <span style="font-size: 32px;">
                    <strong>INVOICE</strong>
                </span><br/>
            <span style="font-size: 24px;">#{{ invoice.number }}</span>
        </td>
        <td style="width: 58px;"></td>
    </tr>
    <tr>
        <td style="width: 210px;"></td>
        <td style="width: 58px;"></td>
    </tr>
    </tbody>
</table>
<div style="margin:40x 40px 0 40px;">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 564px;">
        <tbody>
        <tr>
            <td style="width: 120px;">Invoice date:<br/>
                <strong>{{ invoice.date|date("jS F Y") }}</strong>
            </td>
            <td style="width: 120px;">Customer Name:<br/>
                <strong>{{ invoice.clientContact.name }}</strong>
            </td>
            <td style="width: 120px;">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 td {
        border-bottom: 2px solid #ccc;
    }
    .summary tr:nth-child(1) td {
        padding-top: 20px;
    }
    .summary tr:last-child td {
        padding-bottom: 20px;
    }
</style>
<div style="margin: 0 40px">
    <table class="lines" style="width: 100%;">
        <thead>
        <tr>
            <td style="text-align: left; float: left; width: 205px; height: 40px; padding-left: 10px">
                    <span style="font-size:14px;">
                        <b>Description</b>
                    </span>
            </td>
            <td style="text-align: left; float: left; width: 130px;">
                    <span style="font-size:14px;">
                        <b>Staff Member</b>
                    </span>
            </td>
            <td style="text-align: left; float: left; width: 65px;">
                    <span style="font-size:14px;">
                        <b>Qty</b>
                    </span>
            </td>
            {% if invoice.hasDiscounts %}
                <td style="text-align: left; float: left; width: 80px;">
                        <span style="font-size:14px;">
                            <b>Price</b>
                        </span>
                </td>
                <td style="text-align: left; float: left; width: 80px;">
                        <span style="font-size:14px;">
                            <b>Discount</b>
                        </span>
                </td>
                <td style="text-align: left; float: left; width: 80px;">
                        <span style="font-size:14px;">
                            <b>Discount (%)</b>
                        </span>
                </td>
            {% endif %}
            <td style="text-align: right; float: left; width: 100px; padding-right: 10px;">
                    <span style="font-size:14px;">
                        <b>Total</b>
                    </span>
            </td>
        </tr>
        </thead>
        <tbody>
        {% 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="margin-left: auto; width: 200px;">
        <tbody class="summary">
        <tr>
            <td style="width: 105px; padding-top: 50px;">Subtotal:</td>
            <td style="width: 68px; text-align: right; padding-right: 15px; padding-top: 50px;">
                <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;">
        <tbody>
        <tr>
            <td style="border-top:2px solid #00BFA5;">
                {% if invoice.paymentMethods %}Payment method:
                <strong>{{ invoice.paymentMethods }}</strong>
            &emsp;
                {% endif %}Amount paid:
                <strong>{{ invoice.paid|moneyformat }}</strong>
                {% set balance = invoice.total - invoice.paid %}
                &emsp; Balance:
                <strong>{{ balance|moneyformat }}</strong>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<style type="text/css">
    hr {
        height: 2px;
        border-width: 0;
        color: #fff;
        background-color: #fff;
    }
    .footerAddressContainer tr td {
        padding-right: 35px;
        font-size: 14px;
    }
</style>
<div style="background-color: #00BFA5;
        color:#fff; padding: 20px 40px 60px 20px;">
    <table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 720px; color:#fff">
        <tbody>
        <tr>
            <td style="width: 180px; color:#ffffff">
                <strong>
                    <span style="font-size:28px;">THANK YOU</span>
                </strong>
            </td>
            <td style="width: 524px;">
                <hr/></td>
        </tr>
        </tbody>
    </table>
    <table align="center" border="0" cellpadding="2" cellspacing="2" style="width: 720px;">
        <tbody class="footerAddressContainer">
        <tr>
            <td style="color:#ffffff">Address:<br/>
                <strong>{{ business.postalAddress.addressText(false, true) }}</strong>
            </td>
            <td style="color:#ffffff">Phone:<br/>
                <strong>{{ business.phoneNumber }}</strong>
            </td>
            <td style="color:#ffffff">Email:<br/>
                {{ business.businessEmail }}</td>
        </tr>
        </tbody>
    </table>
</div>