{% extends "base.html.twig" %}

{% block localstyle %}
    .flot-chart {
      display: block;
      height: 350px;
    }
    .flot-chart-content {
      width: 350px;
      height: 350px;
    }

    .flot-chart-subcontent {
      height: 200px;
      width: 40%;
    }

{% endblock %}

{% block body %}
    <h1>{{ scrum.name }}</h1>

    <div class="d-flex justify-content-around mt-4">
    {% for milestone in tbstat %}
        <div class="flot-chart mr-4">
            <div id="floatdonut{{ milestone.id }}" class="flot-chart-content"></div>
            <div class="mt-3 pb-3">
            <h4>{{milestone.name|replace({" : ":"<br>"})|raw}}</h4>

            {% for column in milestone.stat %}
                <li>
                    {{ column.label }} = {{ column.total }}
                    <small class="d-flex">
                        <div id="floatsubdonut{{ milestone.id }}-{{ column.id }}" class="flot-chart-subcontent"></div>                    
                        <ul style="line-height:15px">
                            {% for label in column.labels %}
                                <li >{{label.label}} = {{label.total}}</li>
                            {% endfor %}
                        </ul>
                    </small>
                </li>
            {%endfor%}
            </div>
        </div>    
    {% endfor %}
    </div>
{% endblock %}

{% block localjavascript %}

    $(document).ready(function() {
        {% for milestone in tbstat %}
            var data = [
            {% for data in milestone.stat %}
                {
                    label: "{{ data.label}}",
                    data: {{ data.total }},
                    color: "{{ data.color }}",
                },
            {% endfor %}
            ];

            var plotObj = $.plot($("#floatdonut{{ milestone.id }}"), data, {
                series: {
                    pie: {
                        show: true
                    }
                },
            });

            {% for data in milestone.stat %}
                {% for data in milestone.stat %}
                    var data = [
                    {% for label in data.labels %}
                        {
                            label: "{{ label.label}}",
                            data: {{ label.total }},
                            color: "{{ label.color }}",
                        },
                    {% endfor %}
                    ];
                    var plotObj = $.plot($("#floatsubdonut{{ milestone.id }}-{{ data.id }}"), data, {
                        series: {
                            pie: {
                                show: true,
                                label: {
                                    show: false,
                                    radius: 3/4,
                                    threshold: 0.1,
                                    background: { 
                                       opacity: 0.5,
                                        color: '#cdcdcd',
                                    },
                                }                                
                            }
                        },
                        legend: {
                            show: false,
                        },
                    });
                {% endfor %}
            {% endfor %}
        {% endfor %}        
    });
{% endblock %}