{% trans_default_domain 'home' %}

<div id="message_{{ message.id }}"
     class="flex my-2 gap-2.5 {{ message.userFrom.id == app.user.id ? 'justify-end' : 'item_start' }}"
>
  <img class="h-8 w-8 rounded-full"
    {#       src="{{ message.userFrom.photoProfil|linkImage('photos_profil') }}" #}
       src="{{ asset('assets/img/defaultUser.png') }}"
       alt="profile_picture">

  <div class="flex flex-col gap-1 w-full max-w-[320px]">
    <div class="flex items-center space-x-2 rtl:space-x-reverse">
      <span
        class="text-sm font-semibold text-gray-900 dark:text-white">
        {{ message.userFrom.id == app.user.id ? message.userTo.pseudo : message.userFrom.proNom }}
      </span>
      <span
        class="text-sm font-normal text-gray-500 dark:text-gray-400">{{ message.date|date('d/m/Y H:i') }}</span>
    </div>
    <div class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
      <p class="text-sm font-normal text-gray-900 dark:text-white">{{ message.libelle|linkify|raw }}</p>
    </div>
  </div>
  {{ include('Signalement/conversation/components/_dropdown_message.html.twig') }}
</div>