{% extends 'members/members_template.html.twig' %}

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

	    #breadcrumb
        {
            background-color: #7bdcf4;
        }
        	
        #campaign-layout
        {
            width:100%;
            min-height: 800px;;
            display:flex;
            flex-direction:column;
            
        }
        
        .line
        {
            display: flex;
            flex-direction: row;
            width:100%;
            margin: 2% 2% 2% 2%;
            justify-content: center;
            align-items: center;
            flex: 1;
        } 
       
        
        .dashboard-container {
            /*background-image: linear-gradient(to right, #fdc6f2 ,  #b2babb);*/
            background-image: linear-gradient(to right,  #9bf0fc  ,     #dbf3f7   );
            border-radius: 20px;
            border:solid 1px;
            flex: 1;
            color: #000;
            font-size: 1em;
            display: flex;
            flex-direction: column;
            height: 100%;
            /*box-shadow: 8px 10px 12px rgba(0, 0, 0, 0.7);*/
            box-shadow: 10px 12px 40px rgba(9, 202, 229, 0.7);
            margin: 2% 2% 2% 2%;
            font-weight: bold;
        }

        .dashboard-title
        {
            flex: 1;
            text-align: center;
            font-size: 2em;
        }   

       .menu-element
        {
            border: solid 1px;
            border-radius: 10px;
            flex:1;
            height: 60%;
            display: flex;
            flex-direction: column;
            margin: 0% 10% 0% 10%;
        }
        
        .menu-element ul
        {
            list-style: none;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        
        .menu-element ul li
        {
            display: flex;
            flex-direction: row;
        }
        
        .menu-element ul li label
        {
            flex: 1;
        }
          
        .menu-label
        {    
            padding-left: 20px;
            border: solid 1px;
            margin: none;
            background-color:  #7bdcf4;
            color: black;
            font-weight: bold;
            border-radius: 10px 10px 0px 0px;
        }


{% endblock %}

{% block main_content %}

	<div id="breadcrumb">
		<ul>
	{% block breadcrumb %}
	       {{ parent() }}
	       <li><a>tableau de bord</a></li>
	{% endblock %}
		</ul>
	</div>

    {% block tab_bar %}
        <div class="tab">
          <a href="{{ path('member_campaign_participation', {'id': app.user.id, 'campaign': campaign.id}) }}"><button class="tablinks" >participation</button></a>
          <a href="{{ path('member_campaign_configuration', {'id': app.user.id, 'campaign': campaign.id }) }}"><button class="tablinks" >configurer</button></a>
          <a href=""><button class="tablinks" >personnages joueurs</button></a>
          <a><button class="tablinks" >personnages non joueurs</button></a>
          <button class="tablinks" >univers</button>
          <button class="tablinks" >scenarios</button>
        </div>
    {% endblock %}



            
    	<div id="campaign-layout">

        {% block campaign %}
    	homepage
    	
    	{% endblock %}
    	</div>
     

	

{% endblock %}

{% block javascript %}
	{{ parent() }}

{% endblock %}