{% extends 'base_template.html.twig' %}

{% block style %}
{{ parent() }}
{% endblock %}

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

    {######### breadcrumb widget #######}
    .breadcrumb
    {
        padding-left:5%;
        margin-top:0px;
        display:flex;
        flex-direction:row;
        height:30px;
        font-weight: bolder; 
    }
   

    .breadcrumb a
    {
        margin:5px;
        text-decoration: none;
    }
        
    .breadcrumb a:visited
    {
        color:blue;
    }
        
    h1
    {
        width:100%;
        text-align:center;
    }
        
    {######### tab widget #######}
    .tab 
    {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 60%;
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 1%;
        border-radius: 25px 25px 25px 25px;
    }
        
       
    .tab a button 
    {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        height: 100%;
    }
            
    .tab button:hover 
    {
        background-color: #ddd;
    }
        
    .tab button.active 
    {
        background-color: #ccc;
    }
        
    .tabcontent 
    {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }       


    {######### layout widget #######}
	#header-page-layout
	{
		display: flex;
		flex-direction: column;
	}

    #tab-layout
    {
        display: flex;
        flex-direction: row;
        justify-content: center;        
    }
    
    
    
    #member_content_layout
    {
        display: flex;
        flex-direction: column;
        min-height: 800px;        
    }

{% endblock %}


{% block main_content %}
          
	<div id="header-page-layout">
    	<div class="breadcrumb">
    	   <a href="{{ path('homepage') }}" > accueil</a> 
    	       {% block breadcrumb %}
    		   {% endblock %}
    	</div>
		
    	<div id="tab-layout">	
    		<div class="tab">
    		{% block tab_bar %}
    		{% endblock %}     
            </div>
        </div>		 
		            
	</div>          

    <div id="member_content_layout">
        {% block member_content %}
         toto
        {% endblock %}
    </div> 

                  
{% endblock %}






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