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

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

    /***************************************
    * presentation
    ***************************************/
    
    #presentation_section
    {
        color:white;
        justify-content:space-around;
        align-items:center;
    }
    
    #description
    {
        width:50%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    
    #registration
    {
        display:flex;
        flex-direction:row;
        width:50%;
        justify-content:center;
    }
    
    #registration a
    {
        display:flex;
        flex-direction:row;
        width:30%;
        height:60px;
    }
    
    
    /***************************************
    * news
    ***************************************/
    #news_section
    {
        display:flex;
        flex-direction:column;
        margin:1% 5% 1% 5%;
    }
    
    #news_section h2
    {
        margin:0% 0% 1% 0%;
    }
    
    #news_section_layout
    {
        display:flex;
        flex-direction:row;
        height: 90%;
    }
    
    #news_section_layout article 
    {
        flex:1;
        margin:2% 4% 2% 4%;
        border: solid 1px;
        border-radius:25px 25px 0px 0px;
    }
    
    .news-header 
    {
        background-color:#743B07;
        justify-content:center;
        font-size:1em;
        align-items:center;
        height:50px;
        /*border:solid black 2px;*/
        border-radius:25px 25px 0px 0px;
        opacity:0.8;
    }
    
    .news-content
    {
        /*border:solid 2px;*/
    }
    
    .news-content p
    {
        margin:0px 10px 0px 10px;
    }  
    
    /***************************************
    * features
    ***************************************/
    .features_list
    {
  
        color:white;
        background-color:black;
        margin:0px 30% 0px 2px;
        opacity:0.5;
    }
    
    .features_list li, .features_list li a,.features_list li a:visited
    {
        margin:20px;
        text-decoration:none;
        color:white;
    }
    
    #layout_blocs
    {
        display:flex;
        flex-direction:row;
    }
    
    #layout_blocs article
    {
        flex:1;
    }
    
    #features_community_zone
    {
        display:flex;
        flex-direction:row;
        background-color:#743B07;
        height:60px;    
        justify-content:space-around;
    }

    #features_community_zone p
    {
        color:white;
        width:50%;
        text-align:center;
    }
    
    #features_community_zone a
    {
        text-align:center;
        align-items:center;
        height:100%;
        width:50%;
    }
    
    #features_community_zone a button
    {
        width:40%;
        height:100%;    
    } 
    
    /***************************************
    * activities
    ***************************************/
   #activity_section
   {

        display: flex;
        flex-direction: column;
        margin:1% 5% 1% 5%;
   }
   
   #activity_section h2
   {
        margin:2% 0% 1% 0%;
   }
   
   .activity_section_layout
   {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }
    
    
   .line
   {
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
       align-items: center;
   }
    
    .box
    {
        width: 250px;
        height: 100px;
        border: solid 1px;
        margin: 20px 50px 20px 50px ;
        border-radius:15px 15px 0px 0px;
        display: flex;
        flex-direction: column;
        
    }
    
    .box header
    {

        font-size:1em;
        background-color:red; 
        justify-content:center;   
        align-items:center;
        border-radius:15px 15px 0px 0px;
        background-color:#743B07;
        opacity:0.8;
        width: 100%;
        height: 30px;
    }
    
    .box div
    {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    
    .icone-activity
    {
        width: 70%;
        height: 100%;
    }
    
    .box label
    {
        height: 100%;
        width: 30%;
        margin-left: 2px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
}

{% endblock %}

{% block main_content %}

        <!-- ---------------------------------- SECTION PRESENTATION ------------------------------------------------------->

    <section id="presentation_section"  style="background-image: url( {{ asset ('img/portal/homepage/presentation_1.jpg') }});
    									min-height:600px;background-repeat:repeat;background-size:cover;height:100%; "  >
    								
    	<div id="presentation-logo">
				<img src="{{ asset('img/portal/homepage/logo_160.png') }}" alt="logo" >   							
    	</div>
    		
    	<div id="description">					
        	<p>Univertuel est un portail orienté vers l'imaginaire, et les jeux au sens large.</p>
        	<p>Il vous propose, chers rôlistes divers services pour vous aider à concevoir, jouer et suivre les campagnes de vos univers favoris.</p>
        	<p><strong>Vous ne connaissez pas?</strong><p>
        		
        </div>
    	
        <span id="registration">
        	<a href="{{ path('registration') }}" ><button class="generic-btn">créer un compte</button></a>
        </span>
    	
    </section>
    
        <!-- ---------------------------------- SECTION NEWS      ------------------------------------------------------->
        
	<section id="news_section">
    		
    	<h2 class="section_title">actualités
    	</h2>
			
		<div id="news_section_layout">

            {% for announcement in onTopAnnouncements %}
                
                <article>
                    <header class="news-header">
                        <h3>{{ announcement.title }}</h3>
                    </header>
                    <section class="news-content">
                        <p>{{ announcement.content | raw }}</p>
                        <a href="{{ path('announcement', {'announcementid': announcement.id}) }}">en savoir plus</a>
                    </section>
                </article>
            {% endfor %}        
 
				
		</div>
			
    </section>

        <!-- ---------------------------------- SECTION FEATURES     ------------------------------------------------------->

	<section id="features_section">
    	
        <div id="layout_blocs">
    	   <article class="bloc" style="background-image: url( {{ asset ('img/portal/homepage/features1.jpg') }});  
    								min-height:600px;background-repeat:no-repeat;background-size:cover; " id="bloc_player"> 
    								
    			<ul class="features_list" ><h3>fonctionnalités pour les joueurs</h3>
    				<li>rejoindre une campagne et y créer un ou plusieurs personnages</li>
    				<li>une création de personnage automatisée </li>
    				<li>modifier le personnage selon les autorisations du maître de jeu dans et en dehors d'une partie</li>
    				<li>faire participer leur personnage au scenario préparé par le maître de jeu</li>
    				<li>lors des parties, effectuer les lancés de dès requis sur sa feuille de personnage</li>
    				<li>accéder aux diverses informations de la campagne</li>
    				<li>prendre des notes sur le scénarios en cours et les sauvegarder dans la campagne</li>
    				<li>et bien plus encore...</li>
    				<li><a href="">en savoir plus</a></li>
    			</ul>
    		</article>
    		<article class="bloc" id="master" style="background-image: url( {{ asset ('img/portal/homepage/features2.jpg') }});  
    								min-height:600px;background-repeat:no-repeat;background-size:cover; " id="bloc_master">
    				
    			<ul class="features_list" ><h3>fonctionnalités pour les maîtres du jeu</h3>
    				<li>créér une campagne de jeu</li>
    				<li>gérer le suivi des personnages joueurs tout au long de la campagne</li>
    				<li>personnaliser des éléments de la fiche de personnage </li>
    				<li>créer plus facilement des scénarios grace au système d'aide</li>
    				<li>partagez avec vos joueurs des éléments de jeu de votre campagne</li>
    				<li>créer vos pnj de manière automatique et rapide</li>
    				<li>et bien plus encore...</li>
    				<li><a href="">en savoir plus</a></li>
    			</ul>
    		</article>
    	</div>
    	
    	<div id="features_community_zone">
    		<p>Soyez nombreux à rejoindre la communuté des rôlistes Univertuel</p>
    			<a href="{{ path('registration') }}"  ><button class="generic-btn">créer un compte</button></a>
    	</div>
    		
    </section>
	
        <!-- ---------------------------------- SECTION ACTIVITIES     ------------------------------------------------------->	
	
	<section id="activity_section">

    	<h2 class="section_title">activités</h2>
				
		<div class="activity_section_layout">
		
		  <div class="line">
            <div class="box">
                <header>actualités</header>
                <div>
                    <div class="icone-activity"></div>
                    <label>{{ announcements | length }}</label>
                </div>    
            </div>
            
            <div class="box">
                <header>articles</header>
                <div>
                    <div class="icone-activity"></div>
                <label>{{ articles | length }}</label>
                </div>    
            </div>
            
            <div class="box">
                <header>jeux</header>
                <div>
                    <div class="icone-activity"></div>
                    <label>{{ games | length }}</label>
                </div>    
            </div>		  
		  </div>
		  
		  
		  <div class="line">

            <div class="box">
                <header>membres</header>
                <div>
                    <div class="icone-activity"></div>
                <label>{{ users | length }}</label>
                </div>    
            </div>
            
            <div class="box">
                <header>campagnes</header>
                <div>
                    <div class="icone-activity"></div>
                <label>{{ campaigns | length }}</label>
                </div>    
            </div>
            
            <div class="box">
                <header>personnages</header>
                <div>
                    <div class="icone-activity"></div>
                    <label>{{ figures | length }}</label>
                </div>    
            </div>		  
		  </div>  



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

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