<div class="dbox">
  {% if box.title %}
    <h1 class="box-title">{{ box.title }}</h1>
  {% endif %}
  {% if box.description %}
    <p class="box-description">
      {{ box.description|linebreaksbr }}
    </p>
  {% endif %}
  {% if box.template %}
    {% include box.template %}
  {% else %}
    {% for item in box.items %}
      {% if item.template %}
        {% include item.template %}
      {% else %}
        {% if item.display == 'table' %}
          <div id="{{ item.html_id }}" class="box-item box-table">
            <h2 class="box-item-name">{{ item.name }}</h2>
            <table class="table {{ item.classes }}">
              <tbody>
                {% for line in item.value %}
                  <tr>
                    {% for value in line %}
                      <td class="box-item-value">{{ value|linebreaksbr }}</td>
                    {% endfor %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% elif item.display == 'list' %}
          <div id="{{ item.html_id }}"  class="box-item box-list">
            <h2 class="box-item-name">{{ item.name }}</h2>
            <ul class="list {{ item.classes }}">
              {% for li in item.value %}
                <li class="box-item-value">{{ li|linebreaksbr }}</li>
              {% endfor %}
            </ul>
          </div>
        {% elif item.display == 'highcharts' %}
          <div class="box-item box-chart {{ item.classes }}">
            {% if item.name %}<h2 class="box-item-name">{{ item.name }}</h2>{% endif %}
            {% if item.is_refreshable %}
              <div class="box-item-value" id="{{ item.value.name }}"></div>
              {% with chart_url='admin:'|add:item.value.name %}
                <script>
                  $(function () {
                    var chart, container = $('#{{ item.value.name }}');
                    $.getJSON("{% url chart_url %}", function(initial_data) {
                      container.highcharts(initial_data);
                      chart = container.highcharts();
                      setInterval(function() {
                        $.getJSON("{% url chart_url %}", function(refreshed_data) {
                          chart.series.forEach(function(v, i) {
                            v.setData(refreshed_data.series[i].data, false);
                          });
                          chart.redraw();
                        });
                      }, {{ item.value.refresh_time }});
                    });
                  });
                </script>
              {% endwith %}
            {% else %}
              <div class="box-item-value" id="{% if box.html_id %}{{ box.html_id }}-{% endif %}{{ item.html_id }}"></div>
              <script>
                var dataset = {{ item.value|safe }};
                try {
                  if (dataset.tooltip.formatter) {
                    dataset.tooltip.formatter = new Function(dataset.tooltip.formatter);
                  }
                } catch (err) {
                  console.log(err);
                }
                try {
                  if (dataset.plotOptions.pie.dataLabels.style.color) {
                    dataset.plotOptions.pie.dataLabels.style.color = new Function(dataset.plotOptions.pie.dataLabels.style.color);
                  }
                } catch (err) {
                  console.log(err);
                }
                try {
                  if (dataset.plotOptions.pie.tooltip.pointFormatter) {
                    dataset.plotOptions.pie.tooltip.pointFormatter = new Function(dataset.plotOptions.pie.tooltip.pointFormatter);
                  }
                } catch (err) {
                  console.log(err);
                }
                try {
                  if (dataset.yAxis.labels.formatter) {
                    dataset.yAxis.labels.formatter = new Function(dataset.yAxis.labels.formatter);
                  }
                } catch (err) {
                  console.log(err);
                }
                $('#{% if box.html_id %}{{ box.html_id }}-{% endif %}{{ item.html_id }}').highcharts(dataset);
              </script>
            {% endif %}
          </div>
        {% else %}
          <div id="{{ item.html_id }}" class="box-item {{ item.classes }}">
            <p>
              <span class="box-item-name">
                {{ item.name }}
              </span> <span class="box-item-value">
                {{ item.value|linebreaksbr }}
              </span>
            </p>
          </div>
        {% endif %}
      {% endif %}
    {% endfor %}
  {% endif %}
</div>
