<html>
<head>
	<title>Locations App</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/userShow.js"></script>
</head>
<body>

	<div id="container">
		<div id="header">
			<% include ../title_partial.ejs %>
		</div>

		<main>
			<div id="map-canvas"></div>
			<div id="control-panel">
					<a href="/locations"><p>All locations</p></a>
					<a href="/users"><p>Back to all users</p></a>
					<p id="users-title">"Username's" locations</p>
					
					<p>add a new location</p>
					<form action="??" method="POST">
						<input type="text" name="name" placeholder="name">
						<input type="text" name="lat" placeholder="latitude">
						<input type="text" name="lng" placeholder="longitude">
						<input type="submit">				
					</form>

					<div id="locations-container">
					<!-- something -->
							<div class="location">
								<p>"Location 1"</p>
							</div>
					</div>

					<form action="??" method="POST">
						<input type="hidden" name="_method" value="DELETE">
						<button id="delete-button">Delete User</button>
					</form>

			</div> <!-- end control-panel -->
		</main>
	</div>

</body>
</html>