{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeLois %}main-menu-active{% endblock %}
{% block titre %}Lois{% endblock %}
{% block body %}
<style>

    .block_pub{
        height:500px;
        max-height:800px;
        overflow:auto;
    }
    .yellowLine{
        height: 5px;
        background: gold;
        width: 60%;
        margin: 0% 20% 0% 20%;
        border-radius: 30px;
                
    }


    .titlee-page:hover {
        background-color: red;
        color: white;
        padding: 1px;
        width: 40%;
        margin-left: 30%;
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
    }
    .navListe,
    .navListe ul {
    margin:0;
    padding:0;
    list-style: none;
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background:#fff;
    font-family:Arial, sans-serif;
    }
    .navListe {
    position:relative;
    margin:0 auto;
    width:100%;
    max-width: 1200px;
    }
    .navListe ul {
    display: none;
    position:absolute;
    left:0;
    }
    .navListe ul { z-index:1; }
    .navListe ul ul { z-index:2; }
    .navListe ul ul ul { z-index:3; }
    .navListe ul ul ul ul { z-index:4; }
    /* ------------------------ */
    .navListe li {
    /*position:relative;*//*NON : important*/
    width:25%; /* 4 par ligne */
    min-width:120px;
    box-sizing:border-box;
    }
    .navListe li div {
        position:relative;
        display: block;
        height: auto;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 0 5px #333;
        border:1px solid #666;
        margin: 5px;
        padding: 5px;
        font-size: 14px;
        text-align: left;
        line-height: 24px;
        color:#000;
    }
    /* ------------------------ */
    .navListe li.hasSub > div {
    cursor:pointer;
    }
    .navListe li.hasSub > div:after { 
    content:'+';
    position:absolute;
    display:block;
    bottom:5px;
    left:90%;
    font-size:200%;
    }
    /* triangle */
    .navListe li.hasSub.active > div:after { 
    position:absolute;
    content:'';
    display:block;
    bottom:-8px;
    left:10px;
    width:0;
    height:0;
    border-style:solid;
    border-width:8px 8px 0 8px;
    border-color:deepskyblue transparent transparent transparent;
    z-index:9;
    }
    .navListe li:not(.blurred) > div {
    background-color: #ffffff;
    }
    /* ------------------------ */
    .navListe li.blurred:not(.active) > div {
    filter: blur(2px);
    box-shadow: 0 0 0 transparent;
    }
    .navListe li.blurred.active > div {
    box-shadow: 0 0 0 transparent;
    }
    /* ------------------------ */
    .navListe li div.dir {
    background-color: lightblue;
    color:midnightblue;
    }
    .navListe li.active > div.dir, .navListe li:hover > div.dir {
    background-color: deepskyblue;
    }
    .navListe li:not(.blurred):hover > div.fil {
    background-color: lemonchiffon;
    }

    .navListe li div.dir:before {
    display:inline-block;
    content:'';
    width:16px;
    height:16px;
    margin-right:5px;
    background:url(https://www.jerome-reaux-creations.fr/DVP/scripts/explorateur_dossier3/images/folder.png) no-repeat;
    }
    /* ------------------------ */
    /* TABLET */
    @media screen and (max-width:768px) {
    .navListe li {
        width:33.33%; /* 3 par ligne */
    }
    }
    /* PHONE */
    @media screen and (max-width:640px) {
    .navListe li {
        width:33.33%; /* 3 par ligne */
    }
    }
    @media screen and (max-width:480px) {
    .navListe li {
        width:50%; /* 2 par ligne */
    }
    }
    /* ------------------------ */
    .bi-folder{
        color: #e8b154;
        font-size: x-large;
        padding: 4px;
    }

    .dir::before {
        content: '📁' !important;
        font-size: 24px;
        position: absolute;
        top: 6px;
        left: 7px;
        transform: translateX(-10%);
    }

    @media (max-width: 768px) {
        .navListe li div
        {
            position: relative;
            display: block;
            height: 40px;
            background-color: #ffffff;
            border-radius: 5px;
            box-shadow: 0 0 5px #333;
            border: 1px solid #666;
            margin: 5px;
            padding: 7px;
            font-size: 10px;
            text-align: left;
            line-height: 24px;
            color: #000;
        }

        .bi-folder
        {
            color: #e8b154;
            font-size: 5px;
            padding: 4px;
        }

        .dir::before
        {
            content: '📁' !important;
            font-size: 13px;
            position: absolute;
            top: 6px;
            left: 4px;
            transform: translateX(-10%);
        }
    }

        .btn-primary{
            background: #e8b154;
            border: 1px solid #d5ad3e;
            margin-left: 6px;
        }




</style>

    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">Lois</h3>
        </div>
    </div>
    <div class="block_pub">
        {# <ul class="navListe">
            <li><div class="dir"><i class="bi bi-folder"></i>Dossier 1 Autre</li>
            <li><div class="dir"><i class="bi bi-folder"></i>Dossier 2 Download</div>
                <ul>
                    <li><div class="fil">Fichier 2.1</li>
                    <li><div class="fil">Fichier 2.2</li>
                    <li><div class="dir"><i class="bi bi-folder"></i>Dossier 2.3</div>
                        <ul>
                            <li><div class="fil">Fichier 2.3.1</li>
                            <li><div class="dir"><i class="bi bi-folder"></i>Dossier 2.3.2</div>
                                <ul>
                                    <li><div class="fil">Fichier 2.3.2.1</li>
                                    <li><div class="fil">Fichier 2.3.2.2</li>
                                </ul>
                            </li>
                            <li><div class="fil">Fichier 2.3.3</li>
                            <li><div class="fil">Fichier 2.3.4</li>
                            <li><div class="fil">Fichier 2.3.5</li>
                        </ul>
                    </li>
                </ul>
            </li>  
            <li><div class="dir"><i class="bi bi-folder"></i>Dossier 3 Important</div> 
                <ul>
                    <li><div class="dir"><i class="bi bi-folder"></i>Dossier 3.1</div>
                        <ul>
                            <li><div class="fil">Fichier 3.1.1</li>
                            <li><div class="fil">Fichier 3.1.2</li>
                            <li><div class="fil">Fichier 3.1.3</li>
                        </ul>
                    </li>
                    <li><div class="dir"><i class="bi bi-folder"></i>Dossier 3.2</div>
                        <ul>
                            <li><div class="fil">Fichier 3.2.1</li>
                            <li><div class="fil">Fichier 3.2.2</li>
                            <li><div class="fil">Fichier 3.2.3</li>
                            <li><div class="fil">Fichier 3.2.4</li>
                            <li><div class="fil">Fichier 3.2.5</li>
                            <li><div class="fil">Fichier 3.2.6</li>
                            <li><div class="fil">Fichier 3.2.7</li>
                            <li><div class="fil">Fichier 3.2.8</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><div class="dir"><i class="bi bi-folder"></i>Dossier 4 Index</li>
            <li><div class="dir"><i class="bi bi-folder"></i>Dossier 5 Jeux</li>
            <li><div class="dir"><i class="bi bi-folder"></i>Dossier 6 Logiciels</div> 
                <ul>
                    <li><div class="dir"><i class="bi bi-folder"></i>Dossier 6.1</div>
                        <ul>
                            <li><div class="fil">Fichier 6.1.1</li>
                            <li><div class="fil">Fichier 6.1.2</li>
                            <li><div class="fil">Fichier 6.1.3</li>
                            <li><div class="fil">Fichier 6.1.4</li>
                        </ul> 
                    </li>
                    <li><div class="dir"><i class="bi bi-folder"></i>Dossier 6.2</div>
                        <ul>
                            <li><div class="fil">Fichier 6.2.1</li>
                            <li><div class="fil">Fichier 6.2.2</li>
                            <li><div class="fil">Fichier 6.2.3</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><div class="dir"><i class="bi bi-folder"></i>Fichier 7</li>
        </ul> #}


        <ul class="navListe">
            {% macro render_dossiers(dossiers) %}
                {% for item in dossiers %}
                    <li class="{{ item.enfants is not empty ? 'hasSub' : '' }}">
                        <div class="dir">
                            <i class="bi bi-folder"></i>{{ item.dossier.nom }}
                        </div>

                        {# Affichage des fichiers du dossier #}
                        {% if item.lois is not empty %}
                            <ul>
                                {% for loi in item.lois %}
                                    <li>
                                        <div class="fil">
                                            <strong>{{ loi.titreFr }}</strong>
                                            <p>{{ loi.textFr }}</p>
                                            {% if loi.fichierFr %}
                                                <a href="{{ loi.fichierFr }}" class="btn btn-sm btn-primary" download>
                                                    Télécharger
                                                </a>
                                            {% endif %}
                                        </div>
                                    </li>
                                {% endfor %}
                                

                                {% if item.enfants is not empty %}
                                    {{ _self.render_dossiers(item.enfants) }}
                                {% endif %}
                            </ul>
                        {% else %}
                            <ul>
                                {% if item.enfants is not empty %}
                                    {{ _self.render_dossiers(item.enfants) }}
                                {% endif %}
                            </ul>
                        {% endif %}

                    </li>
                {% endfor %}
            {% endmacro %}

            {{ _self.render_dossiers(lois) }}
        </ul>


    </div>

{% endblock %}
{% block js %}
<script>
    $(function(){
        $('.navListe').each( function(){
                $(this).find('li').each(function() 
                {
                    if( $(this).find('ul').length > 0) 
                    {
                        $(this).addClass('hasSub'); // avec sous-menu
                    }
                });
        });
    });
    $(document).on('click', '.navListe li > div.dir', function(event) {
        event.stopPropagation(); // important
        var this_li = $(this).parent('li');
        var this_ul = $(this).parent('li').find('ul:first');

        $('.navListe li').addClass('blurred').removeClass('active');
        this_li.parents('li').addClass('active');

        if( this_ul.length > 0 ) // il existe un sous-menu
        {
            if( this_ul.is(':visible') )
            {
                this_ul.fadeOut('slow');
                this_ul.find('ul').fadeOut('slow');
                this_li.removeClass('blurred');
                this_li.siblings('li').removeClass('blurred');
            }
            else
            {
                this_li.siblings('li').find('ul').not(this_ul).fadeOut('slow');
                this_ul.fadeIn('slow').css({'display':'flex'});

                this_li.addClass('blurred active');
                this_li.find('li').removeClass('blurred');
            }
        } else { // pas de sous-menu
            this_li.siblings('li').find('ul').fadeOut('slow');
            this_li.removeClass('blurred');
            this_li.siblings('li').removeClass('blurred');
        }
    });

    $(document).on('click', '.navListe li > div input', function(event) {
        event.stopPropagation(); // important
    });

    $(document).on('click', '.navListe li > div input.checkAll', function(event) {
        event.stopPropagation(); // important
    $(this).parent().parent().find( 'ul input[type="checkbox"]' ).prop('checked',( $(this).is(':checked') ) );
    });
    // -------------------


</script>
{% endblock %}