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

{% block stylesheets %}
	{{ parent() }}  
	{# <link href="{{ asset('style/portal/homepage.css') }}" rel="stylesheet" media="screen" />  #}
    /***************************************
    * presentation
    ***************************************/
    
    #presentation_section
    {
    	color:white;
    	display:flex;
    	flex-direction:column;
    	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;

    }
    
    #news_section_layout article 
    {
    	flex:1;
    	margin:2% 4% 2% 4%;
    }
    
    .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_section
    {
    	display:flex;
    	flex-direction:column;
    }
    
    .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;
    }
    'controller_name' => 'PortalController',
    #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:0% 0% 1% 0%;
    }
    
    .activity_section_layout
    {
    	display:flex;
    	flex-direction:column;
    	justify-content:space-around;   	
    	flex:1;
    }
    
    .activity_section_layout div
    {
    	flex:1;
    	display:flex;
    	flex-direction:row;
    	justify-content:space-around;
    	margin:50px 0px 50px 0px;
    }
    
    .activity
    {
    	width:300px;
    }
    
    .activity header
    {
    	height:30px;
    	font-size:1em;
    	background-color:red; 
    	justify-content:center;   
    	align-items:center;
    	border-radius:15px 15px 0px 0px;
    	background-color:#743B07;
    	opacity:0.8;
    }
    
    .section-activity
    {
    	border:solid 1px;
    	flex:1;
    	display:flex;
    	flex-direction:row;
    }
    
    .img-activity
    {
    	border:solid 1px;
    	width:50px;
    	flex:2;
    }
    
    .value-activity
    {
    	flex:1;
    	text-align:center;
    }

{% endblock %}

{% block main_content %}
                			
    <section id="presentation_section"  style="background-image: url( {{ asset ('img/portal/homepage/presentation_1.jpg') }});
    									min-height:500px;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') }}" id="a-registration"><button class="logon-btn">créer un compte</button></a>
        </span>
    	
    </section>
    
	<section id="news_section">
    		
    	<h2 class="section_title">actualités
    	</h2>
			
		<div id="news_section_layout">
		
			{#	{% for element in news %} #}
					{% include 'portal/homepage/news.html.twig' %}
					{% include 'portal/homepage/news.html.twig' %}
					{% include 'portal/homepage/news.html.twig' %}
			{#	{% endfor %} #}
				
		</div>
			
    	</section>

		<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 de 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="logon-btn">créer un compte</button></a>
    		</div>
    		
    	</section>
	
		<section id="activity_section">

    		<h2 class="section_title">activités
    		</h2>
				
			<div class="activity_section_layout">

				<div>
				
                    <article class="activity">
                    	<header>
                    		<h3>actualités</h3>
                    	</header>
                    	<section class="section-activity">
                    		<img class="img-activity">
                    		<p class="value-activity">{# {{ news |length |default(0) }} #}</p>
                    	</section>
                    </article>
                    
                    <article class="activity">
                    	<header>
                    		<h3>articles</h3>
                    	</header>
                    	<section class="section-activity">
                    		<img class="img-activity">
                    		<p class="value-activity">{# {{ articles |length |default(0) }} #}</p>
                    	</section>
                    </article>
                    
                    <article class="activity">
                    	<header>
                    		<h3>membres</h3>
                    	</header>
                    	<section class="section-activity">
                    		<img class="img-activity">
                    		<p class="value-activity">{{ users |default(0) }}</p>
                    	</section>
                    </article>
                
                </div>
                <div>
                
                    <article class="activity">
                    	<header>
                    		<h3>jeux</h3>
                    	</header>
                    	<section class="section-activity">
                    		<img class="img-activity">
                    		<p class="value-activity">{{ games |default(0) }}</p>
                    	</section>
                    </article>
                    <article class="activity">
                    	<header>
                    		<h3>campagnes</h3>
                    	</header>
                    	<section class="section-activity">
                    		<img class="img-activity">
                    		<p class="value-activity">{{ campaigns |default(0) }}</p>
                    	</section>
                    </article>                
                    <article class="activity">
                    	<header>
                    		<h3>personnages</h3>
                    	</header>
                    	<section class="section-activity">
                    		<img class="img-activity">
                    		<p class="value-activity">{{ figures |default(0) }}</p>
                    	</section>
                    </article> 
                                   
                </div>

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

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