<div style="margin:30px; padding-top: 50px">
    <table align="left" border="0" style="width: 100%;">
        <tbody>
        <tr>
            <td style="width: 350px;" valign="top">
                <h1 style="text-align: left;"><strong>INVOICE</strong></h1>

                <h2 style="text-align: left;">#{{ invoice.number }}</h2>
                &nbsp;

                <table border="0" cellpadding="1" cellspacing="1" style="width: 343px;">
                    <tbody>
                    <tr>
                        <td style="width: 172px;"><strong>Invoice date:</strong><br />
                            {{ invoice.date|date("jS F Y") }}</td>
                        <td style="width: 158px;"><strong>Customer name:</strong><br />
                            {{ invoice.clientContact.name }}</td>
                    </tr>
                    </tbody>
                </table>
                &nbsp;

                <table border="0" cellpadding="1" cellspacing="1" style="width: 345px;">
                    <tbody>
                    <tr>
                        <td style="width: 335px;"><strong>Animal name:</strong><br />
                            {{ invoice.animal.name }}</td>
                    </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 332px;" valign="bottom">
                <div style="text-align: right;"><img src="{{ templatesettings.logoLocation }}" /></div>

                <p><br />
                    &nbsp;</p>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div style="margin: 30px 0px;">
    <table style="width: 968px; font-size: 15px">
        <thead>
        <tr style="background-color: #00BFA5;">
            <td style="width: 30px"></td>
            <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: 79px; color:#000000;">
                        <span style="font-size:14px;">
                            <b>Discount</b>
                        </span>
                </td>
                <td style="text-align: left; float: left; width: 79px; 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>
            <td style="width: 30px"></td>
        </tr>
        </thead>
        <tbody>
        {% for invoiceline in invoice.lineItems %}
            {% if invoiceline.isHeaderLine and not invoiceline.hasHeaderLine %}
                <tr>
                    <td style="width: 30px; height: 30px;"></td>
                    <td style="padding-left:10px; border-bottom:1px solid #00BFA5;">{{ invoiceline.product.name }}</td>
                    <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.salesPerson.name }}</td>
                    <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.quantity }}</td>
                    {% if invoice.hasDiscounts %}
                        <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
                        {% if invoiceline.totalDiscount(true) > 0 %}
                            <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
                            <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
                        {% else %}
                            <td style="border-bottom:1px solid #00BFA5;"></td>
                            <td style="border-bottom:1px solid #00BFA5;"></td>
                        {% endif %}
                    {% endif %}
                    <td style="border-bottom: 1px solid #00BFA5; text-align: right; width: 223px;">{{ invoiceline.total(true)|moneyformat }}</td>
                    <td style="width: 30px"></td>
                </tr>
                {% if invoiceline.printContained %}
                    {% for subinvoiceline in invoiceline.nestedLines %}
                        <tr>
                            <td style="width: 30px; height: 30px;"></td>
                            <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>
                            <td style="width: 30px"></td>
                        </tr>
                        {% if subinvoiceline.isHeaderline %}
                            {% if subinvoiceline.printContained %}
                                {% for subsubinvoiceline in subinvoiceline.nestedLines %}
                                    <tr>
                                        <td style="width: 30px; height: 30px;"></td>
                                        <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>
                                        <td style="width: 30px"></td>
                                    </tr>
                                    {% if subsubinvoiceline.isHeaderline %}
                                        {% if subsubinvoiceline.printContained %}
                                            {% for subsubsubinvoiceline in subsubinvoiceline.nestedLines %}
                                                <tr>
                                                    <td style="width: 30px; height: 30px;"></td>
                                                    <td style="font-style: italic; color:#555;">&nbsp; &nbsp; &nbsp;&nbsp; &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>
                                                    <td style="width: 30px"></td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% elseif not invoiceline.hasHeaderLine %}
                <tr>
                    <td style="width: 30px; height: 30px;"></td>
                    <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.product.name }}</td>
                    <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.salesPerson.name }}</td>
                    <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.quantity }}</td>
                    {% if invoice.hasDiscounts %}
                        <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
                        {% if invoiceline.totalDiscount(true) > 0 %}
                            <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
                            <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
                        {% else %}
                            <td style="border-bottom:1px solid #00BFA5;"></td>
                            <td style="border-bottom:1px solid #00BFA5;"></td>
                        {% endif %}
                    {% endif %}
                    <td style="border-bottom:1px solid #00BFA5; text-align:right;">{{ invoiceline.total(true)|moneyformat }}</td>
                    <td style="width: 30px"></td>
                </tr>
            {% endif %}
        {% endfor %}
        </tbody>
    </table>
    <div><br/>
        &nbsp;</div>
    <table cellpadding="5" cellspacing="5" style="margin-right:15px;margin-left: auto; width: 200px;">
        <tbody>
        <tr>
            <td style="width: 105px; padding-left: 15px;">Subtotal:</td>
            <td style="width: 68px; text-align: right; padding-right: 15px;">
                <strong>{{ invoice.subTotal|moneyformat }}</strong>
            </td>
        </tr>
        {% if invoice.includesTax %}
            <tr>
                <td style="width: 105px; padding-left: 15px;">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; padding-left: 15px;">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-left: 15px;">Total:</td>
            <td style="width: 68px; text-align: right; padding-right: 15px;">
                <strong>{{ invoice.total|moneyformat }}</strong>
            </td>
        </tr>
        </tbody>
    </table>
    &nbsp;
    <table cellpadding="5" cellspacing="5" style="margin-right:20px;margin-left: auto; width: 300px;">
        <tbody>
        <tr>
            {% if invoice.paymentMethods %}
                <td style="text-align: right;">Payment method:
                    <strong>{{ invoice.paymentMethods }}</strong>
                </td>
            {% endif %}
            <td style="text-align: right;">Amount paid:
                <strong>{{ invoice.paid|moneyformat }}</strong>
            </td>
            <td style="text-align: right;">Balance:
                <strong>{{ balance|moneyformat }}</strong>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div style="background-color: #00BFA5; padding: 50px; height: 100px;">
    <table cellpadding="1" cellspacing="1" style="width: 757px;">
        <tbody>
        <tr>
            <td style="width: 479px;">
                <table border="0" cellpadding="1" cellspacing="1" style="width: 500px;">
                    <tbody>
                    <tr>
                        <td>
                                    <span style="color:#ffffff;">
                                        <span style="font-size:24px;">
                                            <strong>Thank you for choosing
                                                {{ business.name }}</strong>
                                        </span>
                                    </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                                    <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>
            </td>
            <td style="text-align: right; vertical-align: middle;">
                <div style="text-align: right;"><img src="{{ templatesettings.logoLocation }}" style="height: 80px; width: auto;"/></div>
            </td>
        </tr>
        </tbody>
    </table>
</div>