{% trans_default_domain 'home' %}

{% if userSignalements is defined and userSignalements|length > 0 %}
  <div class="container mx-auto max-w-4xl mb-4">
    {# Titre avec dividers #}
    <div class="flex items-center mb-4 mx-2 md:mx-0">
      <div class="flex-1 border-t border-gray-300"></div>
      <p class="text-sm font-medium text-gray-700 px-4">Reprendre le(s) signalement(s) existant(s)</p>
      <div class="flex-1 border-t border-gray-300"></div>
    </div>

    <div class="mx-2 md:mx-0">
      {# En-tête avec bouton messagerie #}
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <img src="{{ asset('assets/img/pin/nouveau_marker_police.png') }}" alt="" class="w-6 h-6 mr-2 flex-shrink-0">
          <p class="text-sm font-medium text-gray-800">Signalement en cours :</p>
        </div>
        <a href="{{ path('signalement_chat') }}"
           class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 text-white text-sm rounded-lg hover:opacity-90 transition-opacity">
          <span class="material-symbols-outlined text-lg mr-2">message</span>
          Messagerie
        </a>
      </div>

      {# Liste des signalements #}
      <div class="space-y-2">
        {% for signalement in userSignalements %}
          <div class="bg-white rounded-lg p-3 border border-green-100">
            {# Type de signalement #}
            <p class="text-sm font-medium text-gray-800">
              {% if signalement.motifString %}
                {{ signalement.motifString }}
              {% else %}
                Signalement
              {% endif %}
            </p>

            {# Date et adresse #}
            <p class="text-xs text-gray-500 mt-1">
              {{ signalement.date|date('d/m/Y à H:i') }}
              {% if signalement.adresse %}
                - {{ signalement.adresse }}
              {% endif %}
            </p>

            {# Commentaire #}
            {% if signalement.commentaire %}
              <p class="text-xs text-gray-600 mt-2 italic">
                "{{ signalement.commentaire|length > 80 ? signalement.commentaire|slice(0, 80) ~ '...' : signalement.commentaire }}"
              </p>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>

    {# Message nouveau signalement avec dividers #}
    <div class="flex items-center mt-4 mx-2 md:mx-0">
      <div class="flex-1 border-t border-gray-300"></div>
      <p class="text-sm font-medium text-gray-700 px-4">Ou faire un nouveau signalement</p>
      <div class="flex-1 border-t border-gray-300"></div>
    </div>
  </div>
{% endif %}