<div class="space-6"></div>

{{#page.invoice}}
<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
	 <div class="widget-box transparent invoice-box">
	  <div class="widget-header widget-header-large">
		<h3 class="grey lighter pull-left position-relative">
			<i class="icon-leaf green"></i>
			{{title}}
		</h3>
				
		<div class="widget-toolbar no-border invoice-info">
			<span class="invoice-info-label">Invoice:</span> <span class="red">#{{number}}</span>
			<br />
			<span class="invoice-info-label">Date:</span> <span class="blue">{{date}}</span>
		</div>
		
		<div class="widget-toolbar hidden-480">
			<a href="#"><i class="icon-print"></i></a>
		</div>
	  </div>
	  
	  
	  <div class="widget-body"><div class="widget-main padding-24">
				<div class="row">
					<div class="col-sm-6">
						<div class="row">
							<div class="col-xs-11 label label-lg label-info arrowed-in arrowed-right"><b>Company Info</b></div>
						</div>
						<div class="row">
							<ul class="list-unstyled spaced">
								<li><i class="icon-caret-right blue"></i>Street, City</li>
								<li><i class="icon-caret-right blue"></i>Zip Code</li>
								<li><i class="icon-caret-right blue"></i>State, Country</li>
								<li><i class="icon-caret-right blue"></i>Phone: <b class="red">111-111-111</b></li>
								<li class="divider"></li>
								<li><i class="icon-caret-right blue"></i>
									Paymant Info
								</li>
							</ul>
						</div>
					</div><!--/span-->
					
					<div class="col-sm-6">
						<div class="row">
							<div class="col-xs-11 label label-lg label-success arrowed-in arrowed-right"><b>Customer Info</b></div>
						</div>
						<div>
							{{#customer}}
							<ul class="list-unstyled  spaced">
								{{#address}}
								<li><i class="icon-caret-right green"></i>{{.}}</li>
								{{/address}}
								<li class="divider"></li>
								<li><i class="icon-caret-right green"></i>
									{{contact}}
								</li>
							</ul>
							{{/customer}}
						</div>
					</div><!--/span-->
				</div><!--row-->
				
				<div class="space"></div>
				
				<div>

					<table class="table table-striped table-bordered">
						<thead>
							<tr>
								<th class="center">#</th>
								<th>Product</th>
								<th class="hidden-xs">Description</th>
								<th class="hidden-480">Discount</th>
								<th>Total</th>
							</tr>
						</thead>
						
						<tbody>
						{{#products}}
							<tr>
								<td class="center">{{id}}</td>
								<td>{{{name}}}</td>
								<td class="hidden-xs">
									{{description}}
								</td>
								<td class="hidden-480">
								{{#discount}} {{discount}} {{/discount}}
								{{^discount}} --- {{/discount}}
								</td>
								<td>{{total}}</td>
							</tr>
						{{/products}}
						</tbody>
					</table>
					
				</div>
				
				<div class="hr hr8 hr-double hr-dotted"></div>
				
				<div class="row">
					<div class="col-sm-5 pull-right">
						<h4 class="pull-right">
						Total amount : <span class="red">{{total}}</span>
						</h4>
					</div>
					
					<div class="col-sm-7 pull-left">
						Extra Information
					</div>
				</div>
				
				<div class="space-6"></div>
				
				<div class="well">
					Thank you for choosing Ace Company products.
					We believe you will be satisfied by our services.
				</div>
				

		</div></div>
	 </div>
	</div>
</div>
{{/page.invoice}}