<mat-toolbar color="primary">
  <button
    *ngIf="enableHamburger"
    class="me-3"
    mat-icon-button
    (click)="onHamburgerClick.emit()"
  >
    <mat-icon>menu</mat-icon>
  </button>

  <a [routerLink]="['/']" class="logo text-link">
    <div class="svg-logo">
      <img src="/assets/image/logo/picsur.svg" alt="Picsur" />
    </div>

    <span class="ms-3 d-none d-sm-block">Picsur</span>
  </a>

  <span class="spacer"></span>

  <button
    matTooltip="Upload an image"
    *ngIf="canUpload"
    mat-icon-button
    class="me-3"
    (click)="doUpload()"
  >
    <mat-icon fontSet="material-icons-outlined">upload</mat-icon>
  </button>

  <button
    [matTooltip]="canRegister ? 'Login or Register' : 'Login to your account'"
    *ngIf="!isLoggedIn && canLogIn"
    mat-stroked-button
    (click)="doLogin()"
  >
    LOGIN
  </button>

  <!-- <span *ngIf="isLoggedIn" class="me-3 d-none d-sm-block">
    {{ user?.username }}
  </span> -->
  <button
    matTooltip="Your account"
    *ngIf="isLoggedIn"
    mat-icon-button
    [matMenuTriggerFor]="menu"
  >
    <mat-icon fontSet="material-icons-outlined">account_circle</mat-icon>
  </button>

  <mat-menu #menu="matMenu" xPosition="before">
    <ng-template matMenuContent>
      <span mat-menu-item disabled>
        <div class="centered">
          <h2>{{ user?.username }}</h2>
        </div>
      </span>
      <button *ngIf="canUpload" mat-menu-item (click)="doImages()">
        <mat-icon fontSet="material-icons-outlined">image</mat-icon>
        <span>My Images</span>
      </button>
      <button *ngIf="canAccessSettings" mat-menu-item (click)="doSettings()">
        <mat-icon fontSet="material-icons-outlined">settings</mat-icon>
        <span>Settings</span>
      </button>
      <button mat-menu-item (click)="doLogout()">
        <mat-icon fontSet="material-icons-outlined">logout</mat-icon>
        <span>Logout</span>
      </button>
    </ng-template>
  </mat-menu>
</mat-toolbar>
