<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Customer registration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" href="" th:href="@{/resources/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="" th:href="@{/resources/css/bootstrap-responsive.min.css}"/>
    <style type="text/css">
        body {
          padding-top: 20px;
          padding-bottom: 40px;
        }
        
        /* Custom container */
        .container-narrow {
          margin: 0 auto;
          max-width: 700px;
        }
        .container-narrow > hr {
          margin: 30px 0;
        }
        
        /* Main marketing message and sign up button */
        .jumbotron {
          margin: 60px 0;
          text-align: center;
        }
        .jumbotron h1 {
          font-size: 72px;
          line-height: 1;
        }
        .jumbotron .btn {
          font-size: 21px;
          padding: 14px 24px;
        }
        
        /* Supporting marketing content */
        .marketing {
          margin: 60px 0;
        }
        .marketing p + h4 {
          margin-top: 28px;
        }
        .promotional{
        	margin: auto;
        	width: 550px;
        }
        .promotional .pull-left{
        	padding-right: 10px;
        }
        .left-column table td, 
        .right-column table td{
        	width: 150px;
        	text-align: center;
        }
        .myLabel{
        	width: 150px;
        	font-weight: bold;
        	text-align: right;
        }
        .content{
        	margin-left: 10px;
        }
        
        .payment .myLabel{
        	width: 250px;
        }
    </style>
</head>
<body>
<div class="container-narrow">
	<div class="masthead">
		<ul class="nav nav-pills pull-right">
		  <li><a href="#" th:href="@{${searchUrl}}">Search</a></li>
		  <li><a href="#" th:href="@{${shoppingCartUrl}}">Shopping cart</a></li>
		  <li><a href="#" th:href="@{${orderInquiryUrl}}">Order list</a></li>
		</ul>
		<h3 class="muted"><a href="/" th:href="@{${homeUrl}}"><img th:src="@{/resources/img/logo-CloudScale.png}" /></a></h3>
	</div>
	
	<hr />
	<div th:if="${!errors.isEmpty()}" class="alert alert-error">
		<div th:each="error : ${errors}" th:text="${error}">
		</div>
	</div>
	<div th:unless="${!errors.isEmpty()}">
		<h2 align="center">Buy confirm</h2>
		<h2>Order information:</h2>
		<table class="table">
			<thead>
				<tr>
					<th>
						QTY
					</th>
					<th>
						Product
					</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="line : ${results.cart.shoppingCartLines}">
					<td th:text="${line.sclQty}">
					</td>
					<td>
						Title: <i th:text="${line.item.ITitle}"></i> - Backing: 
						<span th:text="${line.item.IBacking}"></span><br />
						SRP. $<span th:text="${line.item.ISrp}"></span>
						<span style="color: red;"><strong>Your Price: <span th:text="${line.item.ICost}"></span></strong></span>
					</td>
				</tr>
			</tbody>
		</table>
		<h2>Your order has been processed</h2>
		<div class="pull-left myLabel">
			Subtotal with discount:
		</div>
		<div class="pull-left content" th:text="${scSubTotal}">
		</div>
		<div class="clearfix"></div>
		<div class="pull-left myLabel">
			Tax (8.25%):
		</div>
		<div class="pull-left content" th:text="${scTax}">
		</div>
		<div class="clearfix"></div>
		<div class="pull-left myLabel">
			Shipping and Handling:
		</div>
		<div class="pull-left content" th:text="${scShipCost}">
		</div>
		<div class="clearfix"></div>
		<div class="pull-left myLabel">
			Total:
		</div>
		<div class="pull-left content" th:text="${scTotal}">
		</div>
		<div class="clearfix"></div>
		<h2>Order Number: <span th:text="${results.order.OId}"></span></h2>
		<h1>Thank you for shopping at TPC-W</h1>
	</div>
</div>
</body>
</html>