{% set type = 'prestation' %}
<div class="d-flex customtab-periode" id="tab-prestation-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-pres" 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="#tabdataprestation-{{ 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-prestation-tarif-{{ 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="prestation"></i></a>
                            {% endif %}
                        </span>
                    </button>
                </li>
            {% endfor %}
        </ul>
    </div>

    <div class="tab-content bg-white px-3 py-3 col-sm-9" style="width:80%;">
        {% set path = path('update_tarif_periode_type', {type: type})  %}
        {% for keyPeriode, data in tab.datas.result %}
            <div class="tab-pane fade show {{ loop.index == 1 ? 'active' : '' }}" id="tabdataprestation-{{ loop.index }}" role="tabpanel" aria-labelledby="{{ loop.index }}-tab">
                {% set action = 'show' %}
                {{ include('tarif/_table_prestation_tarif.html.twig') }}
            </div>
            {% set tabPeriode = keyPeriode|split('/')%}
            {% set periode = tabPeriode[2] ~ '-' ~ tabPeriode[1] ~ '-' ~ tabPeriode[0] %}
            {% set action = 'update' %}
            {% set id = 'popup-prestation-tarif-' ~ loop.index %}
            {{ include('tarif/_popup_prestation_tarif.html.twig') }}
        {% endfor %}
    </div>
</div>

{% set id = 'popup-add-periode-pres' %}
{% set path = path('add_tarif_periode_type', {type: type})  %}
{% set action = 'add' %}
{{ include('tarif/_popup_prestation_tarif.html.twig') }}