{% trans_default_domain 'home' %}

<div id="dropdownNotification"
     class="m-2 z-20 hidden w-full max-w-sm divide-y rounded-lg shadow bg-gray-800 divide-gray-700"
     aria-labelledby="dropdownNotificationButton">
  <div class="block px-4 py-2 font-medium text-center rounded-t-lg bg-gray-800 text-white">
    {{ 'Notification.last_signalement'|trans }} <span
      class="text-gray-400">({{ countSignalement }} {{ 'Notification.not_seen'|trans }})</span>
  </div>
  <span id="countSignalement" class="hidden">
    {{ countSignalement }}
  </span>
  <div class="divide-y divide-gray-700 overflow-auto h-[50vh]">
    {% if this.getSignalements["signalements"] is defined %}
      {% for lastSignalement in this.getSignalements["signalements"] %}
        <div data-action="click->live#action click->live#$render"
             data-live-action-param="openSignalement MarkOneSignalementAsRead"
             data-live-id-param="{{ lastSignalement.id }}"
             class="cursor-pointer flex px-4 py-3  {{ lastSignalement.analyse ? 'bg-gray-900' : '' }} hover:bg-gray-700">
          <div class="flex-shrink-0">
            <img class="rounded-full w-11 h-11" src="{{ lastSignalement.motif.url }}" alt="signalement">
          </div>
          <div class="w-full pl-3">
            <div class="text-sm mb-1.5 text-gray-400">{{ 'Notification.new_signalement_by'|trans }}
              <span class="font-semibold text-white">
                {% if lastSignalement.userEntity %}
                  {% if lastSignalement.userEntity.pseudo is not null %}
                    {{ lastSignalement.userEntity.pseudo|capitalize }}
                  {% elseif lastSignalement.userEntity.email is not null %}
                    {{ lastSignalement.userEntity.email }}
                  {% endif %}
                {% endif %}
              </span>:<br>{{ lastSignalement.motif_string }}
            </div>
            <div class="text-xs text-blue-500">{{ lastSignalement.date }}</div>
          </div>
        </div>
      {% endfor %}
    {% endif %}
  </div>
  <button data-action="live#action live#$render" data-live-action-param="MarkAllSignalementAsRead"
          class="w-full block py-2 text-sm font-medium text-center rounded-b-lg bg-gray-800 hover:bg-gray-700 text-white">
    <div class="inline-flex items-center ">
      <svg class="w-4 h-4 me-2 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
           fill="currentColor" viewBox="0 0 20 14">
        <path
          d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"></path>
      </svg>
      {{ 'Notification.mark_all_as_seen'|trans }}
    </div>
  </button>
</div>

{# LIGHT THEME #}
{#  <div id="dropdownNotification" class="m-2 z-20 hidden w-full max-w-sm bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-800 dark:divide-gray-700" aria-labelledby="dropdownNotificationButton"> #}
{#    <div class="block px-4 py-2 font-medium text-center text-gray-700 rounded-t-lg bg-gray-50 dark:bg-gray-800 dark:text-white"> #}
{#      Dernier signalement non traité #}
{#    </div> #}
{#    <div class="divide-y divide-gray-100 dark:divide-gray-700 overflow-auto h-[50vh]"> #}
{#      {% for lastSignalement in this.lastSignalement %} #}
{#        <a href="#" class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700"> #}
{#          <div class="flex-shrink-0"> #}
{#            <img class="rounded-full w-11 h-11" src="{{ lastSignalement.motif.url }}" alt="signalement"> #}
{#          </div> #}
{#          <div class="w-full pl-3"> #}
{#            <div class="text-gray-500 text-sm mb-1.5 dark:text-gray-400">Nouveau signalement de #}
{#              <span class="font-semibold text-black"> #}
{#              {% if lastSignalement.user %} #}
{#                {% if lastSignalement.user.pseudo is not null  %} #}
{#                  {{ lastSignalement.user.pseudo|capitalize}} #}
{#                {% elseif lastSignalement.user.email is not null %} #}
{#                  {{ lastSignalement.user.email}} #}
{#                {% endif %} #}
{#              {% endif %} #}
{#            </span>:<br>{{ lastSignalement.motif_string }} #}
{#            </div> #}
{#            <div class="text-xs text-blue-600 dark:text-blue-500">{{ lastSignalement.date }}</div> #}
{#          </div> #}
{#        </a> #}
{#      {% endfor %} #}
{#    </div> #}
{#    <a href="#" class="block py-2 text-sm font-medium text-center text-gray-900 rounded-b-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white"> #}
{#      <div class="inline-flex items-center "> #}
{#        <svg class="w-4 h-4 me-2 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14"> #}
{#          <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"></path> #}
{#        </svg> #}
{#      </div> #}
{#    </a> #}
{#  </div> #}