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

{% block page_title %}Objectifs{% endblock %}


{% block message %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {% include 'html/goal_0.html' %}

            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                    {% set item = 0 %} 
                    {% set number = rows|keys|length %}
                    {% for key in rows|keys %}
                        {% set item = item + 1 %}
                        <li class="nav-item">
                            <a class="nav-link{% if (item == number) %} active{% endif %}" 
                                id="custom-tabs-{{key}}-tab" 
                                data-toggle="pill" 
                                href="#custom-tabs-{{key}}" 
                                role="tab" 
                                aria-controls="custom-tabs-{{key}}" 
                                aria-selected="{% if (item == number) %}true{% else %}false{% endif %}">
                                    {{key}}
                            </a>
                        </li>
                    {% endfor %}
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-three-tabContent">
                    {% set item = 0 %} 
                    {% for key in rows|keys %}
                        {% set item = item + 1 %}
                        {% set datas = rows[key] %}
                        <div class="tab-pane fade{% if (item == number) %} show active{% endif %}" 
                            id="custom-tabs-{{key}}" 
                            role="tabpanel" 
                            aria-labelledby="custom-tabs-{{key}}-tab">
                        
                            <table class="table" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th style="width: 10px">#</th>
                                    <th>ODD</th>
                                    <th style="width: 150px">Sensibilité</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for data in datas %}
                                <tr>
                                    <td>{{data.id}}.</td>
                                    <td>{{data.goal.name}}</td>
                                    <td>
                                        <div class="progress progress-xm mt-1">
                                            <div class="progress-bar" style="background-color: {{data.goal.color}}; width: {{data.sensitivity}}%;">{{data.sensitivity}}%</div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>

        {% endblock %}
    {% endembed %}

{% endblock %}