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

{% block stylesheets %}
	{{ parent() }}
	
		<style>
	
	#campaign_layout
	{
		display:flex;
		flex-direction:column;
	}
	
	.campaign , .campaign:visited
	{
		text-decoration: none;
		margin:2% 2% 2% 2%;
		border:solid 1px;
		color:blue;
		height:100px;
		display:flex;
		flex-direction:row;
		align-items:center;

	}
	
	#new_campaign
	{
		margin-left:2%;
	}
	
	@media only screen and (max-width: 600px)
	{
    	#new_campaign button
    	{
    		height:20px;
        	width:90px;
        	background-color:#red;
        	color:black;
        	font-weight:bold;
        	font-size:0.9em;
        	border-radius:15px 15px 15px 15px;
        	border-color:none;	
        	/*box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);*/
        	box-shadow: -2px 0px 10px 5px rgba(17, 80, 30,1.5) ;
    	}
	}
	
	
	#new_campaign button
	{
		height:40px;
    	width:180px;
    	background-color:#56ed0a;
    	color:black;
    	font-weight:bold;
    	font-size:0.9em;
    	border-radius:15px 15px 15px 15px;
    	border-color:none;	
    	/*box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);*/
    	box-shadow: -2px 0px 10px 5px rgba(17, 80, 30,1.5) ;
	}
	
	#campaign_layout a span
	{
		flex:1;
		display:flex;
		flex-direction:row;
	}
	
	#campaign_layout a span label
	{
		font-size:18px;
		flex:1;
		margin-left:5%;
	}

	
	</style>
	
	
{% endblock %}

	

{% block breadcrumb %}
	<a href="{{ path('homepage') }}">accueil</a> > <a href="{{ path('dashboard') }}">tableau de bord</a> > <a>mes campagnes</a>
{% endblock %}
	
{% block member_content %}
		
			
			
			
			
			
			<div id="campaign_layout">
			
    			<h1>mes campagnes</h1>
    			
    			<a href="{{ path('create_campaign') }}" id="new_campaign"><button>nouvelle campagne</button></a>
    			
    			{% if campaigns == null %}
					<p>Vous n'avez pas encore de campagne.</p>
			
				{% else %}	
    			
    			{% for campaign in campaigns %}
        			<a href="{{ path('campaign', {'id': campaign.id}) }}" class="campaign">
                		<span >
                			<label>campagne : {{ campaign.name }}</label>
                			<label>jeu : {{ campaign.game.code }}</label>              
                		</span>
                	</a>	
    			{% endfor %}
    			{% endif %}
			</div>
		
		
			                

			
{% endblock %}