{% load cms_tags staticfiles sekizai_tags i18n %}

{% if error %}
    <div class="alert alert-danger" role="alert">DjangoCMS_Charts Error: {{ error }}</div>
{%  else %}

    {# Add to block one line per file to allow Sekizai to skip duplicates i.e. for multiple charts #}
    {% addtoblock "css" %}<link rel="stylesheet" href="{% static 'djangocms_charts/ext-render/chartjs-sass/css/chartjs-sass-default.min.css' %}">{% endaddtoblock %}

    {% spaceless %}

    {# ---- Chart Title ----  #}
     {% if instance.title_display %}
        <label id="{{ instance.chart_title_id }}"
               class="chart-title {{ instance.chart_title_classes }} {{ instance.chart_position }}"
               for="{{ instance.chart_id }}"
               {% if instance.chart_width %} style="width:{{ instance.chart_width }}px;" {% endif %}>{{ instance.name }}</label>
    {% endif %}

    {# ----  Chart and Legend Container ----  #}
    <div id="{{ instance.chart_container_id }}"
         class="chart-container {{ instance.chart_container_classes }} {{ instance.legend_position }} {{ instance.chart_position }}">

        {# ----  Chart Canvas object ----  #}
        <canvas id="{{ instance.chart_id }}"
                class="chart {{ instance.chart_classes }}"
                {% if instance.chart_width %} width="{{ instance.chart_width }}" {% endif %}
                {% if instance.chart_height %} height="{{ instance.chart_height }}" {% endif %}
                style="{% if instance.chart_width  %}width:{{ instance.chart_width }}px; {% endif %}
                        {% if instance.chart_height  %} height:{{ instance.chart_height }}px {% endif %}"></canvas>

        {# ---- Legend ---- #}
        {% if instance.legend_display %}
            <div id="{{ instance.legend_id }}"
                 class="chart-legend {{ instance.legend_classes }}"
                 {% if instance.chart_width and instance.set_legend_width %} style="width:{{ instance.chart_width }}px;" {% endif %}></div>
        {% endif %}

    </div>

    {% endspaceless %}

    {# Add required scripts and custom function to build chart - one line each for Sekizai to skip duplicates #}
    {%  addtoblock "js" %}<script src="{% static 'djangocms_charts/ext-render/Chart.js/1.0.2/Chart.js' %}"></script>{% endaddtoblock %}
    {%  addtoblock "js" %}<script src="{% static 'djangocms_charts/ext-render/chartjs-sass/js/chartjs-sass.js' %}"></script>{% endaddtoblock %}

    {% if global_settings %}
        {%  addtoblock "js" %}
            <script>
            {% for key, value in global_settings.items %}
                Chart.defaults.global.{{ key|safe }} = {{ value|safe }};
            {% endfor %}
            </script>
        {% endaddtoblock %}
    {% endif %}

    {%  addtoblock "js" %}
        <script>
            $(document).ready(function () {

                var chart_{{ instance.id }} = null;
                build_chart_{{ instance.id }}();
                set_title_style();

                function build_chart_{{ instance.id }}() {

                    //Get data and format colours based on ChartJs-Sass
                    var data = {{ data|safe }};
                    data = parse_css_colors("{{ instance.chart_id }}", "{{ instance.chart_type.lower }}", data);

                    var ctx = $("#{{ instance.chart_id }}").get(0).getContext("2d");

                    var options = {};
                    {% if chart_options %}
                    options = {
                        {% for key, value in chart_options.items %}
                            {{ key|safe }}: {{ value|safe }},
                        {% endfor %}
                        };
                    {% endif %}

                    //Destroy the existing chart if present
                    if(chart_{{ instance.id }} != null) {
                        chart_{{ instance.id }}.destroy();
                    }

                    chart_{{ instance.id }} = new Chart(ctx).{{ instance.chart_type }}(data, options);

                    {% if instance.legend_display %}
                        // Generate the legend
                        var legend = chart_{{ instance.id }}.generateLegend();
                        //and append it to the legend id
                        $("#{{ instance.legend_id }}").html(legend);
                    {% endif %}
                }

                // Set width of title
                function set_title_style() {
                    var width = $('#{{ instance.chart_id }}').width();
                    {% if not instance.set_legend_width %}
                        width += $('#{{ instance.legend_id }}').width();
                    {% endif %}
                    $('#{{ instance.chart_title_id }}').width(width);
                }
            });
        </script>
    {% endaddtoblock %}

{% endif %}