{% extends "base.html" %}

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

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

{% block content %}
	<!-- Layer Section -->
	<div class="layer-section">
    <!-- Section Header -->
    <div class="section-header">
        <h2>HH graph of site use</h2>
    </div>
    <!-- End Section Header -->
    <!-- Section Content -->
    <div class="section-content">
			<div class="section-data">
				<div class="standardForm textWidthAuto">
					<form>
						<fieldset>
							<input type="hidden" name="site_id" value="{{site.id}}">
							For
							<input name="months" maxlength="2" size="2" value="{{months}}">
							months finishing at the end of
							{{input_date('finish', finish_date, 'month')}}
							<input type="submit" value="Show">
						</fieldset>
					</form>
				</div>
			</div>
			<div class="section-data">
				<div class="noWrap">
					<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|hh_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|hh_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>
				</div>
			</div>
    </div>
    <!-- End Section Content -->
	</div>
	<!-- End Layer Section -->

{% endblock %}
