<div class="layout-topbar">
  <a [routerLink]="['/']" class="layout-topbar-logo">
    <img id="layout-topbar-logo" src="assets/layout/images/logo-white.png" alt="Ease TF" />
  </a>

  @if(app.userId)
  {
  <a class="layout-menu-button hand-cursor" (click)="app.onMenuButtonClick($event)">
    <i class="fa fa-bars"></i>
  </a>
  }

  <div #profile style="float:right;font-weight:400;color:black;margin-top:5px;" [ngClass]="{'topbar-menu-visible': app.topbarMenuActive}">
    @if(app.loginId)
    {
    @if(app.notificationCount)
    {
    <a class="notification-bubble hand-cursor" title="You have {{app.notificationCount}} pending Authentication{{app.notificationCount>1? 's': ''}}..." (click)="app.onPendingNotifClick()">
      {{app.notificationCount}}
    </a>
    }
    <span class="me-2">
      <img alt="Ease TF" style="width:33px;" src="assets/images/{{app.userId}}.png" />
      {{app.loginId}}
    </span>
    <a href="#" (click)="app.onTopbarSubItemClick($event,'logout')" style="color:red;">
      <i class="fa fa-power-off"></i><span>&nbsp;Logout</span>
    </a>
    }
    @else
    {
    <div style="padding-top:.4rem;">
      <a href="#" (click)="app.onTopbarSubItemClick($event,'login')" style="color:blue;">
        <i class="fa fa-sign-in"></i><span>&nbsp;Login</span>
      </a>
    </div>
    }
  </div>
</div>
