{% extends 'layout.twig' %}

{# TODO : put into a file #}
{% set img_picto %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20" class="svg-fill-client1">
    <path fill-rule="evenodd" d="M6.566 9.9v2.184H4.434V9.9h2.132zm0-4.316v2.132H4.434V5.584h2.132zm13 4.316v2.184H7.684V9.9h11.882zm0-4.316v2.132H7.684V5.584h11.882zm2.184 9.75v-13H2.25v13h19.5zm0-15.184c.59 0 1.1.217 1.534.65.433.433.65.945.65 1.534l-.052 13c0 .59-.208 1.092-.624 1.508a2.054 2.054 0 0 1-1.508.624h-5.434v2.184H7.684v-2.184H2.25c-.59 0-1.1-.208-1.534-.624a2.014 2.014 0 0 1-.65-1.508v-13c0-.59.217-1.1.65-1.534.433-.433.945-.65 1.534-.65h19.5z"/>
</svg>
{% endset %}
     
{% block body %}

<section class="contenu">
    <h1>{{ 'Paramétrage' | trad }}</h1>

    {{ ariane() }}



        {% for group in listeMenu | filter((item) => item.liste is not empty) %}
            <div class="conteneur">
                <h2 onclick = "showContent('content_id_{{loop.index}}');" class="nobr">
                    {{ group.LIB_GROUP }}
                    <img style="margin-left:10px" class ="pictos" id="img_content_id_{{loop.index}}" src='{{ baseUrl('IconeV2/Misc/chevron-down.svg') }}' width="20px">
                </h2>

                <div id="content_id_{{loop.index}}">
                    {% for menu in group.liste %}
                        <a class ="tuilesEtat"  title="{{ menu.titre}}" href ="{{ menu.lien }}" style="margin-left:10px;">
                            {{ img_picto }}
                            <span class = "tuilesTitle">{{ menu.titre }}</span>
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}


        <script>
            function showContent(id)
            {

                if($("#img_"+id).attr('data-ouvert')=='1')
                {
                    $("#img_"+id).attr('src', '{{ baseUrl('IconeV2/Misc/chevron-up.svg') }}');
                    $("#img_"+id).attr('data-ouvert', '0');
                }
                else
                {
                    $("#img_"+id).attr('src', '{{ baseUrl('IconeV2/Misc/chevron-down.svg') }}');
                    $("#img_"+id).attr('data-ouvert', '1');
                }
                
                $("#"+id).slideToggle(300);

            }
        </script>


        {# {% for menu in listeMenu %}
            <div style="margin-bottom: 15px;">
                <a class="link-unstyled card-link text-center myc-small h-100" 
                    href="{{ menu.lien }}" 
                    style="width: 17rem"
                >
                    <mark class="img-frame-circle">
                        {{ img_picto }}
                    </mark>
                    <mark>
                        <strong>{{ menu.titre }}</strong>
                    </mark>
                </a>
            </div>
        {% endfor %} #}

</section>
{% endblock %}