<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="/css/style.css">
	<script src="https://maps.googleapis.com/maps/api/js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
	<script type="text/javascript" src="/js/users.js"></script>
</head>
<body>

	<div id="container">
		<div id="header">
			<h1 id="title">THESE ARE LOCATIONS</h1>
		</div>

		<main>

			<div id="map-canvas"></div>

			<div id="control-panel">
				<a href="/locations"><p>All Locations</p></a>

				<div id="dataset-select-container">
					<p id="users-title">Users</p>
					<select id="dataset-select">
						<option value=""/>-------</option>
						<% for (var i=0; i < users.length; i ++) { %>
							<option value="<%= users[i].id %>"><%= users[i].username %></option>
						<% } %>
					</select>					
				</div>

				<% if (!login) { %>
					<h2>You need to login or signup to continue</h2>
			  <% } %>

				<% if (!login) { %>

					<h4>Sign up</h4>
					<form action="/users" method="POST">
						<input type="text" name="username" placeholder="username">
						<input type="text" name="email" placeholder="email">
						<input type="text" name="password" placeholder="password">
						<input type="submit">
					</form>

				<br/>
				<br/>
					<h4>Log in</h4>
					<form action="/users/login" method="POST">
						<input type="text" name="email" placeholder="email">
						<input type="text" name="password" placeholder="password">
						<input type="submit">
					</form>

				</br>
				</br>

				<% } else { %>

					<a href="/users/logout"><p>Logout</p></a>

				<% } %>

			</div>
		</main>
	</div>

</body>
</html>