<patTemplate:tmpl name="pageoutput" unusedvars="strip">
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	
	<!-- Invoice styling -->
	<style>
	body{
		font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
		text-align:center;
		color:#777;
	}
	
	body h1{
		font-weight:300;
		margin-bottom:0px;
		padding-bottom:0px;
		color:#000;
	}
	
	body h3{
		font-weight:300;
		margin-top:10px;
		margin-bottom:20px;
		font-style:italic;
		color:#555;
	}
	
	body a{
		color:#06F;
	}
	
	.invoice-box{
		max-width:800px;
		margin:auto;
		padding:30px;
		border:1px solid #eee;
		box-shadow:0 0 10px rgba(0, 0, 0, .15);
		font-size:16px;
		line-height:24px;
		font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
		color:#555;
	}
	
	.invoice-box table{
		width:100%;
		line-height:inherit;
		text-align:left;
	}
	
	.invoice-box table td{
		padding:5px;
		vertical-align:top;
	}
	
	.invoice-box table tr td:nth-child(2){
		text-align:right;
	}
	
	.invoice-box table tr.top table td{
		padding-bottom:20px;
	}
	
	.invoice-box table tr.top table td.title{
		font-size:45px;
		line-height:45px;
		color:#333;
	}
	
	.invoice-box table tr.information table td{
		padding-bottom:40px;
	}
	
	.invoice-box table tr.heading td{
		background:#eee;
		border-bottom:1px solid #ddd;
		font-weight:bold;
	}
	
	.invoice-box table tr.details td{
		padding-bottom:20px;
	}
	
	.invoice-box table tr.item td{
		border-bottom:1px solid #eee;
	}
	
	.invoice-box table tr.item.last td{
		border-bottom:none;
	}
	
	.invoice-box table tr.total td:nth-child(2){
		border-top:2px solid #eee;
		font-weight:bold;
	}
	
	@media only screen and (max-width: 600px) {
		.invoice-box table tr.top table td{
			width:100%;
			display:block;
			text-align:center;
		}
		
		.invoice-box table tr.information table td{
			width:100%;
			display:block;
			text-align:center;
		}
	}
	</style>
</head>

<body>

	<div class="invoice-box">
		<table cellpadding="0" cellspacing="0">
			<tr class="top">
				<td>
					<table>
						<tr>
							<td class="title">
								<img src="{LOGO}" alt="logo" />
							</td>
							
							<td>
								<p>&nbsp;</p>
								<h2 class="page-header">{HINVOICENO}: {ID}</h2>
								<div>{HRAISED}: {RAISED}</div>
								<div>{HDUE}: {DUE}</div>
								<!--<div>{HCURRENCYCODE}: {CURRENCYCODE}</div>-->
								<div>{_JOMRES_BOOKING_NUMBER}: {BOOKING_NUMBER}</div>
								<h3><label class="label {LABEL_CLASS}">{STATUS}</label></h3>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
			<tr class="information">
				<td>
					<table>
						<tr>
							<td>
								{BUSINESS_DETAILS_TEMPLATE}
							</td>
							
							<td>
								{CLIENT_DETAILS_TEMPLATE}
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="information">
				<td>
					<h3 class="page-header">{LIPAGETITLE}</h3>
					<table width="100%" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th width="25%">{HLI_NAME}</th>
								<th>{HLI_INIT_PRICE}</th>
								<th>{HLI_INIT_QTY}</th>
								<th>{HLI_INIT_DISCOUNT}</th>
								<th>{HLI_INIT_TOTAL}</th>
								<th>{HLI_TAX_RATE}</th>
								<th>{HLI_TAX_DESCRIPTION}</th>
								<th>{HLI_TAX_AMOUNT}</th>
								<th>{HLI_INIT_TOTAL_INCLUSIVE}</th>
							</tr>
						</thead>
						<tbody>
							<patTemplate:tmpl name="rows" unusedvars="nbsp">
							<tr>
								<td>{LI_NAME} {LI_DESCRIPTION}</td>
								<td>{LI_INIT_PRICE}</td>
								<td>{LI_INIT_QTY}</td>
								<td>{LI_INIT_DISCOUNT}</td>
								<td>{LI_INIT_TOTAL}</td>
								<td>{LI_TAX_RATE}%</td>
								<td>{LI_TAX_DESCRIPTION}</td>
								<td>{LI_TAX_AMOUNT}</td>
								<td>{LI_INIT_TOTAL_INCLUSIVE}</td>
							</tr>
							</patTemplate:tmpl>
							<tr>
								<td colspan="4"></td>
								<td><strong>{JOMRES_GRANDTOTAL_EX_TAX}</strong></td>
								<td colspan="2"></td>
								<td><strong>{JOMRES_GRANDTOTAL_TOTAL_TAX}</strong></td>
								<td><strong>{JOMRES_GRANDTOTAL_INC_TAX}</strong></td>
							</tr>
							<tr>
								<td colspan="4"></td>
								<td>{GRAND_TOTAL_EX_TAX}</td>
								<td colspan="2"></td>
								<td>{GRAND_TOTAL_TAX}</td>
								<td><strong>{GRAND_TOTAL_INC_TAX}</strong></td>
							</tr>
						</tbody>
					</table>
					<br />
					<h3 class="page-header">{HINVOICE_TRANSACTIONS}</h3>
					<table width="100%" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th width="25%">{HLI_NAME}</th>
								<th>{TRANSACTION_ID}</th>
								<th>{PAYMENT_METHOD}</th>
								<th>{HLI_INIT_PRICE}</th>
								<th>{HLI_INIT_QTY}</th>
								<th>{HLI_INIT_DISCOUNT}</th>
								<th>{HLI_INIT_TOTAL}</th>
								<th>{HLI_TAX_RATE}</th>
								<th>{HLI_TAX_DESCRIPTION}</th>
								<th>{HLI_TAX_AMOUNT}</th>
								<th>{HLI_INIT_TOTAL_INCLUSIVE}</th>
							</tr>
						</thead>
						<tbody>
							<patTemplate:tmpl name="transaction_rows" unusedvars="nbsp">
							<tr>
								<td>{LI_NAME} {LI_DESCRIPTION}</td>
								<td>{TRANSACTION_ID}</td>
								<td>{PAYMENT_METHOD}</td>
								<td>{LI_INIT_PRICE}</td>
								<td>{LI_INIT_QTY}</td>
								<td>{LI_INIT_DISCOUNT}</td>
								<td>{LI_INIT_TOTAL}</td>
								<td>{LI_TAX_RATE}%</td>
								<td>{LI_TAX_DESCRIPTION}</td>
								<td>{LI_TAX_AMOUNT}</td>
								<td>{LI_INIT_TOTAL_INCLUSIVE}</td>
							</tr>
							</patTemplate:tmpl>
							<tr>
								<td colspan="10"></td>
								<td><strong>{HINITTOTAL}</strong></td>
							</tr>
							<tr>
								<td colspan="10"></td>
								<td><strong>{OUTSTANDING_TOTAL}</strong></td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</table>

	</div>
</body>
</html>

</patTemplate:tmpl>

