{% extends 'base_template.html' %}

{% block content %}

	{% if COPY.labels.headline %}<h1>{{ COPY.labels.headline|smarty }}</h1>{% endif %}
	{% if COPY.labels.subhed %}<h2>{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}

	<div class="legend-wrapper">
			<div class="legend">
			<p class="legend-title">&#8592; Less common  |  More common &#8594;</p>
			<div class="legend-scale">
				<ul class="legend-labels">
					<li><span style="background:#ffffcc;"></span></li>
					<li><span style="background:#ffeda0;"></span></li>
					<li><span style="background:#fed976;"></span></li>
					<li><span style="background:#feb24c;"></span></li>
					<li><span style="background:#fd8d3c;"></span></li>
					<li><span style="background:#fc4e2a;"></span></li>
					<li><span style="background:#e31a1c;"></span></li>
					<li><span style="background:#bd0026;"></span></li>
					<li><span style="background:#800026;"></span></li>
				</ul>
			</div>
		</div>
		</div>		
		
	<div id="graphic" class="graphic">  
	</div>
	

    <div class="footer">
		{% if COPY.labels.footnote %}<p>Notes: {{ COPY.labels.footnote|smarty }}</p>{% endif %}
        {% if COPY.labels.source %}<p>Data: {{ COPY.labels.source|smarty }}</p>{% endif %}
        {% if COPY.labels.credit %}<p>Credit: {{ COPY.labels.credit|smarty }}</p>{% endif %}
    </div>
	
	<script type="text/javascript">
		var DATA = {{ COPY.data.json() }};
		var LABELS = {{ COPY.labels.json() }};
	</script>

{% endblock content %}