<ng-container *ngIf="authService.userData && authService.userData.user">
  <div matRipple [matRippleDisabled]="true" [matMenuTriggerFor]="menu" class="hello-user-button">
    <span class="vertical-align-middle hide-xs hide-sm"
          i18n>Hello, {{authService.userData.user.first_name || authService.userData.user.email}}</span>
    <app-gravatar [email]="authService.userData.user.email" [customStyle]="topBarGravatarStyle"></app-gravatar>
    <div *ngIf="authService.userData.total_notifications > 0" class="fl-notification-circle fl-notification-circle-gravatar">
      {{authService.userData.total_notifications}}
    </div>
  </div>
  <mat-menu #menu="matMenu" xPosition="before" yPosition="below">
    <div (click)="$event.stopPropagation()" class="hello-user-first-menu-item" [dir]="languageService.langDirection">
      <app-gravatar [email]="authService.userData.user.email" [customStyle]="menuGravatarStyle"></app-gravatar>
      <div class="display-inline-block">
        <div class="user-details-wrapper">
          {{authService.userData.user.first_name}} {{authService.userData.user.last_name}}
          <br>
          {{authService.userData.user.email}}
        </div>
      </div>
    </div>
    <a class="justify-content-center"
       *ngIf="authService.feature('ui.top-bar.user-dropdown.user-notifications')"
       mat-menu-item
       [routerLink]="[config.getPanelUrl('user/notifications')]" i18n>
      Notifications
      <span *ngIf="authService.userData.notifications > 0" class="fl-notification-circle">
        {{authService.userData.notifications}}
      </span>
    </a>
    <a class="justify-content-center"
       *ngIf="authService.feature('ui.top-bar.user-dropdown.shopping-cart') &&
       authService.feature('billing.order')"
       mat-menu-item
       [routerLink]="[config.getPanelUrl('billing/cart')]">
      <span i18n>Shopping cart</span>
      <span *ngIf="authService.userData.cart_items > 0" class="fl-notification-circle">
        {{authService.userData.cart_items}}
      </span>
    </a>
    <a class="justify-content-center" mat-menu-item
       [routerLink]="[config.getPanelUrl('/user/profile')]" i18n>My profile</a>
    <a class="justify-content-center" mat-menu-item
       *ngIf="authService.feature('ui.top-bar.user-dropdown.client-details') &&
              authService.feature('clients&users.clients') && authService &&
              authService.userData && authService.userData.user && authService.userData.user.clients &&
              authService.userData.user.clients.length"
       [routerLink]="[config.getPanelUrl('clients')]" i18n>Clients</a>
    <a *ngIf="authService.feature('logger.email-message-log') && authService.feature('ui.hello-user.show-email-log-link')"
       class="justify-content-center" mat-menu-item [routerLink]="[config.getPanelUrl('/utilities/email-message-log')]"
       i18n>Email log</a>
    <a *ngIf="authService.userData.referrals_enabled && authService.feature('ui.enduser')"
       class="justify-content-center" mat-menu-item [routerLink]="[config.getPanelUrl('/user/referral')]"
       i18n>Referrals</a>
    <a class="justify-content-center" mat-menu-item [routerLink]="[config.getPanelUrl('/logout')]" i18n>Log out</a>
  </mat-menu>
</ng-container>
