{% extends "admin_tools/dashboard/module.html" %}
{% load nvd3_tags %}

{% if module.require_chart_jscss %}
    {% load static %}
{% endif %}

{% block module_content %}
    {# Jquery CDN : Needed when using jquery_on_ready=True #}
    {% if module.extra.jquery_on_ready %}
        <script src="{% static "admin_tools/js/jquery/jquery.min.js" %}"></script>
    {% endif %}
    {% if module.require_chart_jscss %}
        <link media="all" href="{% static 'nvd3/build/nv.d3.css' %}" type="text/css" rel="stylesheet" />
        <script src="{% static 'd3/d3.js' %}" type="text/javascript"></script>
        <script src="{% static 'nvd3/build/nv.d3.js'%}" type="text/javascript"></script>
    {% endif %}

    <script type="text/javascript">
        var init_value = true;
        var html_string = '<svg style="width:{{module.chart_width}};height:{{module.chart_height}}px;"></svg>';

        function loadChart_{{ module.interval }}_{{ module.graph_key}}(){
            {% load_chart module.chart_type module.values module.chart_container module.extra %}
        }

        $('body').on('click', 'a.ui-tabs-anchor[href$={{ module.interval }}_{{ module.graph_key}}]', 'click', function(event)
        {
            var href_val = event.target.hash;
            if(href_val.indexOf('{{ module.interval }}_{{ module.graph_key}}' ) != -1)
            {
                $('#{{module.chart_container}}').empty().append(html_string);
                loadChart_{{ module.interval }}_{{ module.graph_key}}();
            }
            init_value = false;
        });
        // init
        if(init_value){
            loadChart_{{ module.interval }}_{{ module.graph_key}}();
        }
    </script>

    {% if module.form_field %}
        <form class="stateform" action="." method="POST" enctype="multipart/form-data">{% csrf_token %}
            {{ module.form_field }}
        </form>
        <br/>
    {% endif %}

    {% include_container module.chart_container module.chart_height module.chart_width %}

{% endblock %}