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

<div ng-if="!loading">
	<div class="container">
		<div class="row">
			<ul class="nav nav-tabs" role="tablist">
				<li><a href="/#/">Current Tag Values</a></li>
				<li><a href="/#/latest_stroke">Last Stroke</a></li>
				<li class="active"><a href="/#/totals">Daily Totals</a></li>
			</ul>
			<br />
			<button ng-click="loadTotals()" class="btn btn-large btn-success"><i class="fa fa-refresh"></i> Reload Dashboard</button>
			<div ng-repeat="val in total_values">
				<div class="col-md-4" style="height:200px; margin-bottom:40px;">
					<just-gage id="{{val.name}}" min='val.min' max='val.max' value='val.value' options="{label:val.units,title:val.name, decimals:2, refreshAnimationType:'bounce', startAnimationType:'bounce'}"></just-gage>
					<div style="text-align:center">
						<h5>{{ val.datetime | date: 'medium'}}</h5>
						<a href="/#/tag/{{val.tag_id}}" class="btn btn-large btn-primary"><i class="fa fa-line-chart"></i> View Data</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
