{% extends '@AdminLTE/layout/mesodd-layout.html.twig' %}

{% block page_title %}
    {% if is_granted('ROLE_MANAGER') %} 
        {% trans %}graph.entite.title{% endtrans %} 
    {% elseif app.user.direction %}
        {% trans %}graph.ministry.title{% endtrans %} 
    {% elseif app.user.commune  %}
        {% trans %}graph.commune.title{% endtrans %} 
    {% elseif is_granted('ROLE_DDD')  %}
        {% trans %}graph.departement.title{% endtrans %} 
    {% endif %}
{% endblock %}

{% block page_content %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form) }}
                {{ form_widget(form) }}
            {{ form_end(form) }}    
        {% endblock %}
    {% endembed %}
 
    <div class="row">
        {% for data in datas %}
        <div class="col-6 col-md-3 text-center">

            {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
                {% set boxtype = data['color']  %}

                {% block box_title %}
                <span class="text-right">ODD {{ data['code'] }}</span>{% endblock %}
                {% block box_body %}
                    <input type="text" class="knob" value={{ data['sensitivity'] }} 
                        data-skin="tron" 
                        data-thickness="0.3" 
                        data-width="180"
                        data-height="180" 
                        data-fgColor={{ data['color'] }}
                        data-readonly="true"
                        data-linecap=round
                        > 
                {% endblock %}
            {% endembed %}

        </div>
        {% endfor %}
    </div>
    
{% endblock %}

{% block javascripts %}
<script>
        let $type = $('#ministry_sel_type');

        $type.change(function() {
            let $form = $type.closest('form');

            let data = {};
            data[$type.attr('name')] = $type.val();

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#ministry_sel_entite').replaceWith(
                        $(html).find('#ministry_sel_entite')
                    );
                }
            });
        });
    </script>
    <script>
        $(function () {
            $('.knob').knob({
                draw: function () {

                }
            })
        })
    </script>

    <script src="{{ asset('plugins/jquery-knob/jquery.knob.min.js') }}"></script>
    
{% endblock %}