{% 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">
		<ul class="key">
			<li class="key-item africa">
				<b style="background-color: #51AADE;"></b>
				<label>Africa</label>
			</li>
			<li class="key-item americas">
				<b style="background-color: #9e9ac8;"></b>
				<label>Americas</label>
			</li>
			<li class="key-item eastern-mediterranean">
				<b style="background-color: #EFC637;"></b>
				<label>Eastern Mediterranean</label>
			</li>
			<li class="key-item europe">
				<b style="background-color: #D8472B;"></b>
				<label>Europe</label>
			</li>
			<li class="key-item south-east-asia">
				<b style="background-color: #E38D2C;"></b>
				<label>South-East Asia</label>
			</li>
			<li class="key-item western-pacific">
				<b style="background-color: #17807E;"></b>
				<label>Western Pacific</label>
			</li>
		</ul>
	</div>
    
	<div id="dot-chart" 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 %}