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

{% block title %} {{ message.message.subject }} {{ parent() }} {% endblock %}

{% block body %}
    <div class="flex flex-row">
        <div class="w-1/4 mx-9 lg:mt-12">
            {% if app.request.get('status') == 'received'%}
            <form action="{{ path('app_messaging_index', {'status': 'received'}) }}" method="post">
                <button type="submit" class="nav-link text-white bg-teal-700 p-2 rounded mt-3 w-full text-start pl-6">
                    <i class="fa-solid fa-inbox mr-2"></i>
                    Boîte de réception
                </button>
            </form>
	{% else%}
	<form action="{{ path('app_messaging_index', {'status': 'received'}) }}" method="post">
                <button type="submit" class="nav-link text-white bg-vert hover:bg-teal-700 p-2 rounded mt-3 w-full text-start pl-6">
                    <i class="fa-solid fa-inbox mr-2"></i>
                    Boîte de réception
                </button>
            </form>
	{% endif%}
	{% if app.request.get('status') == 'sent'%}
            <form action="{{ path('app_messaging_index', {'status': 'sent'}) }}" method="post">
                <button disabled type="submit" class="opacity-50 cursor-not-allowed nav-link text-white bg-gray-500 p-2 rounded mt-3 w-full text-start pl-6">
                    <i class="fa-solid fa-paper-plane mr-2"></i>
                    Messages envoyés
                </button>
            </form>
	{% else%}
	<form action="{{ path('app_messaging_index', {'status': 'sent'}) }}" method="post">
                <button disabled type="submit" class="opacity-50 cursor-not-allowed nav-link text-white bg-gray-500 p-2 rounded mt-3 w-full text-start pl-6">
                    <i class="fa-solid fa-paper-plane mr-2"></i>
                    Messages envoyés
                </button>
            </form>
	{% endif%}
	{% if app.request.get('status') == 'favorite'%}
            <form action="{{ path('app_messaging_index', {'status': 'favorite'}) }}" method="post">
                <button disabled class="opacity-50 cursor-not-allowed nav-link text-white bg-gray-500 p-2 rounded mt-3 w-full text-start pl-6" data-filter="favoris">
                    <i class="fa-solid fa-star mr-2"></i>
                    Mes favoris
                </button>
            </form>
	{% else%}
<form action="{{ path('app_messaging_index', {'status': 'favorite'}) }}" method="post">
                <button disabled class="opacity-50 cursor-not-allowed nav-link text-white bg-gray-500 p-2 rounded mt-3 w-full text-start pl-6" data-filter="favoris">
                    <i class="fa-solid fa-star mr-2"></i>
                    Mes favoris
                </button>
            </form>
	{% endif%}

		{% if app.request.get('status') == 'deleted'%}
            <form action="{{ path('app_messaging_index', {'status': 'deleted'}) }}">
                <button disabled class="opacity-50 cursor-not-allowed nav-link text-white bg-gray-500 p-2 rounded mt-3 w-full text-start pl-6" data-filter="deleted">
                    <i class="fa-solid fa-trash mr-2"></i>
                    Corbeille
                </button>
            </form>
		{% else%}
	<form action="{{ path('app_messaging_index', {'status': 'deleted'}) }}">
                <button disabled class="opacity-50 cursor-not-allowed nav-link text-white bg-gray-500 p-2 rounded mt-3 w-full text-start pl-6" data-filter="deleted">
                    <i class="fa-solid fa-trash mr-2"></i>
                    Corbeille
                </button>
            </form>
		{% endif%}

        </div>
        <div class="w-3/4 mx-9 mt-24 lg:mt-12 bg-white shadow-md rounded-2xl px-8 pt-12 lg:pt-6 pb-8 mb-4">

{% if message.sender == app.user %}
    <p class="text-gray-400 italic text-lg justify-end flex">Statut : {{ message.senderStatus.value }}</p>
{% elseif message.receiver == app.user %}
    <p class="text-gray-400 italic text-lg justify-end flex">Statut : {{ message.receiverStatus.value }}</p>
{% endif %}

            <div class="flex flex-row items-center justify-end">
                <p class="text-bold" style="color:#ff8a18" aria-label="le {{ message.message.createdAt ? message.message.createdAt|date('d/m/Y') : '' }}">
                    le {{ message.message.createdAt ? message.message.createdAt|date('d/m/Y') : '' }}
                </p>
            </div>
            <h1 class="text-vert font-bold text-3xl">{{ message.message.subject }}</h1>
            <br>
            <div class="flex flex-row items-end">
                <i class="fa-regular fa-user text-6xl"></i>
                <div class="flex flex-col ml-3">
                    <div class="flex flex-row">
                        <p>De : </p>
                        <p class="ml-2" style="color:#FF8A00">{{ message.sender.firstName }} {{ message.sender.lastName }}</p>
                    </div>
                    <div class="flex flex-row">
                        <p>A : </p>
                        <p style="color:#FF8A00" class="ml-4">
                            {{ message.receiver.firstName }}
                        </p>
                    </div>
                </div>
            </div>
            <br>
            <p>{{ message.message.content }}</p>
            <br>
        </div>
    </div>
{% endblock %}