{% trans_default_domain 'home' %}

<div class="flex flex-col p-2 md:p-4 lg:p-6 bg-white border-b">
  <div class="container mx-auto max-w-4xl">
    <div
      class="flex items-center justify-between w-full mb-4">
      {# User profile #}
      <div class="flex items-center">
        <div class="w-16 h-16 md:w-14 md:h-14 rounded-full overflow-hidden border-2 border-orange-500">
          <img src="{{ asset('assets/img/defaultUser.png') }}" alt="Profile" class="w-full h-full object-cover">
        </div>
        <div class="ml-4">
          <h1 class="text-xl md:text-xl font-bold">{{ user.pseudo }}</h1>
        </div>
      </div>

      {#      {% if not user.pseudo starts with 'Anonyme_' %} #}
      {#      <a href="{{ path('signalement_chat') }}" #}
      {#         class="flex items-center bg-orange-500 text-white px-4 py-2 rounded-full"> #}
      {#        <span class="material-symbols-outlined mr-2">chat</span> #}
      {#        <span class="text-lg md:text-base">1</span> #}
      {#      </a> #}
      {#      {% else %} #}
      <div class="flex flex-col items-center text-white rounded-full">
        <img src="{{ asset('assets/img/umay_banniere_couleur.png') }}" alt="Logo" class="w-16">
        <img src="{{ asset('uploads/integration/' ~ integration.metaLogo) }}" alt="Logo" class="w-16">
      </div>
      {#      {% endif %} #}
    </div>

    {# Trusted contacts button or Login button #}
    {% if displayLogin is not defined or displayLogin %}
      {% if user.pseudo starts with 'Anonyme_' %}
        <a href="{{ path('signalement_module_login') }}"
           class="w-full md:w-auto md:px-6 bg-gradient-to-r from-pink-500 to-red-500 text-white py-3 md:py-2 px-4 rounded-xl flex items-center justify-between hover:opacity-90 transition-opacity">
          <div class="flex items-center">
            <span class="material-symbols-outlined mr-2">login</span>
            <span class="text-sm">{{ 'Integration.account_login'|trans }}</span>
          </div>
          <span class="material-symbols-outlined">chevron_right</span>
        </a>
      {% else %}
        <div class="w-full flex flex-row items-center justify-between gap-2">
          <a href="{{ path('signalement_chat') }}"
             class="w-full md:w-auto md:px-6 bg-gradient-to-r from-pink-500 to-red-500 text-white py-3 md:py-2 px-4 rounded-xl flex items-center justify-between hover:opacity-90 transition-opacity">
            <div class="flex items-center">
              <span class="material-symbols-outlined mr-2">message</span>
              <span class="text-base">{{ 'Integration.messagerie'|trans }}</span>
            </div>
            {#            <span class="material-symbols-outlined">chevron_right</span> #}
          </a>
          <a href="{{ path('app_logout') }}"
             class="w-full md:w-auto md:px-6 bg-gradient-to-r from-pink-500 to-red-500 text-white py-3 md:py-2 px-4 rounded-xl flex items-center justify-between hover:opacity-90 transition-opacity">
            <div class="flex items-center">
              <span class="material-symbols-outlined mr-2">logout</span>
              <span class="text-base">{{ 'Integration.logout'|trans }}</span>
            </div>
            {#            <span class="material-symbols-outlined">chevron_right</span> #}
          </a>
        </div>
      {% endif %}
    {% endif %}
  </div>
</div>