{% extends 'role/member/player/player_template.html.twig' %}

{% block stylesheets %}
	{{ parent() }}  
	

	#route_games
	{
		background-color: #ecf0f1;
	}
	
	#route_users
	{
		background-color: #797d7f;
	}

	#route_news
	{
		background-color: #797d7f;
	}
	
.toggle-title {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 20px; /* pour laisser la place au +/− */
}

.toggle-title::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
}

.toggle-title.open::before {
  content: "−";
}

.toggle-content {
  display: none;
  margin-left: 20px;
}
	

{% endblock %}

{% block main_content %}

	<div class= "breadcrumbs">
		{% block breadcrumbs %}
			<a href="{{ path('homepage') }}">accueil </a>
			<a href=""> > </a>
			<a href=""> panneau d'administration</a>
		{% endblock %}
    </div>
         
	    	<nav class="user_area">
	    		<ul>
				{% block area_user %}
					{{ parent() }}	
				{% endblock %}
	    	</nav>         
         
         
    <h1 class="page_title">
    	{% block title_page %}
    	{% endblock %}
    </h1>  
    
    <div id="member_template_layout">
	    {% block body_content %}
	    	
		{{ campaign.poster }}    	
		{{ campaign.name }}
		{{ campaign.game }}
		{{ campaign.owner }}
		{{ campaign.description }}
		
		<a href="{{ path('player_figure_new', {'userid': app.user.id, 'campaignid':campaign.id }) }}" >creer un personnage</a> 
	   	<a href="{{ path('player_campaign_view_rules', {'userid': app.user.id, 'campaignid':campaign.id, 'component': 'caste' }) }}" >voir les regles</a>	</br>   	
		
		
		{% endblock %}
		

	</div> 
{% for component in datas.components %}
    <h3 class="toggle-title">{{ component.label.plural }}</h3>
    <ul class="toggle-content">
        {% for item in component.items %}
            <li>{{ item.name }}</li> {# ou item.getName() si c’est un objet #}
        {% endfor %}
    </ul>
{% endfor %}
	          	
	          	
	          			
{% endblock %}



{% block javascript %}
	{{ parent() }}
  document.querySelectorAll('.toggle-title').forEach(function(title) {
    title.addEventListener('click', function() {
      const content = this.nextElementSibling;
      const isOpen = this.classList.toggle('open'); // toggle la classe

      content.style.display = isOpen ? 'block' : 'none';
    });
  });
	
{% endblock %}