{% extends "base.html" %}

{% block title %}
	Sites &raquo; {{site.code}} {{site.name}} &raquo; HH data
{% endblock %}

{% block inside_head %}
	<style>
		tbody > tr {
			scroll-margin-top: 8em;
		}

		tbody > tr:target {
			background-color: yellow;
		}
	</style>
{% endblock %}

{% block nav %}
	<a href="/sites">Sites</a> &raquo;
	<a href="/sites/{{site.id}}">{{site.code}} {{site.name}}</a> &raquo; HH data
{% endblock %}

{% block content %}
	<form>
		<fieldset>						
			<label>Month</label> {{input_date(None, None, 'month')}}
			<input type="submit" value="Show">
		</fieldset>
	</form>
	<table class="sticky">
		<caption>HH Data</caption>
		<thead>
			<tr>
				<th>HH Starting</th>
				<th>Imported kWh</th>
				<th>Used kWh</th>
				<th>Displaced kWh</th>
				<th>Generated kWh</th>
				<th>Exported kWh</th>
				<th>Parasitic kWh</th>
				{% for supply in supplies %}
					{% set pref = supply.name + ' '+ supply.source.code +
					(' ' + supply.generator_type.code if
					supply.generator_type != None else '') %}
					<th style="border-left-width: medium;">{{pref}} Imp kWh</th>
					<th>{{pref}} Imp Status</th>
					<th>{{pref}} Exp kWh</th>
					<th>{{pref}} Exp Status</th>
				{% endfor %}
			</tr>
		</thead>
		<tbody>
			{% for hh in hh_data %}
				{% set start_str = hh.start_date|hh_format %}
				<tr id="{{start_str}}">
					<td style="white-space: nowrap">{{start_str}}</td>
					<td>{{hh.import_kwh}}</td>
					<td>{{hh.used_kwh}}</td>
					<td>{{hh.displaced_kwh}}</td>
					<td>{{hh.generated_kwh}}</td>
					<td>{{hh.export_kwh}}</td>
					<td>{{hh.parasitic_kwh}}</td>
					{% for datum in hh.supplies %}
						<td style="border-left-width: medium;"
							>{{datum.import_kwh}}</td>
						<td>{{datum.import_status}}</td>
						<td>{{datum.export_kwh}}</td>
						<td>{{datum.export_status}}</td>
					{% endfor %}
				</tr>
			{% endfor %}
		</tbody>
	</table>
{% endblock %}
