@Init{
	$this->RegisterJSFile("services/weightService.js");
	$this->RegisterJSFile("controllers/weight.js");
	$this->RegisterJSFile("directives/googleChart.js");
}@
@Title{Weight}@
@CSS{
	.input{
		padding:5px;
	}
	
	.input > *{
		display: block;
		width:100%;
		margin-bottom: 5px;
	}
}@
@Body{
<div ng-controller="weight">
	<div class="row col-md-4">
		<div class="col input">
			<label for="weight">Weight (KG)</label>
			<input type="number" step="any" ng-model="weight" ng-disabled="submitting" />
		</div>
		<div class="col input">
			<label for="fat">Fat %</label>
			<input type="number" step="any" ng-model="fat" ng-disabled="submitting" />
		</div>
		<div class="col input">
			<label for="save">Action</label>
			<button id="save" style="padding:5px" ng-click="addReading()" ng-disabled="submitting">Save</button>
		</div>
	</div>
	<div class="row col-lg-1">
		<google-chart data="readings" headings="headings" legend-position="top" height="400" title="Historical Weight Data" ignore="['id']"></google-chart>
	</div>
	<div class="row col-lg-1">
		<div class="col">
			<h3>Last 10 readings</h3>
			<table class="alternatingRows">
				<tr>
					<th>Date</th>
					<th>Weight</th>
					<th>BMI</th>
					<th>Fat %</th>
					<th></th>
				</tr>
				<tr ng-repeat="reading in tenLatestReadings track by $index">
					<td>{{reading.date | date:'d/M/yyyy'}}</td>
					<td>{{reading.weight}}</td>
					<td>{{reading.bmi}}</td>
					<td>{{reading.fat}}</td>
					<td><a href="#" ng-click="deleteReading(reading.id)"><img src="/images/delete.svg" /></a></td>
				</tr>
			</table>
		</div>
	</div>
	<scope-init value="readings"><?=json_encode($readings)?></scope-init>
</div>
}@