{% extends 'members/admin/admin_template.html.twig' %}

{% block stylesheets %}
    {{ parent() }} 
    #configuration-layout
    {

    	display: flex;
    	flex-direction: row;
    	
    }
    
    #configuration-menu
    {
    	flex: 1;
    	min-height: 500px;
    }
    
    #components-config-layout
    {
    	flex: 4;
    	border: solid 1px;
    	border-radius: 10px;
    	width: 90%;
    	padding: 10px;
    	box-shadow: rgba(0, 0, 0, 0.94) 0px 5px 15px;
    	min-height: 800px;
    }
    
    .components-menu
    {
    	border: solid;
    	border-radius: 10px;
    	width: 90%;
    	padding: 10px;
    	box-shadow: rgba(0, 0, 0, 0.94) 0px 5px 15px;
    }
    
    .menu-element ul 
    {
    	list-style-type: none;
    }
    
    .menu-element .menu-list {
    display: none; /* Masque les sous-menus par défaut */
    list-style-type: none;
    padding-left: 20px;
    transition: max-height 0.3s ease-out; /* Effet de transition */
    max-height: 0; /* Limite la hauteur du menu replié */
    overflow: hidden; /* Cache tout excédent */
}

.menu-element.open .menu-list {
    display: block;
    max-height: 500px; /* Augmente la hauteur maximale quand le menu est déplié */
}

.toggle-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    font-weight: bold;
}
    
{% endblock %}    

{% block breadcrumb %}
{{ parent() }}
    <a href="" class="breadcrumb" >> jeu</a>
{% endblock %}

{% block member_content %}
	<h1>{{ title }}</h1> 

	<div id="configuration-layout">	
    	<div id="configuration-menu">
            {% block menu %}
                {% include 'members/admin/games/game/'~ game.code ~'_menu.html.twig' %}
                        
            {% endblock %}
    	</div>
                           
        <div id="components-config-layout">
                    
            {% block components %}
            
            {% endblock %}
    
    	</div>
	</div>	
{% endblock %}

{% block javascript %}
    {{ parent() }}
    
	document.querySelectorAll('.menu-element .toggle-btn').forEach(button => {
	    button.addEventListener('click', function() {
	        const menuElement = this.parentElement; // Récupère l'élément menu-element parent du bouton
	        menuElement.classList.toggle('open');  // Ajoute ou retire la classe 'open' pour déplier/replier le sous-menu
	        const isOpen = menuElement.classList.contains('open');
	        this.textContent = isOpen ? '-' : '+'; // Change le texte du bouton entre "+" et "-"
	    });
	});


{% endblock %}