{% extends "webpage/base.html" %}
{% load staticfiles %}
{% load charts_extras %}
{% block title %}
{% endblock %}

{% block scriptHeader %}
    <!--highcharts -->
        {% load_highcharts_js %}
    <!--highcharts END -->
{% endblock %}
{% block content %}
{% if fatal_error %}
<h1>{{ error_msg|safe }}</h1>
{% else %}
<div class="container">

    <div class="panel panel-default">
        <div class="panel-heading" style="text-align:center;">
            <h1>{{ data.title }}</h1>
            <legend>{{ data.items }}</legend>
           <button  type="button" class="btn btn-default" data-toggle="collapse" data-target="#howtocite" id="howtocite-btn">JSON data</button>

     <div id="howtocite" class="collapse">
     <p>{{data}}</p>
     </div>
        </div>
        <div class="panel-body">
            <div id="bar"></div>
        </div>
        {% if error %}
            <h4>{{ error_msg|safe }}</h4>
        {% endif %}
    </div>

{% config_highcharts %}

</div>
{% endif %}
{% endblock %}
