{% trans_default_domain 'home' %}

<!-- Messages Container -->
<div class="flex-1 overflow-y-auto p-4 space-y-3">
  {% if messages is not empty %}
    {% for message in messages %}
      {% if message and message.userFrom %}
        <div class="flex {{ message.userFrom.id == app.user.id ? 'justify-end' : 'justify-start' }}">
          <div class="max-w-xs lg:max-w-md">
            <div class="flex items-start {{ message.userFrom.id == app.user.id ? 'flex-row-reverse' : 'flex-row' }}">
              <!-- Avatar -->
              <div class="flex-shrink-0 {{ message.userFrom.id == app.user.id ? 'ml-2' : 'mr-2' }}">
                {% set photoProfil = message.userFrom.photoProfil %}
                {% set altText = message.userFrom.pseudo ?: message.userFrom.proNom ?: 'Utilisateur' %}
                {% if photoProfil %}
                  <img class="w-8 h-8 rounded-full" 
                       src="{{ photoProfil|linkImage('photos_profil') }}" 
                       alt="{{ altText }}"
                       onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                {% endif %}
                <div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-sm font-medium text-gray-600 dark:text-gray-300" 
                     style="{{ photoProfil ? 'display: none;' : '' }}">
                  {{ altText|first|upper }}
                </div>
              </div>
              
              <!-- Message Bubble -->
              <div class="{{ message.userFrom.id == app.user.id ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-white' }} rounded-lg px-3 py-2">
                <p class="text-sm">{{ message.libelle|default('Message non disponible') }}</p>
                <div class="flex items-center mt-1 {{ message.userFrom.id == app.user.id ? 'justify-end' : 'justify-start' }}">
                  <span class="text-xs {{ message.userFrom.id == app.user.id ? 'text-blue-100' : 'text-gray-500 dark:text-gray-400' }}">
                    {{ message.date ? message.date|date('d/m/Y H:i') : 'Date inconnue' }}
                  </span>
                  {% if message.automatique %}
                    <span class="material-symbols-outlined text-xs ml-1 {{ message.userFrom.id == app.user.id ? 'text-blue-100' : 'text-gray-500 dark:text-gray-400' }}">
                      smart_toy
                    </span>
                  {% endif %}
                </div>
              </div>
            </div>
            
            <!-- Sender Name -->
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 {{ message.userFrom.id == app.user.id ? 'text-right pr-10' : 'text-left pl-10' }}">
              {{ altText }}
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  {% else %}
    <div class="flex-1 flex items-center justify-center p-4">
      <div class="text-center">
        <span class="material-symbols-outlined text-4xl text-gray-400 dark:text-gray-500 mb-2 block">
          chat_bubble_outline
        </span>
        <p class="text-gray-500 dark:text-gray-400 text-sm">
          {{ 'Signalement.no_conversation_history'|trans }}
        </p>
      </div>
    </div>
  {% endif %}
</div>