<!doctype html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="static/css/bootstrap.min.css">
		<link type="text/css" rel="stylesheet" href="static/css/bootstrap-datetimepicker.min.css">
		<link type="text/css" rel="stylesheet" href="static/css/app.css">
	</head>
	<body>
		<div class="container app">
			<div class="row header">
				<div class="col-md-12">
					<h1>{{ header }}</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-md-8">
					<!-- <div id="map_canvas"></div> -->
					<my-map :highlight="hoverDrifterId"></my-map>
				</div>
				<div class="col-md-4 form">
					<form class="form-horizontal" v-on:submit.prevent>
						<div class="form-group row">
							<label for="" class="col-sm-3 control-label">Drifter list</label>
							<lat-lon-adder></lat-lon-adder>
						</div>
						<div class="form-group">
							<label for="" class="col-sm-3 control-label"></label>
							<div class="col-sm-9">
								<drifter-list :drifters="drifters" v-on:drifter-hover="onDrifterHover"></drifter-list>
							</div>
						</div>
						<div class="form-group">
							<label for="date" class="col-sm-3 control-label">Start time</label>
							<div class="col-sm-9">
								<date-time-picker v-on:calendar-change="onCalendarChange"></date-time-picker>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-sm-3 control-label"></label>
							<div class="col-sm-9">
							</div>
						</div>
						<div class="form-group">
							<label for="date" class="col-sm-3 control-label">End time</label>
							<div class="col-sm-9">
								<label for="date" class="control-label">{{endTime}} (start time + 72hrs)</label>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-sm-3 control-label"></label>
							<div class="col-sm-9">
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-sm-3 control-label">Dataset</label>
							<div class="col-sm-9">
								<dataset-radio :dataset="dataset" v-on:dataset-change="onDatasetChange"></dataset-radio>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-sm-3 control-label"></label>
							<div class="col-sm-9">
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-sm-3 control-label">Method</label>
							<div class="col-sm-9">
								<method-radio :track-id="trackId" v-on:method-change="onMethodChange"></method-radio>
							</div>
						</div>
  						<div class="form-group">
  							<div class="col-sm-12" style="text-align: right;">
								<submit-buttons v-on:form-submit="onFormSubmit"></submit-buttons>
							</div>
  						</div>
  					</form>
				</div>
			</div>
		</div>

		<script data-main="static/javascript/app" src="static/javascript/lib/require-2.3.2.min.js"></script>
	</body>
</html>