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

{% block stylesheets %}
	{{ parent() }} 
	
        #games-layout
        {
            display: flex;
            flex-direction: column;
            margin: 1% 0% 0% 0%;
            min-height: 800px;
             
        }
        
        
        #games-layout a button
        {
            background-color: #3FB626;
            color: white;
        	height: 50px;
        	width: 10%;
        	min-width: 80px;
        	border: solid 1px;
        }
        
        
        #game-layout
        {
            border: solid 1px;
            margin: 1% 0% 0% 0%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        #game-layout div 
        {
            margin: 0px 20px 0px 20px;
        }
        
        #actions
        {
            width: 100%;
            display: flex;
            flex-direction: row; 
            justify-content: flex-end;                
        }
        
        #actions a
        {
            margin: 0px 20px 0px 20px;
        }
        
        .img
        {

        }
	

{% endblock %}

{% block main_content %}

	<div id="breadcrumb">
		<ul>
	{% block breadcrumb %}
           {{ parent() }}
           > <li><a href="{{ path('member_owner_campaigns', {'id': app.user.id}) }}">campagne</a></li>
	{% endblock %}
		</ul>
	</div>
	
	{% block tab_bar %}
        {{ parent() }}
    {% endblock %}


	{% block content %}
        <div id="games-layout">
        <h1>{{ title }}</h1>    
        
            {% if campaigns | length == 0 %}
                <div id="game-layout">
                    <p>
                        Aucune campagne encore disponible.
                    </p>
                </div>
            {% else %}
         
                {% for campaign in campaigns %}
                    <a href="{{ path('member_campaign_view', {'id': app.user.id, 'campaign': campaign.id}) }}"><div id="game-layout">
                    	 
                    	<div>
                    	   <h2>{{ campaign.name }}</h2>
                    	</div>
                         
                        <div>    
        					{% if campaign.isAvailable == true %}
                        	<p class="green">disponible</p> 
                        	{% else %}
                        	<p class="red">indisponible</p>
                        	{% endif %}
                    	</div>
                    	
                    	<div>
                    	   <h3>{{ campaign.game.name }}</h3>
                    	</div>
                    	
                    	<div>
                    	   <img src="{{ asset('uploads/campaigns/'~ campaign.poster) }}" class="img">
                    	</div>
                    	
                    	<div>
                    	   <p>{{ campaign.description | slice(0, 80) }}...</p>
                        </div>
                    </div></a>
                {% endfor %}
            {% endif %}                
        
        
        
        
        </div>

	{% endblock %}

{% endblock %}

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