<style>
.padMe {
	margin: 10px 20px;
}

.timeLabel {
	font-size: 1.2em;
}

</style>

<div ng-if="loading" class="container">
	<div class="row">
		<div class="col-md-12 well" style="text-align:center;">
			<h1>Loading Tag data...</h1>
			<img class="img-responsive" src="/images/loading.gif"  style="margin:0 auto;"/>
		</div>
	</div>
</div>

<div ng-if="!loading">
	<div ng-if="error" class="container">
		<div class="row">
			<div class="col-md=12">
				<h1>Error Caught!</h1>
				<pre>{{message}}</pre>
				<button ng-click="loadTagVals()" class="btn btn-large btn-danger"><i class="fa fa-refresh"></i> Reload Values</button>
			</div>
		</div>
	</div>

	<div ng-if="!error" class="container">
		<div class="row" style="margin-bottom:20px;">
			<div class="col-md-12">
				<h1>{{tag.name}}</h1>
				<div class="row row-flex">
					<div class="col-md-4">
						<span class="timeLabel">From: </span><quick-datepicker ng-model='startDatetime'></quick-datepicker>
					</div>
					<div class="col-md-4">
						<span class="timeLabel">To: </span><quick-datepicker ng-model='endDatetime'></quick-datepicker>
					</div>
					<div class="col-md-3">
						<button ng-click="loadTagVals(startDatetime, endDatetime)" class="btn btn-large btn-success padMe"><i class="fa fa-refresh"></i> Reload Values</button>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="tagChart" style="height:400px;">
					<linechart data="data" options="options"></linechart>
				</div>
			</div>
		</div>

		<div class="row topMargin40">
			<div class="col-md-12">

				<a href="/csv/{{tags_to_get}}/{{startDatetime | dString}}/{{endDatetime | dString }}" class="btn btn-large btn-primary padMe"><i class="fa fa-download"></i> Download Data</a>
				<button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapseJSON" aria-expanded="false" aria-controls="collapseJSON">
  					Show Source Data
				</button>
				<div class="collapse" id="collapseJSON">
					<pre>{{table_vals | json}}</pre>
				</div>
				<!-- <table class="table">
					<thead>
						<tr>
							<td>ID</td>
							<td>Value</td>
							<td>Date Added</td>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="val in data.vals">
							<td>{{val.id}}</td>
							<td>{{val.val}} {{tag.units}}</td>
							<td>{{val.dtime | date:'short'}}</td>
						</tr>
					</tbody>
				</table> -->
			</div>
		</div>
	</div>
</div>
