<!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;
        }
    </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 />
	
	<h2 align="center">Customer registration</h2>
	<form th:action="@{'/buy;jsessionid=' + ${sessionId}}" method="get">
		<div>
			<label class="radio">
				<input type="radio" name="RETURNING_FLAG" value="Y" checked="checked" />I am existing user
			</label>
		</div>
		<div>
			<label class="radio">
				<input type="radio" name="RETURNING_FLAG" value="N" />I am a first time customer
			</label>
		</div>
		<hr />
		<div>
			<strong>If you are an existing customer, enter your username and password:</strong><br/>
			<br />
			<fieldset>
				<label>
					Username:
				</label>
				<input name="username" type="text" />
				<label>
					Password:
				</label>
				<input name="password" type="password" />
			</fieldset>
		</div>
		<hr />
		<div>
			<strong>If you are a first time customer, enter the details below:</strong><br />
			<br />
			<fieldset>
				<label>Enter your birth date (mm/dd/yyyy):</label>
				<input name="birthdate" />
				<label>Enter your first name: </label>
				<input name="fname" />
				<label>Enter your last name: </label>
				<input name="lname" />
				<label>
					Enter your address 1:
				</label>
				<input name="street1" />
				<label>
					Enter your address 2:
				</label>
				<input name="street2" />
				<label>
					Enter your City, State, Zip:
				</label> 
				<input name="city" placeholder="City" /> 
				<input name="state" placeholder="State" /> 
				<input name="zip" placeholder="Zip" />
				<label>
					Enter your Country: 
				</label>
				<input name="country" />
				<label>
					Enter your Phone: 
				</label>
				<input name="phone" />
				<label>
				Enter your Email: 
				</label>
				<input name="email" />
				<label>
					Special Instructions: 
				</label>
				<textarea name="data" rows="4" cols="65"></textarea>
				<input th:if="${customerId}" type="hidden" th:value="${customerId}" name="C_ID" />
				<input th:if="${shoppingId}" type="hidden" th:value="${shoppingId}" name="SHOPPING_ID" />
			</fieldset>
		</div>
		<center><input type="submit" value="Submit" class="btn" /></center>
	</form>
</div>
</body>
</html>