<!DOCTYPE html>
<html lang="en">

<head>

	<% include layout.ejs %>

</head>

<body>

<% include ../public/html/header.html %>
<% include ../public/html/navbar.html %>
<% var monthNames = ["January", "February", "March", "April", "May", "June",
  									"July", "August", "September", "October", "November", "December"]; %>
<div class="container">
<br>
<h1 class="text-center" id="sensor-location"><%=info[0]._id.location%></h1>
<hr>
<br>

<form class="text-center form-inline">
	<div class="form-group">
		<select class="form-control" id="option-year">
		<% 
			for (var i in years_list){ %>
				
				<option value="<%=years_list[i]%>"><%=years_list[i]%></option>
				
		<% } %>
		</select>
	</div>
</form>

<br>
<div id="canvas1-id">
	<canvas class="center" id="info-chart-year" width="800" height="400"></canvas>
</div>

<br>
<div id="legend-year" class="chart-legend"></div>

<form class="text-center form-inline">
	<div class="form-group">
		<select class="form-control" id="option-month">
			<% 
			for (var i in info){ %>
				
				<option value="<%=info[i]._id.month%>"><%=monthNames[info[i]._id.month -1] + ", " + info[i]._id.year%></option>
				
			<% } %>
		</select>
	</div>
</form>

<br>

<div id="canvas2-id">
	<canvas class="center" id="info-chart-month" width="800" height="400"></canvas>
</div>

<br>
<div id="legend-month" class="chart-legend"></div>
</div>

<br>
<br>

<div class="modal"><!-- Place at bottom of page --></div>

<footer class="blog-footer">
	<p>Site created and managed by Mitchell Gerber</p>
	<span>©2015</span>
	<br>
	<span>Glyphicons provided by</span><br>
	<a href="http://glyphicons.com/" target="_blank"><span>glyphicons.com</span></a>
</footer>

</body>
	
	<% include layoutBottom.ejs %>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
	<script src="/javascript/sensor_information.js"></script>
</html>