{% trans_default_domain 'home' %}

{% if this.getConversationToUser["userTo"] is not empty %}
  <div data-loading="model(selectUserMessage)|addClass(opacity-50)"
       class="flex flex-col items-stretch flex-nowrap justify-end h-full" data-controller="chat">
    <div style="top: 70px; left: 25px; right: 25px; min-height: 60px"
         class="absolute bg-white flex items-center justify-between border-b-2 border-gray-200 dark:bg-gray-800">
      <div class="relative flex items-center space-x-2">
        <img src="{{ this.getConversationToUser["userTo"].photoProfil|linkImage('photos_profil') }}" alt=""
             class="w-10 rounded-full">
        <span
          class="text-xl text-gray-700 mr-3 dark:text-white">{{ this.getConversationToUser["userTo"].pseudo|capitalize | default(this.getConversationToUser["userTo"].proNom|capitalize) }}</span>
      </div>
      <div class="flex items-center space-x-2">
      </div>
    </div>
    <div id="messages_chat" style="height: 100vh"
         class="mt-[80px] space-y-4 p-1 overflow-y-auto scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch">
      {% for message in this.getConversationToUser["messages"] %}
        {% if message.userFrom.id is same as(this.getConversationToUser["currentUser"]) %}
          <div class="chat-message">
            <div class="flex items-end justify-end">
              <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-end">
                <div><span
                    class="px-4 py-2 rounded-lg inline-block rounded-br-none bg-blue-600 text-white">{{ message.libelle|linkify|raw }}</span>
                </div>
              </div>
              {% if message.userFrom.photoProfil is same as("") or message.userFrom.photoProfil is same as("default") or message.userFrom.photoProfil is same as("default.png") %}
                <img src="{{ "defaultPro"|linkImage('photos_profil') }}" alt="photo_profil"
                     class="w-6 h-6 rounded-full order-2">
              {% else %}
                <img src="{{ message.userFrom.photoProfil|linkImage('photos_profil') }}" alt="photo_profil"
                     class="w-6 h-6 rounded-full order-2">
              {% endif %}
            </div>
          </div>
        {% else %}
          <div class="chat-message">
            <div class="flex items-end justify-end flex-row-reverse">
              <img src="{{ message.userFrom.photoProfil|linkImage('photos_profil') }}" alt="photo_profil"
                   class="w-6 h-6 rounded-full order-2">
              <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-start">
                <div><span
                    class="px-4 py-2 rounded-lg inline-block rounded-bl-none bg-blue-600 text-white">{{ message.libelle|linkify|raw }}</span>
                </div>
              </div>
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>

    <div id="emoji_modal" class="hidden absolute bottom-[85px]"></div>
    <div id="preset_modal"
         class="mr-6 hidden absolute bottom-[85px] justify-between bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
      <div class="p-4">
        <label for="preset_msg_select" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
          <span class="text-sm text-gray-900 dark:text-white"><b>{{ 'Messagerie.select_message_predefined'|trans }}</b></span><br>
          <span
            class="text-sm text-gray-700 dark:text-gray-200">{{ 'Messagerie.select_message_predefined_info'|trans }}</span>
        </label>
        <select id="preset_msg_select"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
          {% if this.getMessagePreset is not empty %}
            <option disabled selected>{{ 'Messagerie.select_message_predefined_placeholder'|trans }}</option>
            {% for messagePreset in this.getMessagePreset %}
              <option value="{{ messagePreset }}">{{ messagePreset }}</option>
            {% endfor %}
          {% else %}
            <option disabled selected>{{ 'Messagerie.select_message_predefined_none'|trans }}</option>
          {% endif %}
        </select>
      </div>
    </div>

    <div class="form_start">
      {{ form_start(form, {
        attr: {
          'data-turbo': 'true',
          'data-action': 'live#action:prevent',
          'data-live-action-param': 'sendMessage',
        }
      }) }}
      <label for="chat" class="sr-only">{{ 'Messagerie.send_message_placeholder'|trans }}</label>
      <div class="flex items-center px-1 py-2 rounded-lg bg-gray-50 dark:bg-gray-700">
        <button id="btn_emoji" type="button"
                class="p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M13.408 7.5h.01m-6.876 0h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM4.6 11a5.5 5.5 0 0 0 10.81 0H4.6Z"></path>
          </svg>
          <span class="sr-only">{{ 'Messagerie.send_message_emoji'|trans }}</span>
        </button>

        <button id="btn_preset" type="button"
                class="p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
               viewBox="0 0 20 18">
            <path
              d="M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3.546l3.2 3.659a1 1 0 0 0 1.506 0L13.454 14H18a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-8 10H5a1 1 0 0 1 0-2h5a1 1 0 1 1 0 2Zm5-4H5a1 1 0 0 1 0-2h10a1 1 0 1 1 0 2Z"></path>
          </svg>
          <span class="sr-only">{{ 'Messagerie.send_message_emoji'|trans }}</span>
        </button>

        {{ form_widget(form.libelle, {
          attr: {
            'data-model': 'on(change)|message'
          }
        }) }}
        {{ form_errors(form.libelle) }}
        <button id="btn_send_message" type="submit" data-loading="action(sendMessage)|addClass(opacity-50)"
                class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600">
          <svg class="w-5 h-5 rotate-90" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
               viewBox="0 0 18 20">
            <path
              d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z"></path>
          </svg>
          <span class="sr-only">{{ 'Messagerie.send_message'|trans }}</span>
        </button>
      </div>
      {{ form_end(form) }}
    </div>
  </div>
{% else %}
  <div class="flex items-center justify-center h-full">
    <span class="text-gray-500">{{ 'Messagerie.user_not_found'|trans }}</span>
  </div>
{% endif %}