<html>
<body>
<div id="div-zero"></div><p/>
<h2>Participants</h2>

	<div class="container" role="main">
		<div class="well">

			<h5 class="subhead muted">Participants & Locations</small></h5>
			<div class="row-fluid">
				<div id="div-four" class="span6">
					<table class="displayTable table table-striped table-condensed">
						 <tbody>
							 <tr>
								<th>Name</th>
								<th>Location</th>
								<th><i class="icon-envelope"></i></th>
								<th></th>
							 </tr>
							 <tr class="controls">
									<td><input name="participantName" class="name input-small" placeholder="Enter Name" type="text"></td>
									<td>
										<select name="location" class="location" data-placeholder="Choose a location...">
											<option></option>
										</select>
									</td>
									<td><input class="notify" type="checkbox" name="notify"></td>
									<td><a class="add btn btn-primary" href="#">Add</button></td>
							 </tr>
						</tbody>
					</table>
				</div>
				<div class="span6 primary-info">
					<div class="alert alert-info hide">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						<strong>Important!</strong> Please select a <i class="icon-star"></i>Primary Location below.
					</div>
					<table class="table well table-condensed">
						<thead>
							<tr>
								<th></th>
								<th>Location</th>
								<th>Primary Investigator</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	
<div id="div-two">
<button id="back">Back</button>&nbsp;<button id="next">Next</button>
</div>
	<!-- Mustache Templates -->
	<script type="text/templates" class="locationOptionsTemplate">
		{{#locations}}
			<option>{{.}}</option>
		{{/locations}}
	</script>
	<script type="text/templates" class="newRowTempate">
		<tr class="hide">
			<td class="participant">{{name}}</td>
			<td class="location-name">{{location}}</td>
			<td><input type="checkbox" name="notify" {{checked}}></td>
			<td><a href="#" class="delete btn btn-danger"><i class="icon-trash icon-large"></i></a></td>
		</tr>
	</script>
	<script type="text/templates" class="newPrimaryTemplate">
		{{#locations}}
		<tr>
			<td class='primary-location'><label><i class="icon-star-empty icon-large"></i><input type="radio" name="primary" value="{{location}}" {{#primary}}checked{{/primary}} class="hide" aria-hidden="true"></label></td>
			<td class='location-name'>{{location}}</td>
			<td class='primary-investigator'><a href="#" class="edit-primary-investigator"><i class="icon-pencil"></i> {{primaryInvestigator}}</a></td>
		</tr>
		{{/locations}}
	</script>
	<script type="text/templates" class="piOptionsTemplate">
		<button type="button" class="close" data-dismiss="select">&times;</button>
		<select name="pi" class="input-medium piSelect">
			{{#participants}}
				<option value="{{.}}">{{.}}</option>
			{{/participants}}
		</select>
	</script>
	<script type="text/templates" class="projectNameTemplate">
		{{trackingNumber}}&nbsp;/&nbsp;{{officialName}}<br/>
	</script>
	<!-- JS -->
	<script src="./js/jquery.min.js"></script>
	<script src="./bootstrap/js/bootstrap.min.js"></script>
	<script src="./datepicker/js/bootstrap-datepicker.js"></script>
	<script src="./chosen/chosen/chosen.jquery.min.js"></script>
	<script src="./js/jquery.maskedinput-1.3.min.js"></script>
	<script src="./js/jquery.validate.min.js"></script>
	<script src="./js/app-validate.js"></script>
	<script src="./js/mustache.min.js"></script>
	<script src="./js/project-participants.js"></script>
</body>
</html>