examples/invoice.mustache

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        p {
            margin-bottom: 0.1in; line-height: 115%; background: transparent;
        }
        h1 {
            margin-bottom: 0.08in; background: transparent; page-break-after: avoid
        }
        h1.western {
            font-family: "Liberation Sans", sans-serif; font-size: 18pt; font-weight: bold
        }
        body {
            font-family: "sans-serif"; font-size: 10pt;
        }
        table {
            width: 100%;
        }
        .table-bordered td {
            border: 1px solid #000000; padding: 0.04in;
        }
    </style>
</head>

<body>
<table cellpadding="4" cellspacing="0">
    <tr valign="top">
        <td width="50%">
            <p style="text-align: left;" >
                <img height="150" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdUAAAHVCAMAAACQZ5HFAAABp1BMVEUAAABVVVVVVVVVVVVWVlZXV1dYWFhZWVlaWlpbW1tcXFxdXV1eXl5fX19gYGBhYWFiYmJjY2NkZGRlZWVmZmZnZ2doaGhpaWlqampra2tsbGxtbW1ubm5vb29wcHBxcXFycnJzc3N0dHR1dXV2dnZ3d3d4eHh5eXl6enp7e3t8fHx9fX1+fn5/f3+AgICBgYGCgoKDg4OEhISFhYWGhoaHh4eIiIiJiYmKioqLi4uMjIyNjY2Ojo6Pj4+QkJCRkZGSkpKTk5OUlJSVlZWWlpaXl5eYmJiZmZmampqbm5ucnJydnZ2enp6fn5+goKChoaGioqKjo6OkpKSlpaWmpqanp6eoqKipqamqqqqrq6usrKytra2urq6vr6+wsLCxsbGysrKzs7O0tLS1tbW2tra3t7e4uLi5ubm6urq7u7u8vLy9vb2+vr6/v7/AwMDBwcHCwsLDw8PExMTFxcXGxsbHx8fIyMjJycnKysrLy8vMzMzNzc3Ozs7Pz8/Q0NDR0dHS0tLT09PU1NTV1dXW1tbX19fY2NjZ2dna2trb29vc3Nzd3d3e3t7ASefWAAAAA3RSTlMAwt8V1r5XAAANQ0lEQVR42uzRAQaCMRgA0P79J+kUg0gArAAM1jE6w9ChExMIwmSf967wDn8EwJbiYBuraSeOZNUqVrHKpNVc10b+slqfa6NatYpVrGIVq1atWsUqVrGKVatYxSpWsWrVqlWsYhWrWLWKVaxiFatYtYpVrGJ1MqtYxSpWsWoVq1jFKlatWrWKVaxiFatWsYpVrGIVq1axilWsYtWqVatYxSpWsWoVq1jFKlatWrWKVaxiFatWsYpVrGIVq1axilWsYtWqVatYxSpWsWoVq1jFKlatWrWKVaxiFatWsYpVrGIVq1axilWsYtWqVatYxSpWsWoVq1jFKlatWrWKVaxiFatWsYpVrGIVq1axilWsYvUXVrGKVaxi1SpWsYpVrGLVKlaxilWsWrVqFatYxSpWrWIVq1jFqlWrVrGKVaxi1SpWsYpVrGLVKlaxilWsWrVqld6uZXhEWeW8f7Qoq1wCrtLvt/J2DLjKyapVq1atWrVqleirL3bu86Fp/A/g+IN3Qi3zKLMV4exBcSAyTjl/uAfDrYBbD+fBafU4LFK0ZbaU5PNH/2xJm3zT3iiG268nbPgm73ySsGq8GekNt7RFvrv3ST5LS5EPNwe7Qm2Hhp+pb0utf2bIxq0DwfBwTLISI12t4YsfxZJZz0rnnp0+1bO/Jdw7EjWklNWnY/3h1lDnyUdFC9hc/ywjIlvPh7pCocj5GVMU6fWclLK2nK1dqBq7PtgV3Hf45PNNKWnlzmBna6j77CtDRMz1HPeCn57s6WjtHLgR36WqqfFa8rTDMzJBRF2C+ThEnv/MquQZHWQt/BggS7ueXYGfLN+k5FzVyOoRMW7WkVd/Y1NU5utzQQqqRtS3n9MAxkReBLAEX4rDKY1te9OyzQyzrWLS46rGQ3ul/nOrUiQ+oGFpeiyySU7Nz2JbGqogr+PVblR9WoNicD+sKHO6D6fKO2JZJmfSh2VCxsjbfq9urKor3+DU8Fac0vtRhRLi0EauqnESm3ZBbM3kLci2dfKOels1FsKp6r643K7AYWBz094hFmNEx+ngqudVRzXQeiZjK+bG4vfD1tR+dFavBEKj0aSxMn/7oAYMG2JNYri9CnSIzKaW+sB/HrQT85tzYfAvy2fRQ+3tQehZDQGR2+9XtxKvR1qACmVvzOdKDz2YWzPTi496NWhOi+1Vd3sARgag8mI0sbW5ONEAXJGCZ5Em0Nrbw+OSd/Ob9nY/tByZ87TqEz+wd/xt0lj5+Wa3Bpw2xME8CfiGnn7KrL6/GQZ6UlDR3v710IZY1g8Ae449WUyn489P1gENP3tc9TpwKGYPzXW/q+qMDoFHpljmDwDDUnAYYDS3Pb0AFdO5o7EdroolCuE22PtGLMajOtBfis28ODC5KAVv6+GcKG6AH/YuybaNg1CxILa1SnguqoSPurS3d0svdWh4YoplLgKcFYdxoPeTWF41wgAExCHTCXyXVPZ4TdzTqi81GDOVsalVqi5WQXjZGWBcg9tK1YuSEwO0760Bhx5HVaA/Lbbk11CZkF/0VqPGcFeFA2l73+yDk8o5B9pNUZyC6+Jp1VgldK2KzRhRzq3ygwaXTMfBFgZX1ePge6h80mYIpj2sarTCGVE9V6oehraUKMbBn3S8vdu0elfax20C9itVD6qRVlvhmPyydlgsqrrPuZAZaBSHjWp4Wjyq3laNQEdaFJegqtDZbIPvxGmtyVV11jr0HT5+BSMeVr0LIUNcGuFT4dgDv53YLvmd4/l5sQTQt/LVoMNZtWpFVO80NLWb4ghE3VUDSXEw96ArS78M+0xxOA3XxdOqz6EyKSqz23HSeAKBTVG8Uqua7XBeXH4Ef8K7qp0wLW5D+DNi6S91FH3Q8aXtqgt21QopXZXL4tbvuPIW64U37qpjRQdfShxSNerGJH18lfa2ag9cEbf3ur2/+mFSXL5Rqv4EdSlxOwpXPKu6plNtiNvy+GuxZCrRlqXIYXhSVlXto7g9g05RGYvvZmbeLazurKpcgzZTGdWb4mnV9B709ZKn5efWBlSir4rLLaXqRWtUVbPQ4VnV59AvJdlBvpFik3CyrKrNUiQFAeWQv9jhY1tT//WOHVRN18H3zlGt3/S26iwckGI3C7cTSQiJ2xwElMmNShGjBi3lVdWp4vOr6gkMS7E3cKSsql1SrMp5XZyLoCq3qvU+IVMdVU+r3oczUuwH6C+cXg+K2woESqxaFYYPXlUd/60tvwVjUmwJOsqq2inFah1Vb2gA/o6+//3v2NHuVn1nVTMBO0ZyD/WbHle9VvpWIFbYvrlSVdeUqnvwSwlHYdarqpd/6y7xLpyTYu8hUlbVJimSdmzsOOA/+aYQeSsW3klVmbCH9QzcEo+rTpQ+tb2Dw4Uz8F5xm4dAiWNZdQh+8qaqEq20FzAgxV7Ct2VV1RLFn8Oe4KgOh5I7ugdWbTXC4/yoBjJeV52GISn56hO/crc0qVTdCwkpFoKkV1VfqVe8YnGoM6TIWRgvqyrXxO2Y/cpeOGyIB1XlDgQNa4W3xeuqMWgwS7yzfcbrg7vi0q1U7SsZJKlRbXhVNe0rPrZUe2FG3IxGmC+vau2aqOZ1tCXJyej4EuJJVaMJHorIsjqqHlWVFoiK21a9/XOwR9CUEcVrlKoP4GDJ+5dvxZOqVpML8mvG4GuzxPWlRcqrSq8hTqk2+2y2aL2vU8/Oqsp9aDFEzsCEeF/1Yqn7vhuOi6kRgrPitBFUq677StwXpb6Cp95VfQF7FsRtKdy8mF9EDdx0v7kGHpZblaGM2NYijp/uvy+6DpiXtR1WNVrhviz71VH1qupqNUyK6kMVTCu/Lbnm7NWNWlUuQnBdVCeg3fSuqkSgeUVUz51rnwD9e3FaCVrzW0bVUA10zIn9Cyrnb+LWNao2xSHdDzusKo+h2Thjb4CnVeU66M/FKdkEnWo0jq2I5V0IIhBwzWUkLU5XQZsVD6su1kDgrTgkhjUI2L+FGABt1JCCaABq41Je1Z5oNWiH7i5tSWbh1n6gwrGsTvVWfLqZnVc1Q3DVT0NmV6qavaBfMaXgdT3UJ8RmHgP8p2fWxUw87NEgsqZWlTc+aFuUgs0hYES8rCo/VoA+kB+jzOywDwja1STTBQQfW8P084AG/mj+CHg4FYKxez+aVlV96t5cvmrj1IOlQlV530qOn5xAVL0OMLQsOcaLCBDeD+enpp5bbV7fm+qHI1P3Xotl4cFULdy6FxW3adB2OKqJR1OWLjgxZZlOiS0dBkJPrHXN9WtQ+ZMa/opOlk8nqye16aoqj3WoOLUkORsT9cC3pidV1dmD+oGzl88d7/YDVJxLi0NmGGDPwZNj5wYbAFpisi1VhWXCqpo1a1UFfMlCVUmPVJJXcyUtTqcBPXJm/MLxA5WAdsHoJeeYZN3FUtiYmI5lWlzMfUDjlpQvU0NJnco7DQH4D50aPzsQAAguiEvsMHn190wpqiqzdQDB4xfGhrt0QBs3xeOqsjKk4+AbXBKX6aDz7Wc3xLLhx3LVUfWlXVX/ZFcVST8aigRrg12nX266S4zq2CJRkV7nX5JNUHDbOmVoWB6K2zNgSnYg7aekDlE8asbmv5CSYvHrPXvrAh0npg2RElUlqezyjtld+Xvg+LlQfogOT6xJMeNhr5+cfSMJsc2NX8gaebA9Glc+Pz86LVnp7OvHo1Ko+htiJ6rJqR/KbeP9C1m3V62/cxq5kHPpgZE/3Ee3v/ITU9wWtbJH1TJ35UIJNxKiMu4f8ZOltY8m5TepVS0fzrWSUz343BTPq1qS0ad3pmcXTfklmfmX96ajy1K20lWLmbFn9x7PLpjypY7DHdkl6t5Ykd+k/sBbkXjz5P6rmPH3/I8Mterui+s0GfIX8hHa5Iv8V1WG4K78ldyD3v+qfpklnWZD/kKMINz/r+oXj+o9+Ss5CYH0f1X/UaOaOg5Myz+t6no8Pg2ReFZKdk06vu04jMfjiT857HI8Z3H2Uh0wKv+0qlc0bPot2SUvfChCafkTfYuDfsX8x1U9iNNR2SWXcInLn6geWzgq8o+rOtfXbRuMyS5JDnU7Hb4pf6bnPdY6+kfe/ve4EP9vj74JAASCAIBxmDor+FfCzkT7nlgIVq1iFatYxSpWrWIVq1jFqlWrVrGKVaxi1SpWsYpVrFq1ahWrWMUqVq1iFatYxSpWrWIVq1jFqlWrVrGKVaxi1SpWsYpVrFq1ahWrWMUqVq1atYpVrGIVq1axilWsYtWqVatYxSpWsWoVq1jFKlaxahWrWMUqVq1atYpVrGIVq1axilWsYtWqVatYxSpWsWoVq1jFKlaxahWrWMUqVp+yilWsYhWrVrGKVaxi1apVq1jFKlaxahWrWMUqVrFqFatYxSpWrVq1ilWsYhWrVrGKVaxi1apVq1jFKlaxahWrWMUqVrFqFatYxSpWrVq1ilWsYhWrVrGKVaxi1apVq1jFKlaxahWrWMUqVrFqFatYxSpWrVq1ilWsYhWrVrGKVaxi1apVq1jFKlaxajUPxpaX1Xlg1SpWscr/q7HPg9jaAeAE20YruuNiyJAAAAAASUVORK5CYII="/>
            </p>
        </td>
        <td width="50%" align="right">
            <p>
                <br/>
            </p>
            <p style="margin-bottom: 0in; font-style: normal; text-decoration: none">
                <b>Invoice number: <span style="color: #c9211e;">{{invoice_number}}</span></b>
            </p>
            <p style="font-style: normal; font-weight: normal; text-decoration: none">
                <br/>
                {{invoice_date}}
            </p>
        </td>
    </tr>
</table>

<h1 class="western">Invoice</h1>
<!-- Customer details -->
<table>
    {{# customer_details}}
    <tr valign="top">
        <td width="12%">{{key}}:</td>
        <td width="88%">{{value}}</td>
    </tr>
    {{/ customer_details}}
</table>

<p>
    <br/>
    <br/>
</p>

<!-- Invoice rows -->
<table cellpadding="4" cellspacing="0" class="table-bordered">
	<tr valign="top">
		<th width="80%" align="center"> <p><b>Item</b></p> </th>
		<th width="20%"> <p><b>Price</b></p> </th>
	</tr>
    {{#rows}}
    <tr valign="top">
        <td width="80%" height="2" >
            {{item}}
        </td>
        <td width="20%">
            {{price}}
        </td>
    </tr>
    {{/rows}}
</table>


<!-- Total calculation -->
<table cellpadding="6" cellspacing="0">
    <tr valign="top">
        <td width="79%" height="4" align="right">
            <p style="text-align: right;"><i>Total (excl. VAT)</i></p>
        </td>
        <td width="1%"></td>
        <td width="20%">
            <p>{{total_rows}}</p>
        </td>
    </tr>

    <tr valign="top">
        <td width="79%" height="4" align="right">
            <p style="text-align: right;"><i>VAT {{vat_percent}}%</i></p>
        </td>
        <td width="1%"></td>
        <td width="20%">
            {{vat}}
        </td>
    </tr>

    <tr valign="top">
        <td width="79%" height="20"></td>
    </tr>

    <tr valign="top" style="font-size: 15pt !important;">
        <td width="79%" height="4" align="right">
            <b>Total</b>
        </td>
        <td width="1%"></td>
        <td width="20%">
            <p>{{total}}</p>
        </td>
    </tr>
</table>

<hr/>

<p align="center" style="font-size: 9pt; line-height: 14pt;">
    <i>Company Inc. - [Company address]</i>
    <br/>
    <i><b>Phone:</b> +01 234 567 890 / +01 987 654 321</i>
    <br/>
    <i><b>E-Mail:</b> email@address.com</i>
    <br/>
</p>
</body>
</html>