<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	{fonts}
	<style type="text/css">

		@page { margin: 0 50px; }
		body p, body {
			overflow: hidden;
			padding: 5px 0;
			word-break: normal;
			font-family: '{misc_body_font_family}';
			font-size: {misc_body_font_size} !important;
		}

		#details-container {
			margin-top: 50px;
		}

		#details-left,
		#details-right {
			text-align: left;
			width: 40%;
			padding: 20px;
			float: left;
			box-sizing: border-box;
		}

		#details-right {
			float: right;
		}

		h1,h2 {
			font-family: '{misc_heading_font_family}' !important;
			font-size: {misc_heading_font_size};
			font-weight: {misc_heading_font_weight};
		}

		table .heading, th{
			font-family: '{table_heading_font_family}' !important;
			font-size: {table_heading_font_size};
			font-weight: {table_heading_font_weight};
			border-top: 1px solid #b5b5b5;
			border-bottom: 1px solid #b5b5b5;
		}

		thead th:first-child { 
			text-align: center;
		}

		tbody td:first-child { 
			text-align: left;
			max-width: 500px;
		}
		tbody td {
			overflow: hidden;
			padding: 10px 5px;
			word-break: normal;
			font-family: '{table_body_font_family}';
			font-size: {table_body_font_size} !important;
			text-align: center;
			border-bottom: 1px solid #e3e3e3;
			border-collapse: collapse;
		}

		.tg .woocommerce-Price-amount, .tg .woocommerce-Price-currencySymbol {
			font-size: {table_body_font_size} !important;
		}

		.text-left {
			text-align: left;
		}

		.text-center{
			text-align: center;
		}

		.text-top{
			vertical-align: top;
		}

		.tg {
			border-collapse: collapse;
			border-spacing: 0;
			margin: 0 auto;
		}
		{extra_styles}
	</style>
</head>

<body>
	<div id='wrapper' style="page-break-after: avoid;">
		<div style='text-align: center;'>
			{logo}
		</div>

		<div id="details-container" style='margin-top: 10px; text-align: center;'>
			<div id='details-left' style='margin-right: 10px'>
				<p style="margin: 0 !important; padding: 0 !important;">{store_name}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{store_address}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{store_address_2}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{store_city}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{store_state}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{store_postcode}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{store_phone_number}</p>
			</div>
			<div id='details-right'>
				<p style="margin: 0 !important; padding: 0 !important;">{customer_name}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{customer_address_1}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{customer_address_2}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{customer_city}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{customer_state}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{customer_postcode}</p>
				<p style="margin: 0 !important; padding: 0 !important;">{customer_phone_number}</p>
			</div>
		</div>
		<div style='clear: both'></div>

		<div style='margin-left: 0; margin-bottom: 5px; text-align: center'>
			<p style="font-size: 20px !important; font-weight: 700">{invoice_text}</p>
			<div style='display: inline-block; margin-right: 50px; text-align: left !important;'>
				<p><span style='text-decoration: underline; font-weight: 700;'>{order_text}:</span> {order_number} </p>
				<p><span style='text-decoration: underline; font-weight: 700;'>{date_text}:</span> {date} </p>
			</div>

			<div style='display: inline-block; text-align: left !important;'>
				<p><span style='text-decoration: underline; font-weight: 700;'>{shipping_method_text}:</span> {order_shipping_method} </p>
				<p><span style='text-decoration: underline; font-weight: 700;'>{payment_method_text}:</span> {order_payment_method} </p>
			</div>
		</div>

			<table class="tg" style='width: 100%;'>
				<thead style='background: #e3e3e3;'>
					<tr>
						{table_headings}
					</tr>
				</thead>
				<tbody>
					{table_rows}
		</tbody>
	
			</table>
			<table style='margin-top: 100px; float: right; width: 50%; margin-right: 0; border-spacing: 0; page-break-inside: avoid;page-break-after: avoid;'>
				<thead style='background: #e3e3e3'>
					<tr>
						<th style='text-align: center' colspan='2'>{summary_text}</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>{subtotal_text}</td>
						<td style='text-align: right'>{order_subtotal}</td>
					</tr>
					<tr>
						<td>{tax_text}</td>
						<td style='text-align: right'>{order_tax}</td>
					</tr>
					{order_discount_markup_cumulus}
					<tr>
						<td>{shipping_text}</td>
						<td style='text-align: right'>{order_shipping}</td>
					</tr>
					<tr>
						<td>{order_total_text}</td>
						<td style='text-align: right'>{order_total}</td>
					</tr>
				</tbody>
			</table>
	</div>
	<?php
	do_action( 'printus_template__after_template_data' );
	?>
	<div style='clear: both'></div>
	<div style='page-break-after: avoid;  page-break-inside: avoid; vertical-align: bottom; width: 100%; margin-top: 100px;'>
	{extra}
	{order_note}
	{powered_by}
	</div>
</body>
</html>
