<div ng-if="loading" class="container">
	<div class="row">
		<div class="col-md-12 well" style="text-align:center;">
			<h1>Loading Dashboard...</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="loadDashboard()" class="btn btn-large btn-danger"><i class="fa fa-refresh"></i> Reload Dashboard</button>
			</div>
		</div>
	</div>

	<div ng-if="!error" class="container">
		<div class="row">
			<button ng-click="loadDashboard()" class="btn btn-large btn-success"><i class="fa fa-refresh"></i> Reload Dashboard</button>
			<a href="/csv/all" class="btn btn-large btn-primary"><i class="fa fa-download"></i> Download All Data</a>
			<div ng-repeat="val in vals">
				<div class="col-md-4" style="height:200px; margin-bottom:40px;">
					<just-gage id="{{val.name}}" min='val.minExpected' max='val.maxExpected' value='val.val' options="{label:val.units,title:val.name, decimals:2, refreshAnimationType:'bounce', startAnimationType:'bounce'}"></just-gage>
					<div style="text-align:center">
						<h5>{{ val.dtime | date: 'medium'}}</h5>
						<a href="/#/tag/{{val.t_id}}" class="btn btn-large btn-primary"><i class="fa fa-line-chart"></i> View Data</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
