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

{% block page_title %}
    {% if is_granted('ROLE_MANAGER') %} 
        Sensibilité par ODD par Ministère
    {% elseif app.user.direction %}
        Sensibilité par ODD du Ministère
    {% elseif app.user.commune  %}
        Sensibilité par ODD de la commune
    {% elseif is_granted('ROLE_DDD')  %}
        Sensibilité par ODD par Commune
    {% 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 %}

    {% if datas and is_granted('ROLE_MANAGER') %}
        <div class="card card-primary">
            <div class="card-header with-border">
                <h3 class="card-title"> Ministères </h3>        
            </div>
        </div>
    {% endif %}


    <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">{{ 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>


    {% if datasCommunes %}
        <div class="card card-success" style="margin-bottom : -1px;">
            <div class="card-header with-border">
                <h3 class="card-title"> Communes </h3>        
            </div>
        </div>
    {% endif %}


    <div class="row" >
        {% for data in datasCommunes %}
        <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">{{ data['name'] }}</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>
        $(function () {
            $('.knob').knob({
                draw: function () {
    
                }
            })
        })
    </script>
    
    <script src="{{ asset('plugins/jquery-knob/jquery.knob.min.js') }}"></script>
    
{% endblock %}