{% set type = 'option' %}
<div class="d-flex customtab-periode" id="tab-option-tarif">
    <div class="col-sm-3 color-primary" style="position:relative;width:20%">
        <p class="mb-2" style="font-size:24px">Période</p> <a class="" data-popup-id="popup-add-periode-{{ type }}" data-dxpopup="" data-popup-title="Ajouter une période tarifaire" data-popup-width="auto"><i class="fa fa-plus add-icon" style="right: 2px" ></i></a>
        <ul class="nav nav-tabs flex-colum column-tab" role="tablist" data-tabs="tabs">
            {% for periode in tab.datas.result|keys %}
                <li class="nav-item px-2 w-100 d-flex" role="presentation">
                    <button class="nav-link {{ loop.index == 1 ? 'active' : '' }} w-100 text-start px-1 d-flex justify-content-between" id="{{ loop.index }}-tab" data-bs-toggle="tab" data-bs-target="#tabdata-{{ type}}-{{ loop.index }}" type="button" role="tab"  aria-selected="true">
                        <span class="periode_nom">{{ periode}}</span>
                        <span class="icons d-flex align-items-center">
                            {% if periode in tab.datas.tabPeriode %}
                             <a data-popup-id="popup-update-periode-{{ type }}-{{ loop.index }}" data-dxpopup="" data-popup-title="Modifier une période tarifaire" data-popup-width="auto"><i class="fa fa-edit "></i></a>
                                <a><i class="fa fa-trash " data-periode="{{ periode }}" data-type="option"></i></a>
                            {% endif %}
                        </span>
                    </button>
                </li>
            {% endfor %}
        </ul>
    </div>

    <div class="tab-content bg-white px-3 py-3 col-sm-9"  style="height:650px;overflow: auto;width:80%; ">
        {% for keyperiode, data in tab.datas.result %}
            <div class="tab-pane fade show {{ loop.index == 1 ? 'active' : '' }}" id="tabdata-{{ type }}-{{ loop.index }}" role="tabpanel" aria-labelledby="{{ loop.index }}-tab" style="padding-right:59px !important;position:relative">
                <table class="table table-responsive table-bordered table-striped table-sm" >
                    <thead  align="center" style="vertical-align: middle!important;">
                        <th>Option</th>
                        <th>Type</th>
                        <th>Tarif HT MOD</th>
                        <th>Tarif HT GT<br/>3-5 ans</th>
                        <th>Tarif HT GT<br/>6-20 ans</th>
                        <th class="bg-grey-dark">Tarif HT MOD 2</th>
                        <th class="bg-grey-dark">Tarif HT GT 2<br/>3-5 ans</th>
                        <th class="bg-grey-dark">Tarif HT GT 2<br/>6-20 ans</th>
                    </thead>
                    <tr>
                        {% for optionName,types in data %}
                            <tr>
                            <td rowspan="{{ types|length }}" class="bg-primary" valign="middle" align="center">{{ optionName }}</td>
                            {% for typeName, tarif in types %}
                                {% if loop.index > 1 %}
                                <tr>
                                {% endif %}
                                <td align="center">{{ typeName }}</td>
                                <td align="right">{{ tarif['MOD 1']['tarif'] }}</td>
                                <td align="right">{{ tarif['GT 1 <br/> 3-5 ans']['tarif'] }}</td>
                                <td align="right">{{ tarif['GT 1 <br/> 6-20 ans']['tarif'] }}</td>
                                <td align="right" class="bg-grey-medium" disabled="disabled">{{ tarif['MOD 2']['tarif'] }}</td>
                                <td align="right" class="bg-grey-medium">{{ tarif['GT 2 <br/> 3-5 ans']['tarif'] }}</td>
                                <td align="right" class="bg-grey-medium">{{ tarif['GT 2 <br/> 6-20 ans']['tarif'] }}</td>
                                </tr>
                            {% endfor %}
                        {% endfor %}
                    </tbody>
                </table>
                <a style="position: absolute;top:0px;right:0;" target="_blank" href="{{ path('export_tarif_periode_type', {type:type,periode: keyperiode}) }}"><i class="fa fa-download color-primary" style="font-size:2.5em;margin-right:0;"></i></a>
            </div>
            {{ include('tarif/_popup_update_tarif.html.twig') }}
        {% endfor %}
    </div>
</div>
{{ include('tarif/_popup_add_periode.html.twig') }}