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

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

        #content-layout
        {
            display: flex;
            flex-direction: column;
        }
        
        #content-config-layout
        {

            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
        }
        
        #content-config-layout ul
        {
            list-style-type: none;
        }
        
        #configuration-menu
        {

            flex:1;
        }
        
        #admin-config-layout
        {

            flex: 4;
            margin-left: 20px;
            border: solid 1px;
            border-radius: 10px;
        }
        
        .menu-element
        {
            border: solid 1px;
            border-radius: 10px;
            flex:1;
            display: flex;
            flex-direction: column;
            margin: 0px 0px 10px 0px;
        }
        
        .menu-label
        {    
            padding-left: 20px;
            border: solid 1px;
            margin: none;
            background-color:  #cc7bf4;
            color: white;
            font-weight: bold;
            border-radius: 10px 10px 0px 0px;
        } 
        
        
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            padding: 10px;
        }
        .grid-item {
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .grid-item h4 {
            margin: 0;
        }
        .grid-item p {
            margin: 5px 0;
        }
{% endblock %}

{% block main_content %}

    <div id="breadcrumb">
        <ul>
    {% block breadcrumb %}
        {{ parent() }}
        <li><a href="" class="breadcrumb" >> jeux</a></li>
        <li><a href="" class="breadcrumb" >> nouveau jeu</a></li>
    {% endblock %}
        </ul>
    </div>
    
    {% block tab_bar %}
        {{ parent() }}
    {% endblock %}
  
 
    {% block content %}
        
    <div id="content-layout">  
 
        <h1>{{ campaign.name }}</h1> 

        <div id="content-config-layout">
                
                <div id="configuration-menu">
                    {% block menu %}
                    {% include 'members/master/campaign/campaign_menu.html.twig' %}
                    
                    {% endblock %}
                </div>
                       
                <div id="admin-config-layout">
                    {% block campaign_details %}

                    <a href=""><button>nouvelle invitation</button></a>  





                    

                        {% if invitations | length == 0 %}
                            <p>Vous n'avez aucune demande d'invitation en attente</p>
                        {% else %}
                        {% for invitation in invitations %}                   
     <a href=""><div class="grid-container">
        <div class="grid-item">
            <h4>Nom du Destinataire</h4>
            <p>Motif: Sujet du Message</p>
            <p>Date d'envoi: 20/07/2024</p>
        </div>
        <!-- Autres messages ici -->
    </div></a>

                    {% endfor %}  
                        {% endif %}




                    {% endblock %}
                </div>
            </div>
     
           
    </div>         

    {% endblock %}

{% endblock %}

{% block javascript %}

</script>

{% endblock %}