<div class="col-md-10 mx-auto" id="page-topbar">
  <div class="p-0">
    <div class="navbar-header shadow-lg d-flex justify-content-between align-items-center w-100">
      
      <!-- Left Section -->
      <div class="d-flex align-items-center">

        <!-- Logo Section -->
        <div class="navbar-brand-box bg-primary me-2">
          <a routerLink="/home/dashboard" class="logo logo-dark">
            <span class="logo-sm">
              <img src="assets/images/aConnect-lgs.png" alt="Logo" height="30" />
            </span>
            <span class="logo-lg">
              <img src="assets/images/aConnect-new.png" alt="Logo" height="60" />
            </span>
          </a>
          <a routerLink="/home/dashboard" class="logo logo-light">
            <span class="logo-sm">
              <img src="assets/images/aConnect-new.png" alt="Logo" height="30" />
            </span>
            <span class="logo-lg">
              <img src="assets/images/aConnect-new.png" alt="Logo" height="60" />
            </span>
          </a>
        </div>

        <!-- Vertical Menu Button -->
        <button type="button"
                class="btn btn-sm px-3 text-muted header-item waves-effect"
                id="vertical-menu-btn">
          <img src="assets/images/data-transfers.png" alt="Logo" style="width: 16px; margin: -4px;" />
        </button>

        <!-- Submodule Text -->
        <div class="d-none d-lg-block ms-3">
          <p class="text-muted mt-3 fw-normal mb-0">
            {{ (sidebarService.currentSubModule | translate) }}
          </p>
        </div>
      </div>

      <!-- Right Section -->
      <div class="d-flex align-items-center">

        <div class="d-none d-lg-inline-block me-3">
          <label class="text-muted fw-normal mb-0 " 
                 [title]="mismatchedDates" 
                 [style]="{'color': dateColor}" 
                 style="font-size: 14px;" >
            {{'date' | translate}}: {{date}}
          </label>
        </div>
        
        <div class="dropdown d-inline-block profile-dropdown">
          <button type="button"
                  class="btn header-item waves-effect p-0 d-flex align-items-center"
                  id="page-header-user-dropdown"
                  (click)="toggleDropdown()"
                  aria-haspopup="true"
                  [attr.aria-expanded]="isDropdownVisible ? 'true' : 'false'">
            <img class="rounded-circle header-profile-user" src="assets/images/user-icon.png" alt="user-icon" />
            <span class="d-none d-xl-inline-block ms-2 fw-sm">{{username}}</span>
            <i class="mdi mdi-chevron-down text-muted d-xl-inline-block font-size-22"></i>
          </button>
          
          <div class="dropdown-menu dropdown-menu-end" [ngClass]="{'show': isDropdownVisible}">
            <a class="dropdown-item text-danger" (click)="logout()">
              <i class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i> {{ 'logout' | translate }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>