<!-- profile -->
<li x-data="{ open: false }" class="relative flex">
  <a
    href="javascript:;"
    class="hover:bg-light flex rounded-full px-3 text-sm focus:outline-none"
    id="user-menu-button"
    @click="open = ! open">
    <div class="relative">
      {#
      <span
        title="online"
        class="absolute -bottom-0.5 flex h-3 w-3 justify-center rounded-full border border-white bg-green-500 text-center ltr:right-1 rtl:left-1"></span>
      #}
    </div>
    <span class="hidden self-center md:flex md:flex-col ltr:ml-1 rtl:mr-1">
      {{ app.user.userIdentifier }}
    </span>
  </a>
  <ul
    x-show="open"
    x-cloak
    @click.away="open = false"
    x-transition:enter="transition-all duration-200 ease-out"
    x-transition:enter-start="transform opacity-0 scale-95"
    x-transition:enter-end="transform opacity-100 scale-100"
    x-transition:leave="transition-all duration-200 ease-in"
    x-transition:leave-start="transform opacity-100 scale-100"
    x-transition:leave-end="transform opacity-0 scale-95"
    class="absolute top-full z-50 min-w-64 origin-top-right rounded border bg-white py-0.5 shadow-md ltr:right-0 ltr:text-left rtl:left-0 rtl:text-right dark:border-gray-700 dark:bg-gray-800">
    <li class="relative">
      <div class="-mx-4 flex flex-row flex-wrap items-center px-3 py-4">
        <div class="w-1/3 max-w-full flex-shrink px-4">
          {% if app.user.profile and app.user.profile.avatar %}
            <twig:SerenityMedia:Image
              class="h-8 w-8"
              lazy="{{ false }}"
              responsive="{{ false }}"
              alt="{{ app.user.profile.fullName }}"
              path="{{ app.user.profile.avatar.file.name }}"
              ratio="1/1" />
            {% elseif app.user.profile %}
            <div
              class="flex h-8 w-8 shrink-0 items-center justify-center justify-items-center rounded-full bg-gray-600 p-6 text-gray-100">
              <span>{{ app.user.profile.firstname|slice(0, 1)|capitalize }}</span>
              <span>{{ app.user.profile.lastname|slice(0, 1)|capitalize }}</span>
            </div>
          {% else %}
            <div
              class="flex h-8 w-8 shrink-0 items-center justify-center justify-items-center rounded-full bg-gray-600 p-6 text-gray-100">
              {{ app.user.userIdentifier|slice(0, 1)|capitalize }}
            </div>
          {% endif %}
        </div>
        <div class="w-2/3 max-w-full flex-shrink px-4 ltr:pl-1 rtl:pr-1">
          <div class="font-bold">
            {% if app.user.profile %}
              <span class="font-medium">{{ app.user.profile.fullName }}</span>
              <span class="text-xs font-light">{{ app.user.userIdentifier }}</span>
            {% else %}
              <span class="font-medium">{{ app.user.userIdentifier }}</span>
            {% endif %}
          </div>
          {{ ('role.'~app.user.roles.0)|trans([],'serenity_auth_messages.admin')|capitalize }}
          <div class="text-gray mt-1 text-sm"></div>
        </div>
      </div>
    </li>
    <li class="relative">
      <hr class="my-0 border-t border-gray-200 dark:border-gray-700">
    </li>
    <li class="relative">
      <a class="hover:text-primary flex w-full gap-2 px-6 py-2 whitespace-nowrap" href="#">
        <i class="icon-contact"></i>
      </a>
    </li>
    <li class="relative">
      <hr class="my-0 border-t border-gray-200 dark:border-gray-700">
    </li>
    <li class="relative">
      {% if is_granted('IS_IMPERSONATOR') %}
        <a
          class="hover:text-primary flex w-full gap-2 px-6 py-2 whitespace-nowrap"
          href="{{ impersonation_exit_path(path('admin_index') ) }}">
          <i class="icon-log-out"></i>
          <!-- <i class="fas fa-sign-out-alt mr-2"></i> -->
          {{ 'profile.exit'|trans([],'serenity_auth_messages.admin')|capitalize }}
        </a>
      {% else %}
        <a class="hover:text-primary flex w-full gap-2 px-6 py-2 whitespace-nowrap" href="{{ path('admin_logout') }}">
          <i class="icon-log-out"></i>
          <!-- <i class="fas fa-sign-out-alt mr-2"></i> -->
          {{ 'profile.logout'|trans([],'serenity_auth_messages.admin')|capitalize }}
        </a>
      {% endif %}
    </li>
  </ul>
</li>
