<div class="d-flex flex-column flex-md-row align-items-center justify-content-between bg-light p-3 px-md-4 mb-3 border-bottom border-dark fixed-top">
    <img class="logo" src="/assets/images/logo.png" style="max-height: 70px;" alt="logo" routerLink="/">
    <nav class="me-3 my-md-0 mr-md-3 text-uppercase" style="font-size: larger;">
        <a class="me-3 py-2" [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
        <a class="me-3 py-2" routerLink="/shop" routerLinkActive="active">Shop</a>
        <a class="me-3 py-2" routerLink="/test-error" routerLinkActive="active">Errors</a>
    </nav>
    <div class="d-flex align-items-center">
        <a routerLink="/basket" class="position-relative">
            <i class="fa fa-shopping-cart fa-2x me-3 text-dark"></i>
            <div *ngIf="(basket$ | async) as basket" class="cart-no">{{basket.items.length}}</div>
        </a>
        <ng-container *ngIf="(currentUser$ | async) === null">
          <a routerLink="/account/login" class="btn btn-outline-secondary ms-3 me-3" href="#">Login</a>
          <a routerLink="/account/register" class="btn btn-outline-secondary me-3" href="#">Sign up</a>
        </ng-container>
        <ng-container *ngIf="(currentUser$ | async) as user">
          <div class="dropdown ms-3 me-5" dropdown>
            <a class="dropdown-toggle" style="cursor: pointer" dropdownToggle>
              <strong>Welcome {{(user.displayName)}}</strong>
            </a>
            <div class="dropdown-menu dropdown-menu-right" style="cursor: pointer" *dropdownMenu>
              <a routerLink="/basket" class="dropdown-item d-flex align-items-center py-2">
                <i class="fa fa-shopping-cart me-3"></i> View Basket
              </a>
              <a routerLink="/orders" class="dropdown-item d-flex align-items-center py-2">
                <i class="fa fa-history me-3"></i> View Orders
              </a>
              <div class="dropdown-divider"></div>
              <a (click)="logout()" class="dropdown-item d-flex align-items-center py-2">
                <i class="fa fa-sign-out me-3"></i> Logout
              </a>
            </div>
          </div>
        </ng-container>
    </div>

</div>
