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

{% block stylesheets %}
	{{ parent() }}
	
	<style>
	
	#messages_layout ul li
	{
		list-style-type:none;
	}
	
	
	
	#button_zone
	{
		margin: 2% 0% 1% 2%;
		height:auto;
		width:auto;
	}
	
	
	#new_message
	{
		margin-left:2%;
	}
	
	
	#new_message 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) ;
	}
	
	/*
	#new_message button
    {
    	height:auto;
    	width:140px;
    	background-color:#EDCF40;
    	font-size:0.9em;
    	border-radius:15px 15px 15px 15px;
    	border-color:none;	
    }
    */
    
    
    .widget_thread
    {
    	display:flex;
    	flex-direction:row;
    	border:solid 1px;
    	margin:1% 1% 1% 2%;
    	height:auto;
    	width:auto;
    	background-color:white;
    }
    
    #first
    {
    	flex:3;
    	margin:5px;
    }
    
    #first div a:visited,   #first div a
    {
    	text-decoration: none;
    	color:blue;
    }
    
    #second
    {
    	flex:1;
    	text-align:right;
    	margin:5px;
    	color:black;
    }
    
    #second div a:visited,   #second div a
    {
    	text-decoration:none;
    	color:blue;
    }
    
    
    #delete a 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:black;	

    }
    
	</style>
	
{% endblock %}



{% block breadcrumb %}
<a href="{{ path('homepage') }}">accueil</a> > <a href="{{ path('dashboard') }}">tableau de bord</a> > <a>mes contacts</a>
{% endblock %}
   
      

{% block member_content %}
<h1>mes contacts</h1>

<div id="messages_layout">

	<div class="container_line" id="button_zone">
	 		<a href="{{ path('find_profile') }}" id="new_message" ><button  class="btn-connexion">rechercher un contact</button></a>
	</div>
		<ul>
		{% if relations|length > 0  %}
		    {% for relation in relations %}
		    	<li>
    		    	<a href="{{ path('profile', {'id' : relation.id}) }}">
    					{{ relation.username }}
    		    	</a>
		    	</li>
		{% endfor %}
		</ul>  
		    
		    
		{% else %}
			<div>
				<p>vous n'avez aucun message</p>
			</div>
		{% endif %}	
</div>	
{% endblock %}