{% 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;
            
        }
        
        #campaign-layout span
        {
            display: flex;
            flex-direction: row;
        }
        
        #campaign-layout div
        {
            display: flex;
            flex-direction: column;
            justify-content: center;
            
        }        


        #campaign-layout span h3
        {
            flex: 2;
        }
        
        #campaign-layout span label
        {
            flex: 8;
        }

        
        .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;
        }

        .validate
        {
            width: 200px;
            height:50px;
            background-color: #f0bc26;
        }

{% 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><button class="tablinks" >participation</button></a>
          <a href=""><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 %}

	{% block campaign %}
 
             
        <div id="campaign-layout">
            <h1>{{ campaign.name }}</h1>
            
            <span>
                <h3>maître de jeu</h3><label>{{ campaign.owner }}</label>    	       
            </span>
            <span>
                <h3>jeu</h3><label>{{ campaign.game.name }}</label>             
            </span>
            <span>
                {% if campaign.isAvailable %}                 
                    <h3>disponibilité</h3><label>disponible</label>
                {% else %}
                    <h3>disponibilité</h3><label>indisponible</label>
                {% endif %}                                    
            </span>
            <span>
                <h3>description</h3><label>{{ campaign.description }}</label>             
            </span>
            
            <span>              

            </span>               
                                            
               <div>  
                   <p>
                    Si vous souhaitez créer un personnage dans cette campagne, envoyez une demande d'invitation au maître du jeu.
                    Fournissez les informations nécessaires au maître de jeu pour qu'il puisse évaluer votre demande, en réponse aux 
                    éléments contenus dans la description de la campagne par exemple, votre identité, etc... 
                    S'il accepte, il vous enverra un lien dans votre messagerie privée pour créer un personnage.
                    </p>
               </div>
<div>
    {{ form_start(form) }}
    {{ form_widget(form) }}
    {{ form_end(form) }}
</div>

{% for error in form.vars.errors %}
    <div class="alert alert-danger">{{ error.message }}</div>
{% endfor %} 
                 
                       
        </div>
    	
    	

        
        
	{% endblock %}

{% endblock %}

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

{% endblock %}