{% 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>
            <a href="{{ path('member_form_campaign', {'id': app.user.id}) }}"><button>nouvelle campagne</button></a>
        
        
            {% if campaigns | length == 0 %}
                <div id="game-layout">
                    <p>
                        Vous n'avez pas encore crée de campagne.
                    </p>
                </div>
            {% else %}
        
                {% for campaign in campaigns %}
                    <a href="{{ path('member_campaign_homepage', {'id': app.user.id, 'campaign': campaign.id}) }}">
                        <div id="game-layout">
                            <div id="actions">
                            </div>
                        	 
                        	<div>
                        	   <h2>{{ campaign.name }}</h2>
                        	</div>
                             
                            <div>    
            					{% if campaign.isAvailable == true %}
                            	<p class="green">active</p> 
                            	{% else %}
                            	<p class="red">inactive</p>
                            	{% endif %}
                        	</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 %}