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

{% block stylesheets %}
	{{ parent() }} 

               
        #content-layout
        {
            width:100%;
            min-height: 800px;
            display-flex;
            flex-direction:column;
			justify-content: flex-start;
        }
		
        #content-layout ul 
        {
            list-style-type: none;
            display: flex;
            flex-direction: column;
            width: 98%;
            border: solid 1px;
            border-radius: 20px;
            box-shadow: 5px 8px 20px rgba(0,0, 0, 0.7);
        }   

        #content-layout ul li label
        {
            font-weight: bold;
        }
        
         #content-layout a
         {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin: 20px;
            padding-left: 40px;
         }
        
        .grey
        {
            background-color:  #e0e0e0;

        }
        
        .white
        {
            background-color: white;
        }       


{% endblock %}

{% block main_content %}

	<div id="breadcrumb">
		<ul>
	{% block breadcrumb %}
	       {{ parent() }}
	       <li><a href="{{ path('member_dashboard', {'id': app.user.id}) }}" class="breadcrumb" > > tableau de bord</a></li> 
	{% endblock %}
		</ul>
	</div>
	
	{% block tab_bar %}
       {{ parent() }}
    {% endblock %}
  
    <div id="content-layout">
	{% block content %}
        
                <h1>{{ thread.purpose }}</h1>
   
<a href="{{ path('member_message_delete', {'id': app.user.id, 'thread': thread.id}) }}"><button class="btn-del">supprimer</button></a>

	{% for message in messages %}                   
        {% set class = 'grey' %}
	    {% if message.sender.username != app.user %}
	            {% set class = 'white' %}
        {% endif %}
        <ul class="{{ class }}">
            <li><label>le {{ message.date }}</label></li>
            <p>{{ message.message }}</p>
            <li><label>{{ message.sender.username }}</label></li>
        </ul>

    {% endfor %}	

        <a href="{{ path('member_message_reply', {'id': app.user.id,'thread': thread.id }) }}"><button class="btn-add">répondre</button></a>
        
       
	{% endblock %}
    </div>


{% endblock %}

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