<header class="header-productlist fixed-top">
  <div class="container d-flex justify-content-between align-items-center py-3">
    <!-- Logo à esquerda -->
    <div class="logo-jurunense">
      <a href="/" title="Jurunenese">
        <img src="assets/img/logo_simplifique.png" alt="Imagem" class="img-fluid" />
      </a>
    </div>

    <!-- Informações do usuário à direita -->
    <div class="d-flex align-items-center">
      <!-- Carrinho -->
      <div class="d-flex align-items-center">
        <kendo-badge-container>
          <img src="assets/img/cart.svg" alt="Carrinho" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
            aria-controls="offcanvasRight" />
          <kendo-badge [align]="align" [position]="position" [themeColor]="themeBadge">
            {{ (shopping$ | async).length }}
          </kendo-badge>
        </kendo-badge-container>
      </div>
      <!-- Dados do usuário -->
      <div class="me-3 text-end">
        <span class="name-user d-block">{{ userName }}</span>
        <span class="last-access d-block">Loja: {{ storeName }}</span>
      </div>

      <!-- Dropdown de configurações -->
      <div class="dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown"
          aria-expanded="false">
          <img src="assets/img/config.svg" alt="Configurações" class="img-config" />
        </a>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
          <li>
            <a class="dropdown-item" (click)="logout()">Sair</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>