{% extends 'Signalement/layout.html.twig' %}
{% trans_default_domain 'home' %}

{% block body %}
  <div id="view_communication">
    <div
      class="flex flex-col h-screen bg-white">
      {#      {{ include('Signalement/components/_header.html.twig', {'displayLogin': false}) }} #}
      <main data-controller="message"
            class="h-screen flex-1 relative overflow-y-auto focus:outline-none xl:order-last flex flex-col">
        <div id="chat_header" class="flex items-center justify-between p-4 border-b bg-white">
          <div class="flex items-center">
            <a href="{{ path('signalement_chat') }}"
               class="mr-2 inline-flex items-center space-x-3 text-sm font-medium text-gray-900 cursor-pointer">
              <svg class="-ml-2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"
                   fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                      clip-rule="evenodd"></path>
              </svg>
            </a>
            <img class="h-10 w-10 rounded-full"
                 src="{{ asset('assets/img/defaultUser.png') }}" alt="profile_picture">
            <div class="ml-4">
              <p class="text-lg font-semibold">{{ contact.proNom }}</p>
            </div>
          </div>
        </div>

        {{ include('Signalement/components/_warning.html.twig') }}

        <!-- Messages Container -->
        <div class="communications flex-1 overflow-y-auto p-6 bg-gray-50">
          <turbo-frame id="conversation_{{ app.user.id }}"
            {{ turbo_stream_listen('conversation_' ~ app.user.id) }}>
            {% for message in communications %}
              {{ include('Signalement/conversation/components/_message.html.twig') }}
            {% endfor %}
          </turbo-frame>
        </div>

        <!-- Message Input -->
        <turbo-frame id="message_form">
          {{ include('Signalement/conversation/form.html.twig') }}
        </turbo-frame>
      </main>
    </div>
  </div>
{% endblock %}