{{> widgets/breadcrumb/breadcrumb}}
<div class="app-full-content">
	<div class="layout row mx-0 wrap checkout-page">
		<div class="col s12 m12 l6 py-3">
			<h2 class="px-3 py-4 mb-0">Billing Details</h2>
			<form>
				<div class="row mx-0 mb-0">
					<div class="input-field col s12 m12 l6">
						<i aria-hidden="true" class="material-icons prefix">perm_identity</i>
						<input id="first_name" type="text" class="validate">
						<label for="first_name">First Name</label>
					</div>
					<div class="input-field col s12 m12 l6">
						<i aria-hidden="true" class="material-icons prefix">perm_identity</i>
						<input id="last_name" type="text" class="validate">
						<label for="last_name">Last Name</label>
					</div>
				</div>
				<div class="row mx-0 mb-0">
					<div class="input-field col s12 m12 l6">
						<i aria-hidden="true" class="material-icons prefix">mail</i>
						<input id="email" type="email" class="validate">
						<label for="email">E-mail</label>
					</div>
					<div class="input-field col s12 m12 l6">
						<i aria-hidden="true" class="material-icons prefix">phone</i>
						<input id="phone" type="text" class="validate">
						<label for="phone">Mobile No</label>
					</div>
				</div>
				<div class="row mx-0 mb-0">
					<div class="input-field col s12 m12 l12">
						<i aria-hidden="true" class="material-icons prefix">home</i>
						<input id="addtesss1" type="text" class="validate">
						<label for="addtesss1"> Address 1 </label>
					</div>
				</div>
				<div class="row mx-0 mb-0">
					<div class="input-field col s12 m12 l12">
						<i aria-hidden="true" class="material-icons prefix">home</i>
						<input id="addtesss2" type="text" class="validate">
						<label for="addtesss2"> Address 2 </label>
					</div>
				</div>
				<div class="row mx-0">
					<div class="input-field col s12 m12 l4">
						<i aria-hidden="true" class="material-icons prefix">public</i>
						<select id="country">
							<option value="" disabled selected></option>
							<option value="1"> Australia </option>
							<option value="2"> Argentina </option>
							<option value="3"> China </option>
							<option value="4"> India </option>
							<option value="5"> Japan </option>
							<option value="6"> Spain </option>
							<option value="7"> United States </option>
							<option value="7"> United Kingdom </option>
							<option value="7"> Germany </option>
						</select>
						<label for="country">Country</label>
					</div>
					<div class="input-field col s12 m12 l4">
						<i aria-hidden="true" class="material-icons prefix">location_city</i>
						<input id="state" type="text" class="validate">
						<label for="state"> State </label>
					</div>
					<div class="input-field col s12 m12 l4">
						<i aria-hidden="true" class="material-icons prefix">domain</i>
						<input id="city" type="text" class="validate">
						<label for="city"> City </label>
					</div>
				</div>
				<p class="px-4">
					<span class="text-muted text-md"> Shipping address is the same as billing address. </span>
				</p>
			</form>
		</div>
		<div class="col s12 m12 l6 border-left-1 p-3 style-table">
			<div>
				<div class="table__overflow responsive-scrollx">
					<table class="datatable table theme--light striped w-100">
						<thead>
							<tr>
								<th class="column text-center">Product</th>
								<th class="column text-left"></th>
								<th class="column text-center">Quantity</th>
								<th class="column text-center">Total</th>
							</tr>
						</thead>
						<tbody>
							{{#each data.cartProducts}}
							<tr>
								<td class="d-custom-flex align-items-center justify-center product-img">
									<img src="{{productImg}}" class="img-responsive" width="63" height="63">
								</td>
								<td>{{name}}</td>
								<td class="text-center">{{quantity}}</td>
								<td class="text-center">$ {{price}}</td>
							</tr>
							{{/each}}
						</tbody>
					</table>
				</div>
			</div>
			<div class="d-flex justify-content-between p-4">
				<h4 class="mb-2">Total</h4>
				<h4 class="mb-2">$ 182.00</h4>
			</div>
			<span class="text-right d-block">
				<button type="button" class="btn primary">
					<div class="">Place Order</div>
				</button>
			</span>
		</div>
	</div>
</div>
