@Init{
	$this->RegisterJSFile("services/temperatureService.js");
	$this->RegisterJSFile("controllers/temperature.js");
	$this->RegisterCSSFile("temperature.css");
	$this->RegisterJSFile("directives/googleChart.js");
}@
@Title{Temperature Logs}@
@Body{
<div ng-controller="temperature">
	<div style="text-align: center">
		<div class="circle currentTemp">
			<div class="background" style="top:{{100 - getGraphPercentage()}}%; background-color:rgb({{getRed() | number: 0}}, {{getGreen() | number: 0}}, {{getBlue() | number: 0}})"></div>
			<div class="reading">
				{{temperatureData.temperature | number: 1}}&deg;C
			</div>
			<div class="circle shadow"></div>
		</div>
	</div>
	<div>
		Outside: {{temperatureData.outsideTemperature | number: 1}}
	</div>
	<google-chart data="readings" curve-type="function" v-axis-title="Temperature" legend-position="top" tool-tip-inside="{Timestamp:H:i}: {Inside:1}" tool-tip-outside="{Timestamp:H:i}: {Outside:1}"></google-chart>
	<scope-init value="readings"><?=json_encode($readings)?></scope-init>
	<scope-init value="temperatureData"><?=json_encode($current)?></scope-init>
</div>
}@