<div class="topbar">
  <button
    class="topbar-logo"
    (click)="goToHome()">
    <img
      class="topbar-logo-expanded"
      [src]="!standalone ? logoPath : 'assets/logos/nucliadb.svg'"
      [alt]="!standalone ? brandName : 'NucliaDB'" />
    @if (isStageOrDev) {
      <img
        src="assets/logos/stage-icon.svg"
        class="is-stage"
        alt="Stage" />
    }
  </button>

  <div class="topbar-buttons">
    @if (!inPlatformApp && !(simpleMode | async)) {
      @if (showDemo && (hasDemoButton | async)) {
        <pa-button
          kind="primary"
          aspect="basic"
          paFocusable
          (click)="bookDemo()"
          (keyup.enter)="bookDemo()">
          <a
            href="https://www.progress.com/agentic-rag/book-a-demo"
            target="_blank"
            rel="noopener noreferrer">
            {{ 'need-help-book-demo' | translate }}
          </a>
        </pa-button>
      }
      @if (isTrial | async) {
        <pa-button
          kind="primary"
          aspect="basic"
          paFocusable
          (click)="goToTutorial()"
          (keyup.enter)="goToTutorial()">
          <a
            href="https://www.progress.com/agentic-rag/trial-guide?utm_medium=product&utm_source=trial-guide&utm_content=agentic-rag-trial"
            target="_blank"
            rel="noopener noreferrer">
            {{ 'generic.trial-tutorial' | translate }}
          </a>
        </pa-button>
      }
    }
  </div>

  <div class="topbar-actions">
    @if (!inPlatformApp && !standalone && (shouldAccountTypeBeVisible | async)) {
      <pa-button
        kind="primary"
        aspect="basic"
        size="small"
        [routerLink]="billingUrl | async">
        {{ 'account.type.' + (accountType | async) | translate }}
        @if (showTrial | async) {
          ({{ 'account.type.trial-mode' | translate }})
        }
      </pa-button>
    }

    @if ((hasSimpleUI | async) && inDashboard && !(inArag | async)) {
      <pa-toggle
        [value]="!(simpleMode | async)"
        (valueChange)="switchMode($event)">
        {{ 'kb.advanced-mode' | translate }}
      </pa-toggle>
    }

    @if (((userInfo | async)?.accounts?.length || 0) > 1) {
      <div class="topbar-account">
        <strong>{{ (account | async)?.title }}</strong>
      </div>
    }

    @if (!inPlatformApp) {
      <app-kb-switch></app-kb-switch>
    }

    @if (!standalone) {
      @if (!(simpleMode | async)) {
        <stf-notification-button
          [count]="notificationsCount | async"
          [active]="isNotificationPanelOpen"
          (click)="toggleNotificationPanel.emit()"></stf-notification-button>
      }
      <app-user-menu
        data-cy="user-menu"
        [userInfo]="userInfo | async" />
    } @else {
      <app-standalone-menu data-cy="standalone-menu" />
    }
  </div>
</div>
