anchor.diff:      		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       		<button id="bookAppt" data-loading-text="Loading..." type="submit" value="Book" form="appt-form" class="btn btn-primary">Book</button>
     		</div>
  -	</div>
  +	</div> -->
  +<!-- OLD Modal -->
  +
  +
  +<div class="modal fade" id="bookAppointment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  +  <div class="modal-dialog">
  +    <div class="modal-content">
  +      <div class="modal-header">
  +        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  +        <h4 class="modal-title" id="myModalLabel">Book Appointment</h4>
  +      </div>
  +      <div class="modal-body">
  +        
  +        <form id="appt-form" method="post" action="<c:url value="/book_appointment"/>">
  +  				<label>With patient:</label>
  +				<select name="patient" form="appt-form">
  +					<c:forEach items="${patients}" var="p">
  +					<option value="${p.patientID}">${p.displayName}</option>
  +					</c:forEach>
  +				</select><br />
  +				<label>Date:</label>		
  +				<div id="dp" class="input-append">
  +					<input data-format="yyyy-MM-dd" type="text" name="appointmentDate">
  +					<span class="add-on">
  +						<i class="icon-calendar"></i>
  +					</span>
  +				</div>
  +				<label>Time:</label>
  +				<div id="tp" class="input-append">
  +					<input data-format="hh:mm:00" type="text" name="appointmentTime">
  +				    <span class="add-on">
  +				    	<i class="icon-time"></i>
  +				    </span>
  +				</div>
  +  			</form>
  +
  +      </div>
  +      <div class="modal-footer">
  +        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  +        <button id="bookAppt" data-loading-text="Loading..." type="submit" value="Book" form="appt-form" class="btn btn-primary">Book</button>
  +      </div>
  +    </div>
  +  </div>
  +</div>
   </body>
   </html>
positive.code: 	<title>Tapestry Admin</title>
  	<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
  		<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet" />
  		<link href="${pageContext.request.contextPath}/resources/css/bootstrap-responsive.min.css" rel="stylesheet" />  
  		<link href="${pageContext.request.contextPath}/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
  		<link href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css" rel="stylesheet" />
  				
  		<script src="${pageContext.request.contextPath}/resources/js/jquery-2.0.3.min.js"></script>
  		<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
  		<script src="${pageContext.request.contextPath}/resources/js/bootstrap-datetimepicker.min.js"></script>
  	
  	<style type="text/css">
  		.row-fluid{
  
negative.code: 				    	</div>
  				    </div>
  				</div>
  			</c:forEach> -->
  			<br />
  <!-- 			<a href="#bookAppointment" class="btn btn-primary" data-toggle="modal">Book new appointment</a>
   -->				    									
  			<!-- <table class="table">
  				<tr>
  					<th>Volunteer</th>
  