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

{% block stylesheets %}
  {{ parent() }}
  <style>
      @keyframes checkmark {
          0% {
              transform: scale(0);
              opacity: 0;
          }
          50% {
              transform: scale(1.2);
          }
          100% {
              transform: scale(1);
              opacity: 1;
          }
      }

      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(20px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .animate-checkmark {
          animation: checkmark 0.5s ease-in-out forwards;
      }

      .animate-fade-up {
          animation: fadeInUp 0.5s ease-out forwards;
      }

      .animate-delay-1 {
          animation-delay: 0.2s;
      }

      .animate-delay-2 {
          animation-delay: 0.4s;
      }
  </style>
{% endblock %}

{% block body %}
  <div class="flex flex-col h-screen bg-white">
    {{ include('Signalement/components/_header.html.twig', {'displayLogin': false}) }}
    {{ include('Signalement/components/back_to_home.html.twig') }}
    {{ include('Signalement/components/_warning.html.twig') }}
    {{ include('Signalement/components/sucess.html.twig') }}

    {# Contenu principal #}
    <turbo-frame id="view_list_contact_signalement" src="{{ path('signalement_view_list_contact_signalement') }}">
      <div class="flex-1">
        <div class="container mx-auto max-w-4xl">
          <div class="bg-white rounded-xl shadow-sm max-h-[calc(100vh-280px)]">
            <div class="divide-y animate-pulse">
              {% for i in 1..2 %}
                <div class="relative flex items-center p-4">
                  {# Avatar squelette #}
                  <div class="relative">
                    <div class="w-12 h-12 bg-gray-200 rounded-full"></div>
                  </div>

                  {# Infos contact squelette #}
                  <div class="ml-4 flex-1">
                    <div class="flex items-center justify-between">
                      {# Nom squelette #}
                      <div class="h-4 bg-gray-200 rounded w-1/4"></div>
                    </div>
                    {# Message squelette #}
                    <div class="mt-2 h-3 bg-gray-200 rounded w-3/4"></div>
                  </div>

                  {# Indicateur droit squelette #}
                  <div class="ml-4">
                    <div class="w-3 h-3 bg-gray-200 rounded-full"></div>
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </turbo-frame>

    {# Footer avec bouton d'urgence #}
    <div class="bg-white border-t">
      <div class="container mx-auto max-w-4xl p-4">
        <a href="tel:17"
           class="w-full py-3 px-4 bg-gray-800 text-white rounded-xl font-medium hover:bg-gray-700 transition-colors flex items-center justify-center">
          <span class="material-symbols-outlined mr-2 text-red-500">e911_emergency</span>
          {{ 'Integration.call_police'|trans }}
        </a>
      </div>
    </div>
  </div>
{% endblock %}