Manager New Invoice Template

<table style="width:100%; padding:50px; font-size: 1em; color: #444444; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-bottom: 16px;">
<!-- HEADER -->
    <tr style="vertical-align:top;">
        <td style="width:80%">
            {% if business.logo != null %}
                <img src="{{ business.logo }}" style="max-height: auto; max-width: 200px">
            {% endif %}
                <br>
            <p style="padding-top:20px; font-weight: bold">
                {{ title | upcase }}
                {% for field in fields %}
                    // {{ field.text }}
                {% endfor %}
            </p>
        </td>
        <td style="width:20%; text-align:left;">
            domain.com
        </td>
    </tr>
</table>

<table style="width:100%; padding:0 50px 50px 50px; font-size: 10px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-bottom: 16px;">
    <!-- CUSTOMER & TOTAL DETAILS-->
    <tr>
        <td style="width:65%; border-width: 0px 0 0px 2px; border-style:solid; border-color: #888888; padding: 0 10px">
            <!-- CUSTOMER DETAILS -->
             <div>
                <p>To</p>
                {{ recipient.name }} {{ recipient.code }}</div>
                <div>{{ recipient.address | newline_to_br }}</div>
                {% if recipient.telephone != empty %}
                    <div>t: {{ recipient.telephone }}</div>
                {% endif %}
                <div>
                    {% for field in custom_fields %}
                        {% if field.label != 'Contact Person' %}{% continue %}{% endif %}
                            <div>Att: {{ field.text }}</div>
                    {% endfor %}
                        </div>
                    {% if recipient.email != empty %}
                        <div>e: {{ recipient.email }}</div>
                    {% endif %}
        </td>
        <td style="background: #f1f1f1; width: 35%; padding:0 10px 30px 10px; border-width: 0px 0 0px 0; border-style:solid; border-color: #888888;">
            <!-- TOTAL DETAILS -->
            {% for total in table.totals %}
                {% if field.label !='Discount' %}
                    <p>&nbsp;</p>
                {% endif %}
                <p style="padding:0 0 5px 0; margin: 0 0 -10px 0; width:100%; border-width: 0 0 2px 0; border-style:solid; border-color: #888888; box-sizing: border-box; float:left;">{{ total.label }} <span style="font-weight:bold; text-align:right; float:right; clear:both;">{{ total.text }}</span></p>
            {% endfor %}
        </td>
    </tr>
</table>

<table style="width:100%; padding:0 50px 50px 50px; font-size: 10px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-bottom: 16px;">
    <!-- DESCRIPTION & ITEMS -->
    <tr>
                {% for column in table.columns %}
            <td style="font-weight: bold; padding: 32px 5px 10px 5px; text-align: {{ column.align }}; border-width: 0 0 1px 0; border-style: solid; border-color: #888888; {% if forloop.last == true %} border-width: 0 0 1px 0; border-style: solid; border-color: #888888 {% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px {% endif %}">{{ column.label | upcase }}</td>
            {% endfor %}
            </tr>
    <tr>
{% for row in table.rows %}
        <tr>
            {% for cell in row.cells %}
            <td style="padding: 10px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-width: 1px 0 0 0; border-style: solid; border-color: #888888; {% if forloop.last == true %}; border-width: 1px 0 0 0; border-style: solid; border-color: #888888 {% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px {% endif %}">{{ cell.text | newline_to_br }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
        {% for column in table.columns %}

            <td style="font-weight:bold; border-width: 0 0 2px 0; border-style: solid; border-color: #888888; {% if forloop.last == true %}; border-width: 0 0 2px 0; border-style: solid; border-color: #888888; {% endif %}">&nbsp;</td>

        {% endfor %}
    </tr>
</table>

<table style="width:100%; padding:0 50px 50px 50px; font-size: 10px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-bottom: 16px;">
    <!-- TERMS, NOTES, BACS DETAILS -->
    <tr>
        <td>TERMS, NOTES, BACS DETAILS</td>
    </tr>
</table>

<table style="width:100%; padding:0 50px 50px 50px; font-size: 10px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin-bottom: 16px;">
    <!--FOOTER -->
    <tr>
        <td>FOOTER</td>
    </tr>
</table>