{% extends "admin/base.html" %}
{% load admin_chart_tags %}
{% load static %}

{% block extrastyle %}
   {{ block.super }}
   <script src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
   {% include '../include_nvd3.html' %}
   <script src="{% url 'admin-charts' %}" type="text/javascript"></script>
   <script>
      $( document ).ready(function() {
       $(".change_chart_button").click(function(){
          $('.chrt_container').hide();
          $('#chart_' + $(this).data("chart-key")).show();
          $('form.stateform:visible').each(loadAnchor);
          return false;
       });
      });
   </script>

   <style>
   .admin_charts {
       padding: 0px 0px;
   }
   .chrt_container svg {
        bottom: 0px !important;
   }
   #content, .chrt_container {
        flex-grow: 1;
   }
   body {
      position: absolute;
      top: 0px;
      bottom: 0px;
   }
   #container, .chrt_flex {
      display: flex !important;
      flex-direction: column !important;
   }
   #container, .admin_charts, .chrt_flex, .chrt_container, .chrt_svg_container {
      height: 100%;
      position: relative;
   }
   </style>
{% endblock %}

{% block content %}
   {% for chart in charts %}
   <a class="change_chart_button" href="?show={{ chart.graph_key }}" data-chart-key="{{ chart.graph_key }}"><button>{{ chart.graph_title }}</button></a>
   {% endfor %}
   {% include "./chart_containers.html" with disabled=True %}
{% endblock %}
