{% extends 'members/member/member_template.html.twig' %}

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

    {######### layout widget #######}
    .line
    {
        display: flex;
        flex-direction: row;
        width:100%;
        margin: 2% 2% 2% 2%;
        justify-content: center;
        align-items: center;
        flex: 1;
    }
    
    
    {######### menu-element widget #######}
    .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 breadcrumb %}
{{ parent() }}
    <a href="{{ path('member_dashboard') }}" > > tableau de bord</a>
{% endblock %}

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

{% block member_content %}
    <div class="line">           
        <div class="menu-element"><label class="menu-label">mes contacts</label>
            <ul>
                <li><label>utilisateurs totaux : </label><label>{{ users | default(0) }}</label></li> 
                <li><label>utilisateurs actifs : </label><label>{{ users | default(0) }}</label></li>
                <li><label>utilisateurs bannis  : </label><label>{{ users | default(0) }}</label></li>
            </ul>
        </div> 

        <div class="menu-element"><label class="menu-label">mes messages</label>
            <ul>
                <li><label>messages reçus : </label><label>{{ users | default(0) }}</label></li> 
                <li><label>messages envoyés : </label><label>{{ users | default(0) }}</label></li>
                <li><label>nouveaux messages : </label><label>{{ users | default(0) }}</label></li>
            </ul>
        </div> 
        
    </div>
   
   
    <div class="line"> 
        <div class="menu-element"><label class="menu-label">mes campagnes</label>
            <ul>
                <li><label>utilisateurs totaux : </label><label>{{ users | default(0) }}</label></li> 
                <li><label>utilisateurs totaux : </label><label>{{ users | default(0) }}</label></li>
                <li><label>utilisateurs totaux : </label><label>{{ users | default(0) }}</label></li>
            </ul>
        </div> 
 
        <div class="menu-element"><label class="menu-label">mes personnages</label>
            <ul>
                <li><label>personnages totaux : </label><label>{{ users | default(0) }}</label></li> 
                <li><label>personnages totaux : </label><label>{{ users | default(0) }}</label></li>
                <li><label>personnages totaux : </label><label>{{ users | default(0) }}</label></li>
            </ul>
        </div> 
    </div>            
        
{% endblock %}

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