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

        <!-- Informações do usuário -->
        <div class="user-info d-flex align-items-center">
            <!-- Nome do usuário e loja -->
            <div class="user-details me-3 text-end">
                <span class="name-user d-block">{{ userName }}</span>
                <span class="last-access d-block">Loja: {{ storeName }}</span>
            </div>

            <!-- Carrinho -->
            <div class="cart me-3 text-center">
                <kendo-badge-container>
                    <img src="assets/img/cart.svg" alt="Carrinho" class="cart-icon" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" />
                    <kendo-badge [align]="align" [position]="position" [themeColor]="themeBadge">{{ (shoppingItems$ |
                        async)?.length || 0 }}</kendo-badge>
                </kendo-badge-container>
            </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>