{% extends "base.html" %}

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

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

{% block content %}
	<form>
		<fieldset>
			<input type="hidden" name="site_id" value="{{site.id}}">
			<label>Months</label>
			<input type="number" name="months" maxlength="2" size="2" value="{{months}}">
			<label>Final Month</label>
			{{input_date('finish', finish_date, 'month')}}
			<input type="submit" value="Show">
		</fieldset>
	</form>

	<svg
			width="{{graphs.used.pos_hhs|length + 300}}px"
			height="{{height}}px" xmlns="http://www.w3.org/2000/svg"
			version="1.1" font-family="Overclock, sans-serif" font-size="12"
			fill="black">
		<text x="{{title.x}}" y="{{title.y}}">
			{{title.text}}
		</text>

		{% for graph_name in graph_names %}
			{% set graph = graphs[graph_name] %}
			<g transform="translate(0, {{graph.y}})">
				<text x="0px" y="0">{{graph.title}}</text>

				{% for supply in graph.supplies.values() %}
					{% set legend_y = 13 * loop.index0 + 8 %}
					<rect
							x="0px" y="{{legend_y}}px" width="10px" height="10px"
							fill="{{supply.colour}}"/>
						<text x="17px" y="{{legend_y + 8}}px">
							{{supply.text}}
						</text>

				{% endfor %}

				<g transform="translate(230, 0)">
					{% for hh in graph.pos_hhs %}
						<rect
							x="{{hh.x}}px" y="0px" width="1px"
							height="{{graph.height_pos}}px"
							fill="{{hh.background_colour}}"/>
					{%- endfor %}

					{% for hh in graph.neg_hhs %}
						<rect
							x="{{hh.x}}px" y="{{graph.height_pos}}px" width="1px"
							height="{{graph.height_neg}}px"
							fill="{{hh.background_colour}}">
						</rect>
					{%- endfor %}

					<text x="-80" y="0">kW</text>

					{% for scale_line in graph.scale_lines %}
						<rect
								x="0px" y="{{scale_line.y}}px"
								width="{{scale_line.width}}px" height="1px"/>
						<text x="-28px" y="{{scale_line.y_val}}px">
							{{scale_line.text}}
						</text>
					{% endfor %}

					{% for scale_value in graph.monthly_scale_values %}
						<text x="{{scale_value.x}}" y="{{scale_value.y}}px">
							{{scale_value.text}}
						</text>
					{% endfor %}

					{% for tick in graph.ticks %}
						<rect x="{{tick.x}}px" y="{{tick.y}}px" width="1px"
								height="4px"/>
					{% endfor %}

					{% for hh in graph.pos_hhs %}
						<rect
							x="{{hh.x}}px" y="{{hh.y}}px" width="1px"
							height="{{hh.height}}px" fill="{{hh.colour}}">
						<title>{{hh.value}} kW @ {{hh.start_date|date_format}}</title>
						</rect>
					{%- endfor %}

					{% for hh in graph.neg_hhs %}
						<rect
								x="{{hh.x}}px" y="{{hh.y}}px" width="1px"
								height="{{hh.height}}px" fill="{{hh.colour}}">
							<title>
								-{{hh.value}} kW @ {{hh.start_date|date_format}}
							</title>
						</rect>
					{%- endfor %}

					{% for day in days %}
						<text x="{{day.x}}px" y="{{day.y}}px" fill="{{day.colour}}">
							{{day.text}}
						</text>
					{%- endfor %}

					{% for month_point in month_points %}
						<text x="{{month_point.x}}px" y="{{month_point.y}}px">
							{{month_point.text}}
						</text>
					{%- endfor %}

					{% if graph_name == 'used' %}
						<text x="0px" y="{{graph.height - 30}}px">
							Poor data is denoted by a grey background and black
							foreground.
						</text>
					{% endif %}
				</g>
			</g>
		{%- endfor %}
	</svg>
{% endblock %}
