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

{% block title %}Boîte de Réception{% endblock %}

{% block body %}
    <div class="container mx-auto p-6">
        <h1 class="text-3xl font-bold mb-6 text-center">Boîte de Réception</h1>

        <!-- Bouton pour écrire un nouveau message -->
        <div class="mb-6 text-center">
            <a href="{{ path('app_message_new', {'receiverId': app.user.id}) }}" class="bg-teal-500 text-white px-6 py-3 rounded-md hover:bg-teal-600">
                Écrire un Nouveau Message
            </a>

        </div>

        <!-- Liste des messages reçus -->
        <div class="max-w-4xl mx-auto">
            {% for message in messages %}
                <div class="bg-white p-6 rounded-lg shadow mb-4">
                    <div class="flex justify-between items-center">
                        <div>
                            <h2 class="text-xl font-semibold">
                                De :
                                {% if message.sender == app.user %}
                                    {{ message.receiver.nickname }}
                                {% else %}
                                    {{ message.sender.nickname }}
                                {% endif %}
                            </h2>
                            <p class="text-gray-600">{{ message.sendingDate|date('d/m/Y H:i') }}</p>
                        </div>
                        <a href="{{ path('app_message_conversation', { id: message.id }) }}" class="bg-teal-500 text-white px-4 py-2 rounded hover:bg-teal-600">
                            Voir la Conversation
                        </a>
                    </div>
                    <p class="mt-4 text-gray-700">{{ message.content }}</p>
                </div>
            {% else %}
                <p class="text-center text-gray-500">Vous n'avez reçu aucun message.</p>
            {% endfor %}
        </div>
    </div>
{% endblock %}